/* 언어 전환 — lang-router.js가 <body>에 lang-ko/ja/en 클래스를 붙입니다.
   랜딩페이지의 규칙과 같으며, curation-*.html에서 쓰기 위해 공통 CSS로 옮겼습니다. */
[lang-block]{display:none;}
body.lang-ko [lang-block="ko"]{display:block;}
body.lang-ko span[lang-block="ko"]{display:inline;}
body.lang-ja [lang-block="ja"]{display:block;}
body.lang-ja span[lang-block="ja"]{display:inline;}
body.lang-en [lang-block="en"]{display:block;}
body.lang-en span[lang-block="en"]{display:inline;}

/* Wellutin curation page shared styles — used by all curation-*.html pages */
:root{
  --ink:#1E2A22; --paper:#FAF9F5; --panel:#F0F2EA;
  --teal:#1B4B43; --teal-soft:#7FA593; --teal-dark:#123832;
  --gold:#B8862E; --gold-soft:#EFDFB8; --line: rgba(30,42,34,0.14);
  --radius:14px; --serif:'Noto Serif KR', serif; --sans:'Noto Sans KR', sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased;}
.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

header{border-bottom:1px solid var(--line); background:#FAF9F5; position:sticky; top:0; z-index:20;}
.headbar{display:flex; align-items:center; justify-content:space-between;
  /* 세로만 지정합니다 — padding 단축 속성은 .wrap 의 좌우 여백(0 24px)까지
     덮어써서, 좁은 화면에서 헤더 내용이 화면 끝에 붙습니다. */
  padding-top:16px; padding-bottom:16px;}
.back{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--teal); text-decoration:none; font-weight:600;}
.brand{font-family:'Newsreader',serif; font-size:18px; font-weight:600; color:var(--teal);}

main{padding:52px 0 100px;}

