/* 이용만족도 의견남기기 — Figma 컴포넌트 Form(11162:4192 Default / 4352 3점 / 4353 5점) 기준.
   정본·구형 화면 공용. 시안이 왼쪽 모서리만 50px 라운드라 화면 우측 끝에 붙는 드로어로 구현한다.
   폰트는 전 영역 Pretendard 사용(시안의 Paperlogy·Ria Sans 는 프로젝트에 없음). */
.kr-feedback-overlay{
  --fb-sans:'Pretendard','NanumGothic',sans-serif;
  --fb-text:#545c68;
  /* 폼에 집중하도록 뒤 화면을 회색으로 덮고 살짝 흐린다. */
  position:fixed;inset:0;z-index:2200;display:none;align-items:flex-end;justify-content:flex-end;
  background:rgba(33,37,45,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-sizing:border-box;font-family:var(--fb-sans);
}
.kr-feedback-overlay.open{display:flex;}
.kr-feedback-overlay *{box-sizing:border-box;}

/* 패널: 시안 실측 426×905(본문 357 = 426 - pl29 - pr40).
   말풍선이 좌상단 밖으로 나가므로 스크롤은 내부 래퍼가 맡는다. */
/* max-height 에서 106 을 빼는 이유: 선물상자 뱃지가 패널 위로 100px 넘치므로 그 자리를 남긴다. */
.kr-feedback-panel{position:relative;width:426px;max-width:100%;max-height:calc(100vh - 106px);
  background:#fff;border:0;border-radius:50px 0 0 50px;display:flex;flex-direction:column;
  box-shadow:0 10px 40px rgba(12,21,38,.18);}
/* flex 자식은 min-height:0 이 없으면 줄어들지 않는다 — 없으면 화면이 짧을 때
   하단 버튼이 패널 밖으로 밀려나고 스크롤도 걸리지 않는다. */
/* 스크롤바 자리를 항상 비워둔다(scrollbar-gutter) — 스크롤이 생겼다 없어질 때 내용이 밀리지 않도록.
   거터 폭은 브라우저·OS마다 달라서 열 때 JS 가 실측해 --fb-gutter 에 넣고,
   오른쪽 여백에서 그만큼 빼 시안의 40 을 유지한다. */
.kr-feedback-scroll{display:flex;flex-direction:column;gap:24px;
  padding:20px max(0px, calc(40px - var(--fb-gutter, 0px))) 50px 29px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#c9d2e0 transparent;}
.kr-feedback-scroll::-webkit-scrollbar{width:8px;}
.kr-feedback-scroll::-webkit-scrollbar-track{background:transparent;}
.kr-feedback-scroll::-webkit-scrollbar-thumb{background:#c9d2e0;border-radius:4px;}
.kr-feedback-bubble{position:absolute;left:-15px;top:-5px;width:52px;height:50px;pointer-events:none;}

/* ---------- 헤더 ---------- */
.kr-feedback-top{position:relative;display:flex;flex-direction:column;padding-top:12px;}
.kr-feedback-head{display:flex;align-items:flex-start;justify-content:space-between;padding:0 20px 20px;}
.kr-feedback-headtext{display:flex;flex-direction:column;gap:4px;justify-content:center;padding-top:4px;min-width:0;}
.kr-feedback-headtext h2{margin:0;font-family:var(--fb-sans);font-size:20px;font-weight:700;
  line-height:1.5;color:#2b2f34;white-space:nowrap;}
.kr-feedback-headtext h2 em{font-style:normal;color:#1b64da;}
.kr-feedback-headtext p{margin:0;font-size:13px;letter-spacing:-.32px;line-height:normal;color:var(--fb-text);}

/* 선물상자 이벤트 뱃지 — 배치는 Figma Form(11162:5291, 586×988) 실측.
   노드 프레임은 x=400 137×157 이지만 이미지는 원본 142×157 그대로 그려져 우측으로 5px 넘친다
   (렌더 역산 결과 스케일 1.000). → 시안 기준 우측 여백은 586-(400+142)=44.
   다만 우상단 닫기 X 를 없애 자리가 남아 28 로 당겼다(16 이하는 Click 배지가 패널 밖으로 걸침).
   패널 밖 위로 넘치므로 패널 직계 자식으로 둔다. */
.kr-feedback-event{position:absolute;z-index:11;right:28px;top:-100px;width:142px;height:157px;
  padding:0;border:0;background:transparent;cursor:pointer;line-height:0;}
.kr-feedback-event img{width:142px;height:157px;display:block;}
.kr-feedback-event:focus-visible{outline:2px solid #297bff;outline-offset:4px;border-radius:12px;}

/* 별점 박스 */
.kr-feedback-rate{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;
  padding:12px 20px;border:2px solid #8a93a2;border-radius:10px;min-width:0;}
.kr-feedback-rate .rate-label{font-family:var(--fb-sans);font-size:13px;font-weight:700;
  letter-spacing:-.32px;color:var(--fb-text);}
.kr-feedback-rating{display:flex;align-items:center;gap:2px;}
.kr-feedback-stars{display:flex;direction:rtl;}
.kr-feedback-stars input{position:absolute;opacity:0;pointer-events:none;}
.kr-feedback-stars label{width:16px;height:16px;cursor:pointer;
  background:url('../images/app/fb-star-off.svg') no-repeat center/14.34px 13.72px;}
.kr-feedback-stars label:hover,.kr-feedback-stars label:hover~label,.kr-feedback-stars input:checked~label{
  background-image:url('../images/app/fb-star-on.svg');}
.kr-feedback-stars input:focus-visible+label{outline:2px solid #297bff;outline-offset:2px;border-radius:3px;}
.kr-feedback-rate output{padding-top:1px;font-size:13px;line-height:normal;color:rgba(0,12,30,.8);}

/* ---------- 질문 ---------- */
.kr-feedback-questions{display:flex;flex-direction:column;gap:18px;}
.kr-feedback-question{display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:12px;}
.kr-feedback-question .q-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.kr-feedback-question .q-no{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 auto;border-radius:50px;background:#03429f;
  font-size:13px;font-weight:700;line-height:1.5;color:#fff;}
.kr-feedback-question .q-title{font-family:var(--fb-sans);font-size:13px;font-weight:700;
  letter-spacing:-.32px;color:var(--fb-text);}
.kr-feedback-question .q-note{font-size:13px;letter-spacing:-.32px;color:var(--fb-text);}
.kr-feedback-question .q-body{display:flex;flex-direction:column;gap:12px;padding:0 30px;}
.kr-feedback-options{display:flex;flex-direction:column;gap:4px;}
.kr-feedback-options .opt-row{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;}
/* 상세 입력창은 선택한 항목(2단이면 그 줄) 바로 아래에 끼워 넣는다. */
.kr-feedback-options .kr-feedback-detail{margin-top:4px;}
.kr-feedback-option{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13px;letter-spacing:-.32px;color:var(--fb-text);}
.kr-feedback-option input{width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:#297bff;}
.kr-feedback-detail{width:100%;min-height:47px;padding:12px 20px;border:1px solid transparent;
  border-radius:8px;background:#f6f8fc;font:inherit;font-size:13px;letter-spacing:-.32px;
  line-height:normal;color:#2b2f34;resize:vertical;}
.kr-feedback-detail::placeholder{color:#8a93a2;}
.kr-feedback-detail:focus{outline:2px solid rgba(41,123,255,.28);border-color:#297bff;background:#fff;}
.kr-feedback-free{min-height:110px;}

/* 오류 신고 — 시안에서는 질문 묶음과 형제(모달 gap 24) */
.kr-feedback-errorq{display:flex;flex-direction:column;gap:8px;}
.kr-feedback-errorq>label{display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--fb-sans);font-size:13px;font-weight:700;letter-spacing:-.32px;color:var(--fb-text);}
.kr-feedback-errorq input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;margin:0;
  border-radius:4px;accent-color:#297bff;}
.kr-feedback-errorq em{font-style:normal;font-family:var(--fb-sans);font-weight:400;}

/* ---------- 버튼 ---------- */
/* 시안대로 내용 끝에 이어 붙는다(btnwrap pt-20). 패널 아래 여백 50 은 스크롤 래퍼가 갖는다. */
.kr-feedback-actions{flex:0 0 auto;display:flex;gap:8px;padding-top:20px;}
/* app.css 의 `.rd-body button{background:none;color:inherit}` (0,1,1) 보다 우선해야 하므로
   클래스 2개(0,2,0)로 올린다. 안 그러면 배경이 지워져 흰 글씨만 남아 버튼이 안 보인다. */
/* 높이는 고정하지 않는다 — 시안 실측 44px 는 padding 14 + 본문 줄높이로 만들어진다. */
.kr-feedback-overlay .kr-feedback-actions button{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 24px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--fb-sans);font-size:14px;font-weight:800;letter-spacing:-.14px;line-height:16px;color:#fff;}
.kr-feedback-actions .chev{width:16px;height:16px;flex:0 0 auto;
  background:url('../images/app/fb-chevron.svg') no-repeat center/10.67px 6.4px;transform:rotate(90deg);}
.kr-feedback-overlay .kr-feedback-secondary{flex:0 0 auto;background:#8491a7;}
.kr-feedback-overlay .kr-feedback-primary{flex:1 1 0;min-width:0;background:#297bff;}
.kr-feedback-overlay .kr-feedback-primary:disabled{opacity:.55;cursor:wait;}

/* 제출 결과 안내(시안에 없는 상태 표시) */
.kr-feedback-error,.kr-feedback-success{padding:10px 12px;border-radius:9px;font-size:13px;}
.kr-feedback-error{background:#fff0f1;color:#c53d49;}
.kr-feedback-success{background:#eaf5ff;color:#176bc8;}

/* 좁은 화면: 우측 드로어 대신 하단 시트 */
@media (max-width:600px){
  .kr-feedback-overlay{align-items:flex-end;justify-content:center;}
  .kr-feedback-panel{width:calc(100% - 20px);max-width:390px;max-height:calc(100dvh - 88px);border-radius:24px 24px 0 0;}
  .kr-feedback-scroll{gap:16px;padding:16px max(0px, calc(16px - var(--fb-gutter, 0px))) 24px 16px;}
  .kr-feedback-bubble{left:8px;top:-18px;}
  .kr-feedback-head{padding:0 0 16px;}
  .kr-feedback-headtext h2{font-size:18px;white-space:normal;}
  .kr-feedback-event{right:14px;top:-70px;width:96px;height:106px;}
  .kr-feedback-event img{width:96px;height:106px;object-fit:contain;}
  .kr-feedback-rate{align-items:flex-start;flex-direction:column;gap:8px;padding:12px 14px;}
  .kr-feedback-rating{align-self:flex-end;}
  #rd-review-event{justify-content:center;align-items:center;}
  #rd-review-event .rv-modal{margin:0;}
  .kr-feedback-question .q-body{padding:0 8px;}
  .kr-feedback-options .opt-row{grid-template-columns:1fr;}
}