/* MBTI 아로마
   팔레트는 오행 설문 사이트 · 아로마 컬러 리딩과 같은 베이지 계열을 씁니다. */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#1b1b1b;
  --sub:#6b6b6b;
  --faint:#9a938a;
  --line:#e6e2dc;
  --bg:#faf8f5;
  --panel:#fff;
  --accent:#AD5218;
  --soft:#f5f1ea;
  --c:#AD5218;          /* 유형 색. 결과 화면에서 갈아 끼웁니다 */
}

html{-webkit-text-size-adjust:100%}

body{
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

.wrap{
  max-width:760px;margin:0 auto;
  padding:28px 18px calc(64px + env(safe-area-inset-bottom));
}

/* ── 헤더 ───────────────────────────────── */
.head{padding-bottom:20px;border-bottom:1px solid var(--line)}
.kicker{font-size:11.5px;letter-spacing:.14em;color:var(--accent);font-weight:600}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.lead{color:var(--sub);font-size:14px;margin-top:10px}
.lead b{color:var(--ink);font-weight:700}

/* ── 진행 바 ─────────────────────────────── */
.stepbar{
  position:sticky;top:0;z-index:20;
  background:rgba(250,248,245,.94);backdrop-filter:blur(8px);
  margin:0 -18px;padding:12px 18px 10px;
  border-bottom:1px solid var(--line);
}
.track{height:5px;background:#eae5de;border-radius:3px;overflow:hidden}
.fill{height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .25s}
.prompt{font-size:14.5px;font-weight:600;margin-top:11px;min-height:1.65em}
.prompt .c{color:var(--accent);font-variant-numeric:tabular-nums}
.prompt .dim{font-weight:400}

/* ── 버튼 ───────────────────────────────── */
.actions{margin-top:26px;display:flex;gap:9px;flex-wrap:wrap}
button{
  font-family:inherit;font-size:15px;font-weight:600;
  padding:14px 24px;border-radius:11px;border:none;cursor:pointer;transition:.15s;
}
.primary{background:var(--ink);color:#fff;flex:1;min-width:140px}
.primary:hover:not(:disabled){background:#000}
.primary:disabled{background:#d5cec4;color:#fff;cursor:default}
.ghost{background:transparent;color:var(--sub);border:1px solid var(--line)}
.ghost:hover{background:#f0ece6}
.ghost.hide{display:none}

.note{
  font-size:12px;color:var(--faint);line-height:1.7;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
}
.hint{font-size:12.5px;color:var(--faint);line-height:1.75;margin-top:12px}
.hint b{color:var(--sub);font-weight:700}
.dim{color:var(--faint);font-weight:400}
.hide{display:none}

/* ── 시작 화면 ──────────────────────────── */
.askbox{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:30px 24px;margin-top:22px;text-align:center;
}
.askbox h2{font-size:19px;font-weight:700}
.asklead{font-size:13.5px;color:var(--sub);line-height:1.75;margin:10px 0 20px}
.askbox .primary{width:100%;margin-bottom:8px}
.askbox .ghost{width:100%}

.axisguide{display:grid;gap:10px;margin:0 0 22px;text-align:left}
@media (min-width:560px){ .axisguide{grid-template-columns:1fr 1fr} }
.ag{
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13px;color:var(--sub);
}
.ag b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:2px}
.ag i{font-style:normal;color:var(--accent);font-weight:700;letter-spacing:.04em}

/* ── 문항 ───────────────────────────────── */
.qbox{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:30px 22px 24px;margin-top:22px;
}
.qno{font-size:12px;letter-spacing:.1em;color:var(--accent);font-weight:700}
.qtext{font-size:19px;font-weight:700;line-height:1.55;margin-top:9px;letter-spacing:-.01em}
.opts{display:grid;gap:10px;margin-top:22px}
.opt{
  display:block;width:100%;text-align:left;
  background:var(--bg);border:1px solid var(--line);border-radius:13px;
  padding:17px 18px;font-size:15.5px;font-weight:500;line-height:1.55;
  color:var(--ink);cursor:pointer;font-family:inherit;
  transition:transform .12s, border-color .16s, box-shadow .16s, background .16s;
}
.opt:active{transform:scale(.985)}
@media (hover:hover){
  .opt:hover{background:#fff;border-color:#d8d1c6;box-shadow:0 3px 14px rgba(27,27,27,.06)}
}
.opt.on{background:#fff;border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}

/* ── 결과 ───────────────────────────────── */
.typecard{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:28px 22px;margin-top:22px;position:relative;overflow:hidden;text-align:center;
}
.typecard::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.tcode{
  display:inline-block;font-size:40px;font-weight:800;letter-spacing:.06em;
  color:var(--c);line-height:1.1;
}
.tname{font-size:21px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.tname .tnick{color:var(--sub);font-weight:600}
.ttag{font-size:14.5px;color:var(--sub);margin-top:9px}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px}
.chip{
  background:var(--soft);border:1px solid #e8e2d8;border-radius:20px;
  padding:6px 13px;font-size:13.5px;
}
.chip.lab{background:transparent;border-color:var(--c);color:var(--c);font-weight:600;font-size:12.5px}

/* 네 축 막대 */
.bars{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;margin-top:14px;
}
.bars h3{font-size:15px;font-weight:700;margin-bottom:14px}
.bar{margin-bottom:14px}
.bar:last-child{margin-bottom:0}
.blabel{display:flex;font-size:13px;color:var(--sub);margin-bottom:6px}
.blabel .lft,.blabel .rgt{flex:1}
.blabel .rgt{text-align:right}
.blabel b{color:var(--ink);font-weight:700}
.btrack{height:9px;background:#ece7e0;border-radius:5px;overflow:hidden;display:flex}
.btrack i{display:block;height:100%;background:var(--c)}
.bnote{font-size:12px;color:var(--faint);margin-top:5px}
.bnote b{color:var(--accent);font-weight:600}
.bdesc{font-size:13px;color:var(--sub);line-height:1.7;margin-top:3px}

.sec{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;margin-top:14px;
}
.sec h3{font-size:11.5px;letter-spacing:.08em;color:var(--accent);font-weight:700;margin-bottom:10px}
.sec p{font-size:14.5px;color:#3c3a37;line-height:1.85}
.sec .line{border-left:2.5px solid var(--c);padding:3px 0 3px 14px}
.seclead{font-size:13.5px;color:var(--sub);line-height:1.75;margin-bottom:14px}
.empty{font-size:14px;color:var(--sub);background:var(--soft);border-radius:10px;padding:14px 16px}

/* 오일 카드 */
.oilcards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px}
@media (min-width:620px){ .oilcards{grid-template-columns:repeat(3,1fr)} }
.oilcard{
  border:1.5px solid var(--c);border-radius:13px;overflow:hidden;background:#fff;
}
.oilcard .thumb{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
/* 카드 그림이 없는 오일 — 빈칸 대신 이름을 놓습니다 */
.oilcard .thumb.noimg{
  display:flex;align-items:center;justify-content:center;
  background:#fbf9f5;border-bottom:1px solid var(--line);
}
.oilcard .thumb.noimg span{
  font-size:22px;font-weight:700;color:var(--c);letter-spacing:-.01em;
}
.oilcard .oname{
  padding:13px 14px 0;font-size:17px;font-weight:700;
  display:flex;align-items:baseline;gap:8px;
}
.oilcard .odrop{
  margin-left:auto;font-size:12px;font-weight:700;color:#fff;background:var(--c);
  border-radius:20px;padding:3px 10px;white-space:nowrap;
}
.oilcard .blendtag{color:var(--faint)}
/* 왜 이 유형에 이 오일인지 — 결과에서 가장 먼저 읽히게 합니다 */
.oilcard .owhy{
  padding:8px 14px 0;font-size:14px;color:#3c3a37;line-height:1.75;
}
.oilcard .odesc{
  margin:12px 14px 14px;padding:11px 13px;
  background:var(--soft);border-radius:9px;
  font-size:12.5px;color:var(--sub);line-height:1.7;
}
.oilcard .odesc b{
  display:block;font-size:10.5px;letter-spacing:.07em;
  color:var(--c);font-weight:700;margin-bottom:4px;
}

/* 롤온 */
.rollon{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;margin-top:14px;
}
.rollon h3{font-size:17px;font-weight:700}
.rlead{font-size:14px;color:var(--sub);line-height:1.75;margin:9px 0 16px}
.recipe{display:flex;flex-direction:column;gap:8px}
.rrow{
  display:flex;align-items:center;gap:10px;
  background:var(--soft);border-radius:10px;padding:11px 14px;font-size:14.5px;
}
.rrow .rn{flex:1;font-weight:600;display:flex;align-items:center;gap:8px}
.rrow .btag{
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--c);border:1px solid var(--c);border-radius:20px;padding:1px 8px;
}
.rrow .rd{color:var(--sub);font-size:13.5px}
.tie{
  font-size:13px;color:var(--sub);line-height:1.75;
  margin-top:12px;padding:11px 14px;background:#fbf8f3;border-radius:9px;
}
.tie.warn{color:var(--accent);background:rgba(173,82,24,.07)}

/* ── 결과 카드 저장 (오행 · 컬러 앱과 같은 구성) ── */
.sharecard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px 20px;margin-top:14px;text-align:center;
}
.sharecard h3{font-size:16px;font-weight:700}
.cardlead{font-size:13.5px;color:var(--sub);margin:7px 0 18px}
.share-preview{
  max-width:300px;margin:0 auto 18px;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 26px rgba(27,27,27,.14);
}
.share-preview img,.share-preview canvas{width:100%;height:auto;display:block}
.share-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.share-actions button{padding:13px 22px;font-size:14px;flex:none}
.share-msg{
  font-size:13px;line-height:1.75;color:var(--accent);
  background:rgba(173,82,24,.07);border-radius:9px;
  padding:12px 15px;margin:14px 0 0;word-break:break-all;
}
.share-msg[hidden]{display:none}
.share-tip{font-size:12px;line-height:1.75;color:var(--faint);margin:14px 0 0}
.share-tip b{color:var(--sub)}

/* ── 토스트 ─────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:#1b1b1b;color:#fff;font-size:13.5px;
  padding:12px 20px;border-radius:24px;
  opacity:0;pointer-events:none;transition:.25s;z-index:99;
  max-width:88vw;text-align:center;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 인쇄 · PDF 저장 ─────────────────────── */
@page{ margin:14mm 12mm; }

@media print{
  html,body{background:#fff}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wrap{max-width:100%;padding:0}
  .stepbar,.actions,#toast,.sharecard{display:none!important}
  .head{border-bottom:1px solid #ddd}
  .typecard,.bars,.sec,.rollon{border:1px solid #ddd;box-shadow:none}
  .typecard,.bars,.sec,.rollon,.oilcard{break-inside:avoid;page-break-inside:avoid}
  .oilcards{grid-template-columns:repeat(3,1fr)}
  .oilcard .thumb{max-height:46mm}
  .note{color:#555}
}