/* 아로마 컬러 리딩 — 컬러 카드 화면
   팔레트는 오행 설문 사이트와 같은 베이지 계열을 씁니다. */

*{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;
}

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);
}

/* ── 확인 화면 ───────────────────────────── */
.rescard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;margin-bottom:14px;position:relative;overflow:hidden;
}
.rescard::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.rhead{display:flex;align-items:center;gap:11px;margin-bottom:3px}
.rdot{
  width:22px;height:22px;border-radius:50%;flex:none;background:var(--c);
  box-shadow:0 0 0 1px rgba(0,0,0,.14) inset;
}
.rhead h3{font-size:18px;font-weight:700}
.rhead .rank{
  margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:var(--ink);
  padding:3px 10px;border-radius:20px;white-space:nowrap;
}
.rhead .rank.rep{background:var(--accent)}
.rck{font-size:12.5px;color:var(--sub);margin-bottom:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.chip{
  background:var(--soft);border:1px solid #e8e2d8;border-radius:20px;
  padding:5px 12px;font-size:13px;
}
.line{
  border-left:2.5px solid var(--c);padding:3px 0 3px 13px;
  font-size:14.5px;color:#3c3a37;
}
.sub{font-size:12px;letter-spacing:.07em;color:var(--accent);font-weight:700;margin-bottom:7px}

/* ── 시작 화면 ──────────────────────────── */
.courses{display:grid;gap:12px;margin-top:22px}
@media (min-width:640px){ .courses{grid-template-columns:1fr 1fr} }
.course{
  display:block;text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px 22px;cursor:pointer;font-family:inherit;color:inherit;
  transition:transform .14s, box-shadow .18s, border-color .18s;
}
.course:active{transform:scale(.99)}
@media (hover:hover){
  .course:hover{border-color:#d8d1c6;box-shadow:0 4px 18px rgba(27,27,27,.07)}
}
.cttl{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em}
.cdesc{display:block;font-size:14px;color:var(--sub);line-height:1.7;margin-top:9px}
.cmeta{
  display:inline-block;margin-top:14px;font-size:11.5px;font-weight:600;
  color:var(--accent);background:var(--soft);border-radius:20px;padding:4px 12px;
}

/* ── 생년월일 ───────────────────────────── */
.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.7;margin:10px 0 20px}
/* 년 · 월 · 일 세 칸 (오행 앱과 같은 방식) */
.num-row{display:flex;gap:8px;margin-bottom:2px}
.num-cell{
  flex:1;display:flex;align-items:center;gap:6px;min-width:0;
  border:1px solid var(--line);border-radius:11px;
  background:var(--bg);padding:0 13px;
}
.num-cell--y{flex:1.5}
.num-cell:focus-within{border-color:var(--accent)}
.num-cell input{
  width:100%;min-width:0;border:0;background:none;
  font-family:inherit;font-size:17px;   /* 16px 미만이면 아이폰이 화면을 확대합니다 */
  padding:14px 0;color:var(--ink);text-align:center;
  font-variant-numeric:tabular-nums;
}
.num-cell input:focus{outline:none}
.num-cell input::placeholder{color:var(--faint);opacity:.5}
.num-cell i{flex:none;font-style:normal;font-size:13.5px;color:var(--faint)}

.calnotice{font-size:12.5px;color:var(--sub);line-height:1.7;margin:0 0 16px}
.calnotice b{color:var(--ink)}
.calnotice a{color:var(--accent)}
.field-hint{font-size:12.5px;color:var(--faint);line-height:1.7;margin:9px 0 16px;text-align:left}
.field-hint.warn{color:var(--accent)}
.askbox .primary{width:100%;margin-bottom:8px}
.askbox .ghost{width:100%}

/* ── 컬러 카드 ──────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
@media (min-width:860px){ .grid{grid-template-columns:repeat(5,1fr);gap:14px} }
.card{
  position:relative;display:block;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:0;overflow:hidden;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit;
  transition:transform .14s, box-shadow .18s, border-color .18s;
}
.card:active{transform:scale(.975)}
@media (hover:hover){
  .card:hover{border-color:#d8d1c6;box-shadow:0 3px 14px rgba(27,27,27,.07)}
}
.card .swatch{
  display:block;height:78px;background:var(--c);
  box-shadow:0 0 0 1px rgba(0,0,0,.09) inset;
}
.card .meta{display:block;padding:10px 12px 13px}
.card .nm{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.card .en{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;margin-top:1px}
.card.sel{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.card.sel-drop{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}
.card.locked{opacity:.42;cursor:default}
.card.locked:active{transform:none}
.card .swatch{position:relative}
.badge{
  position:absolute;top:8px;right:8px;
  padding:3px 10px;border-radius:14px;
  background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;white-space:nowrap;
  box-shadow:0 1px 5px rgba(0,0,0,.25);
}
.badge.rep{background:var(--accent)}
.badge.lock{background:#8a827a}

/* 밀어내는 색 — 처방 없이 짚기만 합니다 */
.dropbox{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px 20px;margin-top:18px;
}
.dropbox h3{font-size:17px;font-weight:700}
.droprow{
  border-left:3px solid var(--c);padding:2px 0 2px 14px;margin-top:14px;
}
.dhead{display:flex;align-items:center;gap:9px;font-size:15px}
.dhead .rdot{width:16px;height:16px}
.dtag{font-size:14px;color:var(--sub);line-height:1.7;margin-top:5px}

/* ── 롤온 ───────────────────────────────── */
.rollon{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px 20px;margin-top:18px;
}
.rollon h3{font-size:17px;font-weight:700}
.rlead{font-size:14px;color:var(--sub);line-height:1.75;margin:9px 0 18px}
.rsec{margin-bottom:16px}
.rsec h4{font-size:11.5px;letter-spacing:.08em;color:var(--accent);font-weight:700;margin-bottom:9px}
.rex{font-size:13px;color:var(--faint);line-height:1.75;margin-top:10px}
.tie{
  font-size:13px;color:var(--sub);line-height:1.75;
  margin-top:14px;padding:11px 14px;
  background:var(--soft);border-radius:9px;
}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  background:var(--soft);border:1px solid #e8e2d8;border-radius:20px;
  padding:6px 13px;font-size:13.5px;
}

