/* 무드코디 v2 — 루크 디자인 레이어
   styles.css / privacy.css 뒤에 불러와 덮어쓰는 추가 스타일. 기존 ID·class는 이름을 바꾸지 않는다.
   방향: 차콜 × 오프화이트 대비, 라임 한 가지 포인트, 큰 타이포, 모바일 우선.
   라임은 글자색이 아니라 "차콜 글자 아래 배경"으로만 쓴다(오프화이트 위 라임 글자는 대비 부족). */

:root{
  --ink:#151515;--ink-2:#2a2a2a;--bg:#f3f1ea;--paper:#fbfaf6;--muted:#55524c;--line:#d6d2c7;
  --lime:#c8f53a;--lime-soft:#effbc9;--lime-ink:#151515;
  /* 기존 변수 재매핑: 보라 계열을 차콜로 흡수 */
  --purple:#151515;--pale:#effbc9;--sage:#eef0e6;--orange:#151515;
  --radius:4px;--tap:44px;
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink);background:var(--bg)
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;overflow-x:clip;word-break:keep-all;overflow-wrap:anywhere}
img,canvas,svg,video{max-width:100%}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--lime)}
::selection{background:var(--lime);color:var(--ink)}

.wrap{padding:0 16px}
@media(min-width:600px){.wrap{padding:0 28px}}
@media(min-width:1000px){.wrap{padding:0 44px}}