/* progress dots */
.progress{display:flex; align-items:center; gap:8px; margin-bottom:34px;}
.progress .pd{width:8px; height:8px; border-radius:50%; background:var(--line);}
.progress .pd.on{background:var(--gold); width:22px; border-radius:5px; transition:all .3s ease;}
.progress .lbl{font-size:12px; color:#6C7A6E; margin-left:4px;}

.screen{display:none;}
.screen.active{display:block; animation:fadein .4s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.eyebrow{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
h1{font-family:var(--serif); font-size:28px; font-weight:600; color:var(--teal); margin:0 0 12px; line-height:1.35;}
.sub{color:#4B5A4D; font-size:14.5px; margin:0 0 36px; max-width:52ch;}

/* form */
.qgroup{margin-bottom:30px;}
.qgroup .qtitle{font-size:14.5px; font-weight:700; color:var(--teal); margin-bottom:12px;}
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chip{
  padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--paper);
  font-size:13.5px; cursor:pointer; color:var(--ink); transition:all .15s ease; user-select:none;
  font-family:inherit; line-height:inherit; -webkit-tap-highlight-color:transparent;
}
.chip:hover{border-color:var(--teal-soft);}
.chip:focus-visible{outline:2px solid var(--teal-soft); outline-offset:2px;}
.chip.sel{background:var(--teal); border-color:var(--teal); color:var(--paper); font-weight:600;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; border:none; text-decoration:none; font-family:inherit;}
.btn-primary{background:var(--teal); color:var(--paper);}
.btn-primary:disabled{background:#B7C2B8; cursor:not-allowed;}
.btn-primary:not(:disabled):hover{background:var(--teal-dark);}
.btn-gold{background:var(--gold); color:#241a06;}
.btn-gold:hover{background:#a3771f;}

/* 아직 그 언어로 리포트가 없는 결과 유형에서 PDF 신청 버튼이 쓰는 상태.
   경고가 아니라 "지금은 못 드린다"는 담담한 안내라, 붉은색 대신
   눌리지 않는 회색 톤으로만 구분합니다. */
.btn.is-pending{background:var(--panel); color:#6C7A6E; cursor:default;}
.btn.is-pending:hover{background:var(--panel);}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink);}
.btn:disabled{background:#B7C2B8 !important; color:#5A665C !important; cursor:not-allowed;}

/* loading screen */
.loadwrap{display:flex; flex-direction:column; align-items:center; text-align:center; padding:60px 0;}
.spinner{width:64px; height:64px; border-radius:50%; border:3px solid var(--panel); border-top-color:var(--gold); animation:spin 1s linear infinite; margin-bottom:30px;}
@keyframes spin{to{transform:rotate(360deg);}}
.agent-lines{max-width:420px; margin:0 auto; text-align:left;}
.agent-line{
  display:flex; align-items:center; gap:10px; font-size:14px; color:#8A968B; padding:9px 0;
  opacity:0; transform:translateY(4px); transition:all .4s ease;
}
.agent-line.show{opacity:1; transform:translateY(0); color:var(--ink);}
.agent-line .chk{width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent;}
.agent-line.show .chk{background:var(--teal); border-color:var(--teal); color:var(--paper);}

/* results */
.note{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-size:13.8px; color:#3C4A3F; margin-bottom:32px;}
.note b{color:var(--teal);}

.rcards{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px;}
.rcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; flex:1 1 200px;}
.rcard h4{font-size:15px; color:var(--teal); margin:0 0 8px;}
.rcard p{font-size:12.8px; color:#5A665C; margin:0;}
/* 성분 카드 → 비교표 해당 행(2026-09-17 H45 E1 1단계 B안) */
.rcard-go{display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--teal); text-decoration:underline; text-underline-offset:3px;}
table.compare tr.from-card{background:var(--gold-soft, #FBF2E6); box-shadow:inset 3px 0 0 var(--gold, #B8862E);}
.from-card-tag{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600; color:#6B5528; background:rgba(184,134,46,0.18); vertical-align:middle;}

.sec-title{font-size:17px; font-weight:700; color:var(--teal); margin:0 0 16px;}
table.compare{width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:8px;}
table.compare th, table.compare td{text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.compare th{color:#5A665C; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;}
.buy-row{display:flex; gap:6px; flex-wrap:wrap;}
.buy-row a{
  font-size:12px; font-weight:700; padding:7px 12px; border-radius:7px; text-decoration:none; white-space:nowrap;
}
/* 외부 판매처로 나간다는 표시(U01). 읽기 프로그램에는 읽히지 않게 대체 글자를 비움(지원 안 하는 브라우저는 첫 줄) */
.buy-row a::after{content:" ↗"; content:" ↗" / "";}
.buy-ih{background:var(--teal); color:var(--paper);}
.buy-cp{background:var(--gold); color:#241a06;}
.buy-amz{background:#3C4A3F; color:var(--paper);}
.buy-pending{font-size:12px; color:#8A968B; font-style:italic;}
/* 제휴 고지 — 눈에 잘 띄게(2026-09-17 H11 A안: 13px · #5A6A5C 대비 5.46:1 · 첫머리 고지는 옅은 바탕) */
.affiliate-note{font-size:13px; color:#5A6A5C; margin:6px 0 40px;}
/* 영어판(로컬 전용): 아마존 제품을 고르기 전까지 한국 시장 제품 표를 보이지 않음 (H78 Q3) */
body.lang-en .compare-title, body.lang-en table.compare, body.lang-en #affiliateNote{display:none;}
/* 제품 비교표 바로 아래 「판매처에서 확인」 안내(2026-09-17 H51 안 1 — curation.js 가 표 뒤에 붙임) */
.price-note{font-size:13px; color:#5A6A5C; margin:8px 0 0;}
.affiliate-note-top{font-size:13px; color:#5A6A5C; background:var(--panel); border-radius:10px; padding:10px 14px; margin:0 0 28px;}

.premium-box{
  background:var(--teal); border-radius:16px; padding:30px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:40px; flex-wrap:wrap;
}
.premium-box .ptxt h3{color:var(--paper); font-size:16.5px; margin:0 0 6px;}
.premium-box .ptxt p{color:rgba(250,249,245,0.72); font-size:12.8px; margin:0 0 12px;}
.premium-box .locked-list{list-style:none; margin:0; padding:0;}
.premium-box .locked-list li{color:rgba(250,249,245,0.6); font-size:12px; padding:3px 0;}

.actions{display:flex; gap:12px; flex-wrap:wrap;}

.disclaimer-footer{
  margin-top:60px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 22px; font-size:12.5px; color:#556357;
}

/* PDF lead-capture modal */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(18,56,50,0.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal-box{
  background:var(--paper); border-radius:20px; padding:36px; width:100%; max-width:440px;
  max-height:90vh; overflow-y:auto; position:relative;
  border:1px solid rgba(184,134,46,0.3); box-shadow:0 24px 60px rgba(18,56,50,0.35);
  transform:translateY(16px) scale(.97); transition:transform .25s ease;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
  border:none; background:var(--panel); color:var(--ink); font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{background:var(--line);}
.modal-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.modal-box h3{font-family:var(--serif); font-size:21px; font-weight:600; color:var(--teal); margin:0 0 10px; line-height:1.4;}
.modal-sub{font-size:13.5px; color:#4B5A4D; margin:0 0 24px; line-height:1.6;}

#pdfLeadForm input[type="email"]{
  width:100%; padding:13px 16px; border-radius:10px; border:1px solid var(--line); background:var(--panel);
  font-size:14px; font-family:inherit; color:var(--ink); margin-bottom:18px;
}
#pdfLeadForm input[type="email"]:focus{outline:2px solid var(--teal-soft); outline-offset:1px; border-color:var(--teal-soft);}
.consent-row{display:flex; align-items:flex-start; gap:10px; font-size:12.8px; color:#3C4A3F; margin-bottom:12px; cursor:pointer; line-height:1.55;}
.consent-row input[type="checkbox"]{margin-top:2px; width:16px; height:16px; accent-color:var(--teal); flex:none; cursor:pointer;}
.consent-row b{color:var(--teal);}
#pdfSubmitBtn{width:100%; justify-content:center; margin-top:10px;}
.modal-footnote{font-size:11px; color:#8A968B; text-align:center; margin:18px 0 0; line-height:1.6;}
.modal-footnote a{color:var(--teal); text-decoration:underline;}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:200;
  background:var(--teal); color:var(--paper); padding:16px 22px; border-radius:12px; font-size:13.5px;
  box-shadow:0 12px 30px rgba(18,56,50,0.35); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast a{color:var(--gold-soft); font-weight:700; text-decoration:underline;}

@media (max-width:640px){
  .rcard{flex:1 1 100%;}
  table.compare thead{display:none;}
  table.compare, table.compare tbody, table.compare tr, table.compare td{display:block; width:100%;}
  table.compare tr{border-bottom:1px solid var(--line); padding:10px 0;}
  table.compare td{border:none; padding:4px 0;}
  .premium-box{flex-direction:column; align-items:flex-start;}
  .modal-box{padding:28px 22px;}
}