/* ── 문항 ───────────────────────────────── */
.prompt2{font-size:14px;color:var(--sub);margin:18px 0 10px}
.qno{
  display:inline-block;width:26px;flex:none;
  color:var(--faint);font-style:normal;font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
ul.q{
  list-style:none;margin-top:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:2px 16px;
}
li.q{border-bottom:1px solid var(--line)}
li.q:last-child{border-bottom:none}
label span{display:flex;gap:4px}
label{display:flex;gap:12px;align-items:flex-start;padding:14px 2px;cursor:pointer;font-size:14.5px}
@media (hover:hover){ label:hover{background:#faf8f4} }
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;min-width:19px;margin-top:3px;
  border:1.5px solid #c9c2b8;border-radius:5px;background:#fff;
  position:relative;cursor:pointer;transition:.15s;
}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}

/* ── 3단계 · 결과 ───────────────────────── */
.summary{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;margin-bottom:18px;
}
.summary h2{font-size:15px;font-weight:700;margin-bottom:11px}
.rowline{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px}
.dot{width:15px;height:15px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
.rowline .nm{flex:1}
.mini{height:6px;background:#ece7e0;border-radius:3px;width:84px;overflow:hidden;flex:none}
.mini i{display:block;height:100%;border-radius:3px}
.num{font-size:12px;color:var(--sub);width:30px;text-align:right;font-variant-numeric:tabular-nums;flex:none}

.rescard.big{padding:22px}
.rank.k-care{background:var(--ink)}
.rank.k-assist{background:var(--accent)}
.rank.k-watch{background:#8a827a}
.rank.k-talk{background:#6b7f8c}

/* 타고난 컬러 — 그 컬러가 어떤 기운인지 */
.innate{border-left:2.5px solid var(--c);padding:2px 0 2px 14px;margin:15px 0 18px}
.ilead{font-size:15.5px;font-weight:700}
.iess{font-size:14.5px;color:#3c3a37;line-height:1.85;margin-top:9px}

.say{border-left:2.5px solid var(--c);padding:2px 0 2px 14px;margin:15px 0 18px}
.say p{font-size:14.5px;margin:5px 0}
.say p b{
  font-weight:700;color:var(--accent);font-size:11.5px;
  letter-spacing:.06em;margin-right:7px;
}
.sec{margin-top:17px}
.sec h4{font-size:11.5px;letter-spacing:.08em;color:var(--accent);font-weight:700;margin-bottom:9px}

.oils{display:flex;flex-wrap:wrap;gap:7px}
.oil{
  background:var(--soft);border:1px solid #e8e2d8;border-radius:20px;
  padding:6px 13px;font-size:13.5px;
}

/* 대표 오일 — 교재 오일 카드 그림을 그대로 */
/* 카드 안에 교재 문구가 들어 있어, 좁은 화면에서는 한 줄에 한 장씩 놓아야 읽힙니다. */
.oilcards{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){ .oilcards{grid-template-columns:repeat(2,1fr)} }
.oilcard{
  border:1.5px solid var(--c);border-radius:12px;overflow:hidden;background:#fff;
}
.oilcard .thumb{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.oilcard .oname{
  padding:11px 12px 0;font-size:15px;font-weight:700;text-align:center;
  border-top:1px solid var(--line);
}
.oilcard .thumb + .oname{padding-top:11px}
.oilcard > .oname:first-child{border-top:none}
.oilcard .odesc{
  padding:7px 14px 14px;font-size:13.5px;color:var(--sub);line-height:1.7;
}
.more{margin-top:10px}
.link{
  background:none;border:none;color:#8a827a;font-size:12.5px;padding:2px 0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-weight:500;
}
.link:hover{color:var(--ink)}
.restwrap{display:none;margin-top:10px}
.more.open .restwrap{display:flex}
.more.open .link{color:var(--ink)}

.stonerow{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed #ece7e0}
.stonerow:last-child{border-bottom:none}
.stonerow .thumb{
  width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;
  background:#fff;border:1px solid var(--line);
}
.sdot{
  width:11px;height:11px;border-radius:50%;margin-top:7px;flex:none;background:var(--c);
  box-shadow:0 0 0 1px rgba(0,0,0,.14) inset;
}
.sname{font-size:14.5px;font-weight:700}
.stag{font-size:13px;color:var(--sub);margin-top:2px;line-height:1.55}

.body{font-size:14px;color:#3c3a37;background:#f7f4ef;border-radius:9px;padding:13px 15px}
.body b{color:var(--ink)}
.body.soft{background:#fbf8f3}

.assist{
  margin-top:17px;padding:16px;border-radius:12px;
  background:#fbf8f3;border:1px solid var(--line);border-left:3px solid var(--a);
}
.asub{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.rdot.alt{width:16px;height:16px;background:var(--a)}
.anote{font-size:13.5px;color:var(--sub);margin:9px 0 12px;line-height:1.7}
.assist .body{margin-top:11px}

.ok{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:28px 22px;text-align:center;margin-bottom:16px;
}
.ok h2{font-size:17px;margin-bottom:9px}
.ok p{color:var(--sub);font-size:14.5px}

.dim{color:var(--faint);font-weight:400}

.hint{font-size:12.5px;color:var(--faint);line-height:1.75;margin-top:12px}
.hint b{color:var(--sub);font-weight:700}

/* ── 결과 카드 저장 (오행 앱과 같은 구성) ── */
.sharecard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px 20px;margin-top:22px;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 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)}

/* ── 입장 암호 ──────────────────────────── */
body.locked{overflow:hidden}
body.locked .wrap{display:none}

#gate{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.gatebox{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:36px 28px 30px;max-width:380px;width:100%;text-align:center;
  box-shadow:0 8px 30px rgba(27,27,27,.06);
}
.gatebox h1{font-size:23px;margin-top:8px}
.gatebox .lead{margin:12px 0 22px}
.gatebox form{display:flex;flex-direction:column;gap:10px}
.gatebox input{
  font-family:inherit;font-size:16px;   /* 16px 미만이면 아이폰이 화면을 확대합니다 */
  padding:14px 16px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);text-align:center;letter-spacing:.06em;
}
.gatebox input:focus{outline:none;border-color:var(--accent)}
.gatebox .primary{width:100%}
.gatemsg{font-size:13px;color:var(--accent);min-height:1.5em;margin-top:12px}

.shake{animation:shake .32s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* ── 토스트 ─────────────────────────────── */
#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)}

.hide{display:none}

/* ── 인쇄 · 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,.link{display:none!important}

  /* 접어 둔 오일 목록도 PDF에는 다 나오게 합니다 */
  .restwrap{display:flex!important;margin-top:6px}

  .head{border-bottom:1px solid #ddd}
  .summary,.rescard,.ok{border:1px solid #ddd;box-shadow:none}
  .summary,.ok{break-inside:avoid;page-break-inside:avoid}

  /* 결과 카드는 한 장보다 큽니다. 통째로 넘기려 하면 넘치는 아래쪽(원석 · 적용 부위)이
     잘려 나가므로, 카드는 페이지를 넘어 이어지게 두고 작은 덩어리만 안 쪼갭니다. */
  .rescard{break-inside:auto;page-break-inside:auto}
  .say,.stonerow,.sec,.assist,.oilcard{break-inside:avoid;page-break-inside:avoid}

  .oilcards{grid-template-columns:repeat(2,1fr)}
  .oilcard .thumb{max-height:52mm}
  .note{color:#555}
}

/* ── 관리자 모드 ────────────────────────── */
.adminbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.adminbar .who{font-size:14px;font-weight:700}
.adminbar .link{margin-left:auto}

.adminbox{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:28px 24px;margin-bottom:16px;max-width:420px;
}
.adminbox.wide{max-width:none}
.adminbox h2{font-size:19px;font-weight:700}
.adminbox .kicker{margin-bottom:8px}
.adminbox form{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.adminbox input[type=text],
.adminbox input[type=password],
.adminbox input[type=number],
.adminbox select{
  font-family:inherit;font-size:16px;   /* 16px 미만이면 아이폰이 화면을 확대합니다 */
  width:100%;padding:13px 15px;
  border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--ink);
}
.adminbox input:focus,.adminbox select:focus{outline:none;border-color:var(--accent)}
.adminbox .primary,.adminbox .ghost{width:100%}
.adminbox .actions{margin-top:22px}
.adminbox .actions button{flex:1}

.alabel{display:block;font-size:13px;font-weight:700;color:var(--sub);margin:20px 0 8px}
.arow{display:flex;gap:8px}
.arow select{flex:1}

.atabs{display:flex;gap:8px;margin-top:22px}
.atab{
  flex:1;font-size:14px;font-weight:600;padding:11px 8px;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--sub);cursor:pointer;
}
.atab.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.agrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:640px){ .agrid{grid-template-columns:repeat(5,1fr)} }
.acell{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:11px;padding:9px 11px;background:var(--bg);
}
.acell b{font-size:12.5px;font-weight:700;flex:1;white-space:nowrap}
.acell input{width:52px;padding:7px 8px;text-align:center}
.adot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}

.arec{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 0;border-bottom:1px dashed #ece7e0;font-size:14px;
}
.arec:last-child{border-bottom:none}
.arecbtn{margin-left:auto;display:flex;gap:12px;flex:none}

/* 결과지에 적히는 내담자 이름 */
.cname{font-size:15px;font-weight:700;color:var(--accent);margin-top:6px}

/* ── 선택 컬러 팔레트 · 추천 아로마·원석 ────────────────────
   CPA 결과지의 마지막 두 쪽을 본떴습니다. 컬러를 먼저 띠로 보여 주고,
   그 컬러가 부르는 향과 돌을 표처럼 나란히 놓습니다. */

.pal{margin-bottom:26px}
.palrow{margin-bottom:14px}
.palcap{
  font-size:11.5px;letter-spacing:.08em;font-weight:700;
  color:var(--accent);margin-bottom:9px;
}
.palrow.drop .palcap{color:var(--faint)}
.palchips{display:flex;gap:10px;flex-wrap:wrap}
.palchip{
  flex:1 1 0;min-width:96px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:12px 10px 11px;text-align:center;
}
.palsw{
  /* 흰색도 보여야 하므로 색을 흐리게 하지 않고 테두리로 잡아 줍니다. */
  display:block;width:100%;height:44px;border-radius:8px;background:var(--c);
  box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;margin-bottom:9px;
}
.palname{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.palen{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--faint);margin-top:2px}
/* 밀어내는 색은 색을 죽이지 않고 칸 테두리로 구분합니다 */
.palrow.drop .palchip{border-style:dashed;background:transparent}
.palrow.drop .palsw{height:34px}
.palrow.drop .palname{color:var(--sub);font-weight:600}

.rx{margin-bottom:30px}
.rxgrid{display:flex;gap:12px;flex-wrap:wrap}
.rxcol{
  flex:1 1 240px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:15px 15px 13px;border-top:3px solid var(--c);
}
.rxhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.rxhead b{font-size:16px}
.rxk{font-size:11.5px;color:var(--faint);flex-basis:100%}
.rxsec{margin-bottom:12px}
.rxsec:last-child{margin-bottom:0}
.rxcap{
  font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--accent);
  margin-bottom:8px;
}
.rxitems{display:flex;gap:9px;flex-wrap:wrap}
.rxitem{
  display:flex;align-items:center;gap:7px;background:var(--soft);
  border-radius:999px;padding:5px 12px 5px 5px;
}
.rxitem img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.rxdot{width:22px;height:22px;border-radius:50%;background:var(--c);opacity:.5;flex:none}
.rxn{font-size:13.5px;font-weight:600;color:var(--ink)}

@media print{
  .palchip,.rxcol{break-inside:avoid}
}

/* ── 새 컬러 문구 (2026-08-29 리라이팅본) ────────────────── */

.rsub{font-size:13.5px;color:var(--faint);margin:6px 0 14px;line-height:1.7}
.innate p{margin:0 0 10px;font-size:14.5px;line-height:1.95;color:var(--ink)}
.innate p:last-child{margin-bottom:0}

/* 속마음 대사 */
.say{
  margin:0 0 11px;padding:10px 14px;border-left:3px solid var(--c);
  background:var(--soft);border-radius:0 10px 10px 0;
  font-size:15px;font-weight:600;line-height:1.7;color:var(--ink);
}
.say::before{content:"\201C"}
.say::after{content:"\201D"}

.sec .body p{margin:0 0 8px;font-size:14px;line-height:1.9;color:var(--sub)}
.sec .body p:last-child{margin-bottom:0}
.sec.shd h4{color:var(--faint)}

.asks{margin:0;padding:0;list-style:none}
.asks li{
  position:relative;padding:0 0 0 18px;margin:0 0 8px;
  font-size:14px;line-height:1.85;color:var(--sub);
}
.asks li:last-child{margin-bottom:0}
.asks li::before{
  content:"";position:absolute;left:0;top:.78em;
  width:6px;height:6px;border-radius:50%;background:var(--c);opacity:.5;
}

.droprow .say{font-size:14.5px}
.droprow .body p{margin:0 0 7px;font-size:13.5px;line-height:1.85;color:var(--sub)}

/* ── 원석 키워드 · 맺음 칸 ──────────────────────────── */

.skey{font-size:13px;color:var(--sub);letter-spacing:.01em}

.closing{margin-top:30px}
.clbox{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 15px;margin-bottom:12px;
}
.clbox h4{
  font-size:11.5px;letter-spacing:.08em;color:var(--accent);
  font-weight:700;margin-bottom:11px;
}
.clbox .chips{display:flex;gap:8px;flex-wrap:wrap}
.clbox .chip{
  display:inline-flex;align-items:baseline;gap:6px;
  background:var(--soft);border-radius:999px;padding:6px 14px;
  font-size:14px;font-weight:600;color:var(--ink);
  border-left:3px solid var(--c);
}
.clbox .chip i{font-style:normal;font-size:12px;color:var(--sub)}

.stonekeys{list-style:none;margin:0;padding:0}
.stonekeys li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px dashed var(--line);
}
.stonekeys li:last-child{border-bottom:0;padding-bottom:0}
.stonekeys b{font-size:14.5px;font-weight:700}
.stonekeys span{font-size:13px;color:var(--sub);text-align:right}

.classbox{
  background:var(--soft);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;text-align:center;margin-top:16px;
}
.ckicker{
  font-size:10.5px;letter-spacing:.16em;color:var(--accent);
  font-weight:700;margin-bottom:8px;
}
.classbox h3{font-size:17px;margin-bottom:10px}
.classbox p{font-size:14px;line-height:1.85;color:var(--sub);margin:0}
.classbox .cask{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink)}

@media print{ .closing{break-inside:auto} .classbox{break-inside:avoid} }