/* ---------- 헤더 (sticky) ---------- */
.header{position:sticky;top:0;z-index:20;height:60px;background:var(--bg);border-bottom:1.5px solid var(--ink);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.brand{font-size:20px;font-weight:900;letter-spacing:-.8px;gap:8px}
.brand-mark{width:28px;height:28px;border-radius:2px;background:var(--ink);color:var(--lime);font:900 20px/28px "Pretendard","Malgun Gothic",sans-serif}
.brand-mark span{color:var(--lime);font-size:9px;top:1px;right:2px}
.brand-en{font-size:10px;letter-spacing:2.4px;font-weight:700;color:var(--muted)}
.private-pill{font-size:12px;color:var(--ink);border:1px solid var(--ink);border-radius:99px;padding:3px 10px}
.private-pill i{background:var(--lime);width:7px;height:7px;box-shadow:0 0 0 1px var(--ink)}
.text-btn{font-size:13px;font-weight:700;color:var(--ink);padding:0 4px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
@media(max-width:600px){.header{height:56px}.brand{font-size:19px}.text-btn{font-size:13px}}

/* ---------- 공통 타이포 / 버튼 ---------- */
.eyebrow{font-size:12px;letter-spacing:1.6px;font-weight:800;color:var(--ink);margin:0 0 12px;text-transform:uppercase}
.btn{border-radius:var(--radius);min-height:48px;padding:12px 20px;font-size:14px;font-weight:800;letter-spacing:-.2px;gap:10px}
.btn:hover{filter:none;transform:translateY(-1px)}
.btn:active{transform:none}
.dark{background:var(--ink);color:var(--bg)}
.light{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.primary{background:var(--lime);color:var(--lime-ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.primary:hover{background:#d4fb55}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn:disabled{opacity:1;background:#e2dfd6;color:#77736b;box-shadow:inset 0 0 0 1.5px #c4c0b5;transform:none}

/* ---------- 히어로 (기존 마크업 / hero-fragment 모두 대응) ---------- */
.hero{grid-template-columns:1fr;gap:22px;padding:24px 0 28px;align-items:end}
.hero .eyebrow{font-size:12px;margin-bottom:12px;display:inline-flex;gap:8px;align-items:center}
.hero h1{font-size:clamp(38px,11vw,76px);line-height:1.08;letter-spacing:-.045em;font-weight:900;margin:0 0 16px}
.hero h1>span{color:var(--ink);background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 92%,transparent 92%);padding:0 .04em}
.hero h1>span:after{content:none}
.hero-spark{width:20px;height:20px;color:var(--ink);margin:8px 0 0 6px}
.hero-desc{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 16px;max-width:34em}
.hero-notes{font-size:12px;color:var(--ink);gap:8px;flex-wrap:wrap;margin-top:14px}
.hero-notes span{border:1px solid var(--ink);border-radius:99px;padding:3px 10px}

.hero-scope{display:grid;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.hero-scope>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hero-scope dt,.hero-scope .scope-label{font-size:12px;font-weight:800;min-width:64px;margin:0}
.hero-scope dd{margin:0;font-size:13px;padding:4px 10px;border-radius:99px;line-height:1.4}
.hero-scope .is-on{background:var(--ink);color:var(--bg)}
.hero-scope .is-on:before{content:"✓ ";color:var(--lime)}
.hero-scope .is-off{color:var(--muted);box-shadow:inset 0 0 0 1px #aaa59a;background:transparent}
.hero-scope .is-off:before{content:"— "}
.hero-cta{display:flex;flex-wrap:wrap;gap:8px}
.hero-cta .btn{flex:1 1 150px}

.hero-board{transform:none;max-width:none;width:100%;border-radius:var(--radius);background:var(--ink);color:var(--bg);padding:12px;box-shadow:none;min-width:0}
.board-top{font-size:11px;letter-spacing:1.4px;color:#cfccc3;font-weight:700;gap:10px;margin-bottom:10px}
.board-top span:last-child{text-align:right}
.wardrobe-hero{height:auto;aspect-ratio:4/3;max-height:300px;background:#1f1f1f;border-radius:2px}
.swatch-row{border-top:1px solid #3a3a3a;padding-top:10px;margin-top:10px;flex-wrap:wrap}
.swatch-row>span{width:20px;height:20px;border:1.5px solid var(--bg)}
.swatch-row .swatch-arrow{width:auto;height:auto;border:0;background:none;color:var(--lime);font-size:14px}
.swatch-row p{font-size:13px;color:#e8e5dc;margin-left:6px}
figure.hero-board{margin:0}
.float-note{right:12px;bottom:auto;top:-13px;transform:rotate(-3deg);background:var(--lime);color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;font-size:12px;font-weight:800;padding:5px 12px;box-shadow:none}
.float-note span{color:var(--ink);margin-left:4px}

/* 히어로 사진 영역: 이미지가 있으면 ::after가 덮고, 없으면 내부 SVG가 그대로 보인다 */
.hero-photo{position:relative;aspect-ratio:4/3;max-height:320px;width:100%;overflow:hidden;border-radius:2px;background:#1f1f1f}
.hero-photo>svg{display:block;width:100%;height:100%}
.hero-photo:after{content:"";position:absolute;inset:0;background:url("assets/hero-editorial.webp") center/cover no-repeat}
.hero-credit{display:block;font-size:12px;color:#cfccc3;margin-top:8px;line-height:1.5}

@media(min-width:860px){
  .hero{grid-template-columns:1.1fr 1fr;gap:48px;padding:48px 0 52px;align-items:center}
  .hero-photo,.wardrobe-hero{max-height:420px}
  .hero-board{padding:16px}
}
@media(max-width:600px){
  .hero{padding:20px 0 24px;gap:18px}
  .hero .eyebrow{font-size:11px}
  .hero-desc{font-size:14px}
  .hero-board{margin:0;padding:10px}
  .hero-photo,.wardrobe-hero{aspect-ratio:16/11;max-height:250px}
  .board-top{font-size:10px}
  .float-note{top:-12px;right:10px;font-size:11px}
}

/* ---------- 스튜디오 ---------- */
.studio{border-top:1.5px solid var(--ink);padding-top:28px;scroll-margin-top:64px}
.studio-head{gap:12px;flex-wrap:wrap}
.studio-head .eyebrow{font-size:12px;margin-bottom:6px}
.studio-head h2{font-size:clamp(28px,7vw,40px);font-weight:900;letter-spacing:-.04em;line-height:1.1}
.step-note{font-size:13px;color:var(--ink);font-weight:700}
.step-note span{color:var(--muted)}

.tabs{margin-top:20px;border-bottom:1.5px solid var(--ink);gap:0}
.tabs button{flex:1 1 0;min-height:52px;font-size:15px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1.5px;padding:12px 8px}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink);font-weight:900;background:linear-gradient(transparent 70%,var(--lime-soft) 70%)}
.tabs span{font-size:11px;font-weight:800;margin-right:6px}
@media(min-width:860px){.tabs button{flex:0 0 auto;padding:12px 28px}}

.studio-grid{border:1.5px solid var(--ink);border-top:0;background:var(--paper);grid-template-columns:1fr}
.studio-grid>*{min-width:0}
@media(min-width:860px){.studio-grid{grid-template-columns:1fr 1fr}.input-column{border-right:1.5px solid var(--ink);border-bottom:0}}
.input-column{padding:20px 16px;border-right:0;border-bottom:1.5px solid var(--ink)}
.result-column{padding:22px 16px;background:var(--bg)}
@media(min-width:600px){.input-column,.result-column{padding:28px}}

.panel-label{gap:10px;margin-bottom:14px;flex-wrap:wrap}
.panel-label h3{font-size:16px;font-weight:800;letter-spacing:-.3px}
.number{width:26px;height:26px;font-size:13px;font-weight:900;background:var(--ink);color:var(--lime);border-radius:2px}
.tiny-tag,.optional{font-size:12px;color:var(--muted);font-weight:600}

.dropzone{border:1.5px dashed var(--ink);border-radius:var(--radius);background:var(--bg);min-height:260px}
.dropzone.drag{background:var(--lime-soft);border-style:solid;border-color:var(--ink)}
#emptyUpload{padding:24px 14px}
.upload-icon{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:2px}
.upload-icon svg{color:var(--ink)}
.dropzone h4{font-size:18px;font-weight:900;letter-spacing:-.4px}
.dropzone p{font-size:14px;color:var(--muted)}
.upload-actions{flex-wrap:wrap}
.upload-actions .btn{flex:1 1 130px;max-width:200px}
.dropzone small{font-size:12px;color:var(--muted)}
.photo-meta{font-size:13px;color:var(--muted)}
#photoPreview{background:#1f1f1f}
.photo-actions button{min-height:var(--tap);font-size:13px;font-weight:700;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radius);color:var(--ink);padding:6px 14px}
#removePhoto{background:var(--ink);color:var(--bg)}
.privacy-near-upload{display:inline-flex;align-items:center;min-height:var(--tap);font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px}

#waistControl{background:var(--lime-soft);border:1.5px solid var(--ink);border-radius:var(--radius);padding:12px 14px}
#waistControl label{font-size:14px;font-weight:700}
#waistValue{font-variant-numeric:tabular-nums}
#waistControl small{font-size:13px;color:var(--muted)}
input[type=range]{accent-color:var(--ink);height:var(--tap)}

.form-grid{grid-template-columns:1fr;gap:12px}
@media(min-width:390px){.form-grid{grid-template-columns:1fr 1fr}}
.form-grid label{font-size:13px;font-weight:700;color:var(--ink)}
.form-grid select{min-height:48px;font-size:14px;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.style-preference-label small{font-size:13px;color:var(--muted);font-weight:400}
.check-row{font-size:14px;color:var(--ink);min-height:var(--tap)}
.consent-row{font-size:13px;color:var(--ink);gap:10px}
.check-row input,.consent-row input{accent-color:var(--ink);width:20px;height:20px}
.analyze{min-height:54px;font-size:16px}
.micro-note{font-size:13px;color:var(--muted)}
.status{font-size:13px;color:var(--ink);font-weight:700}
.status.error{color:#b3261e}
.demo-link{font-size:13px;color:var(--ink);min-height:var(--tap)}

/* ---------- 결과 ---------- */
.result-kicker{font-size:12px;color:var(--ink);font-weight:800}
.empty-art{width:72px;height:84px;margin:24px 0 16px}
.face{width:64px;height:76px;font-size:46px;line-height:58px;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink)}
.face:before,.face:after{background:var(--ink);top:33px}
.face:before{left:19px}.face:after{right:19px}
.little-spark{color:var(--ink);font-size:20px;right:-6px;top:-14px;text-shadow:0 0 0 var(--lime)}
.result-empty h3{font-size:clamp(24px,6vw,30px);font-weight:900;letter-spacing:-.04em;line-height:1.25}
.result-empty>p{font-size:14px;color:var(--muted)}
.empty-tags span{font-size:12px;border:1px solid var(--ink);color:var(--ink)}
.honest-note{border-top:1.5px solid var(--ink);font-size:13px;color:var(--muted)}
.honest-note b{font-size:14px;color:var(--ink)}
.honest-note small{font-size:13px}
@media(max-width:600px){.result-empty{min-height:0}}

.result-top{font-size:12px;color:var(--ink);font-weight:700;flex-wrap:wrap}
.sample-badge{background:var(--lime);color:var(--ink);font-size:12px;font-weight:800;box-shadow:inset 0 0 0 1px var(--ink)}
.score-box{flex-wrap:wrap;gap:18px}
.score-ring{background:conic-gradient(var(--ink) calc(var(--score)*1%),#dedad0 0)}
.score-ring>div{background:var(--bg)}
.score-ring strong{font-family:"Pretendard","Malgun Gothic",sans-serif;font-weight:900;letter-spacing:-.04em}
.score-ring small{font-size:11px;color:var(--muted)}
.score-copy{flex:1 1 180px;min-width:0}
.score-copy h3{font-size:20px;font-weight:800;letter-spacing:-.4px}
.score-copy p,.result-subnote{font-size:13px;color:var(--muted)}
.result-block{border-top:1.5px solid var(--ink)}
.result-block h4{font-size:15px;font-weight:800;gap:8px;flex-wrap:wrap}
.palette-detected{grid-template-columns:1fr}
@media(min-width:390px){.palette-detected{grid-template-columns:1fr 1fr}}
.color-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.color-item b{font-size:13px}
.color-item small{font-size:12px;color:var(--muted)}
.feedback{font-size:14px;background:var(--paper);border:1.5px solid var(--ink);border-left:6px solid var(--lime);border-radius:var(--radius)}
.feedback b{color:var(--ink);font-size:14px}
.mini-looks{grid-template-columns:1fr 1fr}
.look-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.look-card b{font-size:13px}
.look-card p{font-size:12px;color:var(--muted)}
.outfit-labels span{font-size:11px;color:var(--ink)}
.accessory-list span{font-size:13px;background:var(--paper);border:1px solid var(--ink);color:var(--ink)}
.result-actions button{min-height:48px;font-size:13px;white-space:normal;flex:1 1 140px}
.more-btn{font-size:13px;font-weight:700;color:var(--ink);border:1.5px solid var(--ink);min-height:48px}
.shape-info{flex-wrap:wrap}
.shape-info h3{font-size:22px;font-weight:800}
.shape-info p{font-size:13px;color:var(--muted)}
.shape-select{min-height:48px;font-size:14px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink)}
.hair-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:76px minmax(0,1fr)}
.hair-card svg{width:76px;height:84px}
.hair-card h4{font-size:15px;font-weight:800}
.hair-card p,.hair-card details{font-size:13px;color:var(--muted)}
.hair-tag{font-size:11px;background:var(--ink);color:var(--lime);font-weight:700}
.hair-card summary{min-height:var(--tap);color:var(--ink);font-weight:700;display:flex;align-items:center}
.hair-card details button{min-height:var(--tap);font-size:13px;background:var(--lime);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- 컬러 랩 (토니 통합 예정 기능) ---------- */
.color-lab{margin:36px 0 8px;border:1.5px solid var(--ink);background:var(--paper);scroll-margin-top:64px;min-width:0}
.lab-header{background:var(--ink);color:var(--bg);padding:20px 16px 18px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.lab-header .eyebrow{color:var(--lime);margin-bottom:6px}
.lab-header h2{font-size:clamp(28px,7.5vw,44px);font-weight:900;letter-spacing:-.045em;line-height:1.08;margin:0}
.lab-header p{font-size:14px;color:#d8d5cc;margin:6px 0 0;max-width:36em}
.lab-layout{display:grid;grid-template-columns:1fr;gap:0}
.lab-layout>*{min-width:0}
.lab-preview{position:relative;background:#1f1f1f;padding:12px;display:grid;place-items:center;min-height:240px;border-bottom:1.5px solid var(--ink)}
.lab-preview canvas,.lab-preview img{display:block;max-width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:2px}
.lab-controls{display:grid;grid-template-columns:1fr;gap:14px;padding:16px;align-content:start}
@media(min-width:380px){.lab-controls{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.lab-controls>.lab-score,.lab-controls>.lab-breakdown,.lab-controls>.lab-looks,.lab-controls>.lab-saved,.lab-controls>.lab-tools,.lab-controls>.lab-mode-toggle,.lab-controls>.lab-note,.lab-controls>.region-legend,.lab-controls>.region-inspection{grid-column:1/-1}
@media(min-width:860px){
  .lab-header{padding:26px 28px 22px}
  .lab-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .lab-preview{border-bottom:0;border-right:1.5px solid var(--ink);align-self:stretch}
  .lab-preview>*{position:sticky;top:76px}
  .lab-controls{padding:24px 28px}
}

.color-control{border:1.5px solid var(--ink);border-radius:var(--radius);padding:12px;margin:0;min-width:0;background:var(--bg)}
.color-control legend,.color-control>h3,.color-control>h4,.color-control>label{font-size:14px;font-weight:800;padding:0 4px;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.color-control input[type=color]{width:100%;min-height:var(--tap);border:1.5px solid var(--ink);border-radius:var(--radius);padding:2px;background:var(--paper)}
.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin:0;padding:0;list-style:none}
.color-chip{position:relative;min-width:var(--tap);min-height:var(--tap);width:100%;aspect-ratio:1;border:1.5px solid rgba(21,21,21,.25);border-radius:var(--radius);padding:0;cursor:pointer;transition:transform .12s}
.color-chip:hover{transform:translateY(-1px)}
.color-chip[aria-pressed=true],.color-chip[aria-checked=true],.color-chip[aria-selected=true],.color-chip.is-active,.color-chip.active{border:2px solid var(--ink);box-shadow:0 0 0 3px var(--lime),0 0 0 4.5px var(--ink)}
.color-chip[aria-pressed=true]:after,.color-chip[aria-checked=true]:after,.color-chip.is-active:after,.color-chip.active:after{content:"✓";position:absolute;right:2px;bottom:1px;font-size:11px;font-weight:900;color:var(--ink);background:var(--lime);border-radius:2px;line-height:1;padding:2px 3px}
.color-chip:disabled{opacity:.35;cursor:not-allowed}

.lab-mode-toggle{display:flex;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.lab-mode-toggle button,.lab-mode-toggle label{flex:1 1 0;min-height:var(--tap);border:0;background:transparent;font-size:14px;font-weight:700;color:var(--muted);padding:8px 6px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.lab-mode-toggle>*+*{border-left:1.5px solid var(--ink)}
.lab-mode-toggle [aria-pressed=true],.lab-mode-toggle [aria-selected=true],.lab-mode-toggle .is-active,.lab-mode-toggle input:checked+span{background:var(--ink);color:var(--lime)}
.lab-mode-toggle input[type=radio]{position:absolute;opacity:0;pointer-events:none}

.lab-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;border-top:1.5px solid var(--ink);padding-top:14px}
.lab-score strong,.lab-score .score-value{font-size:clamp(48px,14vw,72px);font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.lab-score small,.lab-score p{font-size:13px;color:var(--muted);margin:0;flex-basis:100%}
.lab-breakdown{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lab-breakdown>*{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13px;align-items:center}
.lab-breakdown progress,.lab-breakdown meter,.lab-breakdown .bar{grid-column:1/-1;width:100%;height:8px;appearance:none;border:0;background:#e2dfd6;border-radius:99px;overflow:hidden;accent-color:var(--ink)}
.lab-breakdown progress::-webkit-progress-bar{background:#e2dfd6}
.lab-breakdown progress::-webkit-progress-value{background:var(--ink)}
.lab-breakdown progress::-moz-progress-bar{background:var(--ink)}

.lab-looks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,46%);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.lab-looks>*{scroll-snap-align:start;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:10px;font-size:13px;min-width:0}
.lab-looks button{min-height:var(--tap)}
@media(min-width:860px){.lab-looks{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible}}

.lab-saved{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.lab-saved>*{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-size:12px;padding:6px;min-width:0}
.lab-saved:empty:before{content:"아직 저장한 조합이 없어요.";grid-column:1/-1;font-size:13px;color:var(--muted)}
.lab-tools{display:flex;flex-wrap:wrap;gap:8px}
.lab-tools button,.lab-tools a{flex:1 1 130px;min-height:var(--tap);font-size:14px;font-weight:700;border-radius:var(--radius);border:0;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.lab-tools .btn.primary,.lab-tools .primary{background:var(--lime)}
.lab-tools .danger,.lab-tools [data-action=reset]{background:var(--ink);color:var(--bg)}
.lab-note{font-size:13px;line-height:1.65;color:var(--muted);border-left:3px solid var(--lime);padding:2px 0 2px 10px;margin:0}

.region-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-size:13px}
.region-legend>*{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink);border-radius:99px;padding:4px 10px;background:var(--paper)}
.region-legend i,.region-legend .dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--ink);display:inline-block;flex-shrink:0}
.region-inspection{background:var(--paper);border:1.5px dashed var(--ink);border-radius:var(--radius);padding:12px;font-size:13px}
.lab-preview .region-legend,.lab-preview .region-inspection{position:absolute;left:10px;right:10px;bottom:10px;top:auto}
.lab-preview .region-legend>*{background:rgba(251,250,246,.94)}

/* ---------- 하단 섹션 ---------- */
.guide-strip{border-bottom:1.5px solid var(--ink);gap:20px;padding:36px 0}
.guide-strip span{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:1.4px}
.guide-strip h3{font-size:19px;font-weight:900;letter-spacing:-.4px}
.guide-strip p{font-size:14px;color:var(--muted)}
.guide-strip>div+div{border-color:var(--ink)}
.sources h3{font-size:16px;font-weight:800}
.sources h3 span{color:var(--ink)}
.sources p{font-size:13px;color:var(--muted)}
.sources a{font-size:13px;color:var(--ink);min-height:var(--tap);display:inline-flex;align-items:center}
.sources small{font-size:12px;color:var(--muted)}
footer.wrap{border-top:1.5px solid var(--ink);flex-wrap:wrap;gap:8px 16px;padding-top:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
footer p,footer>span{font-size:12px;color:var(--muted)}
footer p span{color:var(--ink)}
.privacy-link{display:inline-flex;align-items:center;min-height:var(--tap);font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px}

dialog{border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--paper)}
dialog::backdrop{background:rgba(21,21,21,.6)}
dialog h2{font-size:28px;font-weight:900;letter-spacing:-.04em}
dialog p:not(.eyebrow){font-size:14px;color:var(--muted)}
.dialog-close{width:var(--tap);height:var(--tap);color:var(--ink)}
.toast{background:var(--ink);color:var(--bg);border-radius:var(--radius);font-size:14px;box-shadow:inset 0 -3px 0 var(--lime)}

@media(max-width:600px){
  .guide-strip{grid-template-columns:1fr}
  .guide-strip>div+div{border-left:0;border-top:1px solid var(--ink);padding-left:0}
  .sources>div{flex-direction:column;gap:0}
  .mini-looks{grid-template-columns:1fr 1fr}
  dialog{padding:24px 18px}
}
@media(max-width:360px){
  .hero h1{font-size:36px}
  .mini-looks{grid-template-columns:1fr}
  .tabs button{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.btn:hover,.color-chip:hover{transform:none}}