/* 궁합 영수증 — 폰 전용. 하얀 영수증 한 장이 진한 아이보리 바탕 위에 놓인 구성(2026-11-04). 단일 테마(밝은 종이)로 고정. */
:root {
  color-scheme: light;
  --tray: #e9dcbc;        /* 진한 아이보리 바탕 */
  --tray-deep: #dccb9f;
  --tray-ink: #4a3f2a;    /* 바탕 위 글씨 */
  --paper: #ffffff;       /* 영수증: 하얀색 */
  --male: #2f6fd6;  --male-soft: #eaf2ff;
  --female: #e0548f; --female-soft: #ffeef5;
  --paper-edge: #ece8dc;
  --ink: #1f1f1f;
  --ink-soft: #6b675e;
  --stamp: #c8392f;
  --good: #1f6b4a;
  --bad: #b23a2c;
  --mono: "Nanum Gothic Coding", "D2Coding", ui-monospace, "Malgun Gothic", monospace;
  --display: "Black Han Sans", "Pretendard", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--tray);
  background-image: radial-gradient(circle at 50% -20%, #f4ead2 0, var(--tray) 55%, var(--tray-deep) 100%);
  background-attachment: fixed;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 420px; margin: 0 auto; padding-block: 20px 40px; }
.brand { color: var(--tray-ink); text-align: center; margin-bottom: 14px; }
.brand h1 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: .02em; margin: 0; line-height: 1.2; }
.brand p { margin: 4px 0 0; font-size: 13px; opacity: .8; }

/* 종이 */
.paper {
  background: var(--paper);
  padding: 22px 20px 26px;
  position: relative;
  box-shadow: 0 18px 40px rgba(90,70,30,.22);
  /* 위아래 톱니 */
  --tooth: 9px;
  -webkit-mask: radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 50% 0 / calc(var(--tooth)*2) 51% repeat-x,
                radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 50% 100% / calc(var(--tooth)*2) 51% repeat-x;
          mask: radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 50% 0 / calc(var(--tooth)*2) 51% repeat-x,
                radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 50% 100% / calc(var(--tooth)*2) 51% repeat-x;
}
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.rule { border: 0; border-top: 2px dashed #bdb8aa; margin: 14px 0; }
.rule.double { border-top: 4px double #8f8a7d; }
.store { font-family: var(--display); font-size: 22px; font-weight: 400; margin: 6px 0 2px; letter-spacing: .04em; }

/* 입력 */
.person { display: grid; gap: 10px; }
.person + .person { margin-top: 6px; }
.person-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.person-head small { font-weight: 400; color: var(--ink-soft); }
.field { display: grid; gap: 4px; }
.field label, .field .label { font-size: 13px; color: var(--ink-soft); }
.field input[type=text] {
  width: 100%; min-height: 50px; padding: 10px 12px;
  border: 2px solid var(--ink); border-radius: 0; background: #fff;
  font: inherit; font-size: 20px; letter-spacing: .08em; color: var(--ink);
}
.field input[type=text]::placeholder { color: #b5b1a6; letter-spacing: .04em; }
.field input[type=text]:disabled { background: #eeebe3; color: #9a968c; border-color: #b5b1a6; }
.field input.name { font-size: 18px; letter-spacing: 0; }
.time-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.unknown {
  display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px;
  border: 2px solid var(--ink); background: #fff; font-size: 15px; cursor: pointer; user-select: none;
}
.unknown input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.hint { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 0; }
.error { color: var(--bad); font-size: 14px; margin: 10px 0 0; font-weight: 700; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: 18px; font-weight: 700; letter-spacing: .04em;
}
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--tray-ink); border: 2px solid rgba(74,63,42,.45); min-height: 52px; font-size: 16px; }
.btn:focus-visible, .unknown:focus-within, .row-btn:focus-visible, .field input:focus-visible { outline: 3px solid #f2b84b; outline-offset: 2px; }
.actions { display: grid; gap: 10px; margin-top: 18px; }

/* 영수증 */
.meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.customers { font-size: 15px; }
.customer { display: flex; justify-content: space-between; gap: 10px; }
.customer b { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.customer span { color: var(--ink-soft); text-align: right; flex: 0 0 auto; }
.sect { font-size: 13px; color: var(--ink-soft); margin: 10px 0 2px; }
.line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.line .amt { flex: 0 0 auto; font-weight: 700; }
.line .amt.plus { color: var(--good); }
.line .amt.minus { color: var(--bad); }
.row-btn {
  all: unset; box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px; width: 100%;
  padding: 7px 0; cursor: pointer; font-variant-numeric: tabular-nums;
}
.row-btn .nm::after { content: " ›"; color: #a9a497; }
.row-btn[aria-expanded="true"] .nm::after { content: " ⌄"; }
.row-detail { font-size: 13px; color: var(--ink-soft); padding: 0 0 8px 10px; border-left: 2px solid var(--paper-edge); margin-bottom: 4px; }
.row-detail p { margin: 0; }
.total { font-size: 18px; font-weight: 700; }
.index-line { display: flex; justify-content: space-between; align-items: baseline; }
.index-line strong { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; }
.index-line strong small { font-family: var(--mono); font-size: 16px; color: var(--ink-soft); }

.verdict { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 6px 0 2px; }
.stamp {
  width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--stamp); color: var(--stamp);
  display: grid; place-items: center; text-align: center; transform: rotate(-12deg);
  font-family: var(--display); line-height: 1; opacity: .92;
}
.stamp b { font-weight: 400; font-size: 34px; display: block; }
.stamp small { font-family: var(--mono); font-size: 12px; font-weight: 700; display: block; margin-top: 2px; }
.verdict-text b { display: block; font-size: 19px; line-height: 1.35; }
.verdict-text span { font-size: 14px; color: var(--ink-soft); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { border: 1.5px solid var(--ink); padding: 2px 8px; font-size: 13px; }

.barcode { display: block; width: 100%; height: 46px; margin: 14px auto 4px; max-width: 280px; }
.note { font-size: 12.5px; color: var(--ink-soft); margin: 3px 0; }
.thanks { text-align: center; margin-top: 10px; font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .print { animation: print .7s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes print { from { transform: translateY(-24px); opacity: .2; clip-path: inset(0 0 85% 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } }
}
@media (max-width: 350px) {
  .paper { padding-inline: 14px; }
  .field input[type=text] { font-size: 18px; }
  .stamp { width: 80px; height: 80px; }
}

/* 무료 맛보기 가림 (실제 값은 화면에 넣지 않고 모자이크 막대만 그림) */
.mosaic {
  display: inline-block; height: 1.05em; vertical-align: middle; border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(31,31,31,.55) 0 6px, rgba(31,31,31,.25) 6px 11px, rgba(31,31,31,.45) 11px 15px),
    repeating-linear-gradient(0deg, rgba(251,250,245,.5) 0 4px, transparent 4px 8px);
  filter: blur(1.6px);
}
.mosaic.plus { background-color: rgba(31,107,74,.35); }
.mosaic.minus { background-color: rgba(178,58,44,.35); }
.mosaic.big { height: 2.2em; }
.locked-row { padding: 7px 0; align-items: center; }
.stamp-locked { border-style: dashed; filter: blur(1.2px); }
.lock { margin-top: 18px; padding: 16px; border: 2px solid var(--ink); background: #fff; display: grid; gap: 10px; }
.lock b { font-size: 17px; }
.lock p { margin: 0; font-size: 14.5px; }
.paysheet { display: grid; gap: 10px; padding: 14px; background: #f3efe4; border: 2px dashed var(--ink-soft); }
.paysheet[hidden] { display: none; }
.paysheet b { font-size: 16px; }
.paysheet b:focus { outline: none; }
.btn.line-btn { background: transparent; color: var(--ink); border: 2px solid var(--ink); min-height: 50px; font-size: 16px; }

/* 상세 풀이 */
.reading { margin-top: 18px; font-size: 15.5px; line-height: 1.7; }
.reading h2 { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 4px 0 6px; text-align: center; }
.reading h3 { font-size: 17px; margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 2px dashed #bdb8aa; }
.reading h4 { font-size: 16px; margin: 0 0 4px; display: flex; justify-content: space-between; gap: 10px; }
.reading h4 small { font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.reading p { margin: 0 0 8px; }
.reading .who, .reading .item { padding: 10px 0; border-bottom: 1px solid var(--paper-edge); }
.reading .item:last-of-type, .reading .who:last-of-type { border-bottom: 0; }
.reading .amt.plus { color: var(--good); } .reading .amt.minus { color: var(--bad); }
.reading .why { font-size: 13px; color: var(--ink-soft); }
.reading .tip { background: #f3efe4; padding: 8px 10px; font-size: 14.5px; }

/* 서월당 메인으로 */
.home { display: inline-block; color: var(--tray-ink); opacity: .8; font-size: 14px; text-decoration: none; padding: 10px 2px; min-height: 44px; }
.home:hover, .home:focus-visible { opacity: 1; text-decoration: underline; }

/* 맛보기: 아랫단이 찢겨 나간 영수증 (윗단 톱니 + 아랫단 들쭉날쭉) */
.paper.torn {
  padding-bottom: 30px;
  -webkit-mask: radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 50% 0 / calc(var(--tooth)*2) 51% repeat-x,
                conic-gradient(from -45deg at 50% 100%, transparent, #000 1deg 89deg, transparent 90deg) 50% 100% / 16px 51% repeat-x;
          mask: radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 50% 0 / calc(var(--tooth)*2) 51% repeat-x,
                conic-gradient(from -45deg at 50% 100%, transparent, #000 1deg 89deg, transparent 90deg) 50% 100% / 16px 51% repeat-x;
}
.first-row { padding: 4px 0; font-weight: 700; }
.fade-out {
  -webkit-mask-image: linear-gradient(#000 0, rgba(0,0,0,.5) 50%, transparent 100%);
          mask-image: linear-gradient(#000 0, rgba(0,0,0,.5) 50%, transparent 100%);
}
.torn-tail { height: 0; margin: 14px 4px 0; border-top: 2px dashed rgba(74,63,42,.4); position: relative; }
.torn-tail::before { content: "✂"; position: absolute; left: 0; top: -13px; color: var(--tray-ink); font-size: 18px; line-height: 1; }
.tease { margin: 0; padding-left: 1.2em; font-size: 15px; }
.tease li { margin: 2px 0; }
.lock .btn:disabled, .btn:disabled { opacity: .6; }
.refund { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 !important; }
.row-detail .easy { color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.reading .toc { background: #f3efe4; padding: 10px 14px; margin: 6px 0 4px; font-size: 14px; }
.reading .toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 14px; }
.reading .toc li { margin: 2px 0; break-inside: avoid; }
.reading .toc a { color: var(--ink); display: inline-block; padding: 3px 0; }
.reading h3 { scroll-margin-top: 12px; }
@media (max-width: 350px) { .reading .toc ol { columns: 1; } }


/* ===== 2026-11-04 등급 강조 개편 ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 반짝이는 글씨 (주문서 안내 · 궁합 점수표 제목) */
.sparkle-sub, .shine-title {
  background: linear-gradient(100deg, #8a5a12 0%, #c8392f 30%, #f2b84b 45%, #fff6d8 50%, #f2b84b 55%, #c8392f 70%, #8a5a12 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sparkle-sub { font-size: 14.5px; font-weight: 700; margin-top: 4px; }
.shine-title::after { content: " ✨"; color: initial; -webkit-text-fill-color: initial; }
.shine-title { font-size: 26px; }

/* 남/여 입력 칸 색 구분 */
.person { border: 0; margin: 0; padding: 12px; border-radius: 10px; border-left: 6px solid var(--c); background: var(--soft); }
.person.is-m { --c: var(--male); --soft: var(--male-soft); }
.person.is-f { --c: var(--female); --soft: var(--female-soft); }
.person-head { width: 100%; padding: 0; float: left; margin-bottom: 2px; }
.person-head + * { clear: both; }
.sex-chip { background: var(--c); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 14px; }
.person .field input[type=text], .person .unknown { border-color: var(--c); }
.person .unknown input { accent-color: var(--c); }
.person .field label, .person .field .label { color: color-mix(in srgb, var(--c) 70%, #333); }

/* 궁합 등급 뽑기 버튼: 누르는 모션 */
.btn-go { position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #2a2a2a, #111); box-shadow: 0 6px 0 #000, 0 10px 18px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s; }
.btn-go:active, .btn-go.pressed { transform: translateY(5px) scale(.98); box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0,0,0,.25); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff6; border-top-color: #fff; }

/* 맛보기: 종합 점수 (계속 바뀜) */
.score-roll { align-items: baseline; font-weight: 700; }
.score-roll .amt b { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--stamp); display: inline-block; min-width: 2.2ch; text-align: right; filter: blur(.4px); }
.score-roll .amt small { font-size: 14px; margin-left: 2px; }
.roll-hint { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.good-sect { color: var(--good); font-weight: 700; font-size: 14px; }
.hook-row { margin: 4px -8px 2px; padding: 8px; border-radius: 8px; background: #fff1ef; border: 1.5px dashed var(--bad); }
.hook-row .line, .hook-row .amt { color: var(--bad); font-weight: 700; }
.hook-name { min-width: 0; }
.hook-sub { font-size: 12px; color: #a0574e; margin-top: 2px; }

/* 잘린 아래쪽: 결제하면 열리는 6가지 */
.lock { border-radius: 12px; border-width: 2.5px; background: #fff; box-shadow: 0 10px 24px rgba(90,70,30,.18); }
.lock-title { font-size: 18px !important; color: var(--bad); }
.lock-lead { font-size: 15px !important; }
.lock-lead em { font-style: normal; font-weight: 700; background: linear-gradient(transparent 55%, #ffe08a 55%); }
.six { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.six li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; align-items: start; padding: 8px 10px; border-radius: 8px; }
.six .no { font-size: 17px; line-height: 1.4; }
.six .tx b { display: block; font-size: 15px; }
.six .tx small { display: block; font-size: 13px; color: var(--ink-soft); }
.six li.open { background: #eef8f2; }
.six li.open b { color: var(--good); }
.six li.locked { background: #f5f2ea; }
.blur-txt { filter: blur(3.5px); user-select: none; }
.lock-price { text-align: center; font-size: 15px !important; }
.lock-price s { color: var(--ink-soft); }
.lock-price b { color: var(--bad); font-size: 22px; font-family: var(--display); font-weight: 400; }
.btn-pay { position: relative; overflow: hidden; border-radius: 12px; min-height: 60px; font-size: 19px;
  background: linear-gradient(135deg, #e0548f, #c8392f); color: #fff; box-shadow: 0 6px 0 #8f2620, 0 10px 20px rgba(200,57,47,.35); transition: transform .12s, box-shadow .12s; }
.btn-pay:active { transform: translateY(5px); box-shadow: 0 1px 0 #8f2620, 0 4px 10px rgba(200,57,47,.3); }
.lock-foot { text-align: center; font-size: 13px !important; color: var(--ink-soft); }

/* 약관 안내: 영수증 밖, 아이보리 바탕 */
.terms { margin: 16px 4px 0; padding: 12px 2px 0; border-top: 1px solid rgba(74,63,42,.25); }
.terms .refund, .terms .note { color: #5e5340; }

@media (prefers-reduced-motion: no-preference) {
  .sparkle-sub { animation: shine 2.6s linear infinite; }
  @keyframes shine { to { background-position: -150% 0; } }
  /* 궁합 점수표 제목: 5초에 한 번만 반짝 */
  .shine-title { animation: shine5 5s linear infinite; }
  @keyframes shine5 { 0% { background-position: 100% 0; } 22% { background-position: -150% 0; } 100% { background-position: -150% 0; } }
  .btn-go::after, .btn-pay::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: sweep 2.8s ease-in-out infinite; }
  @keyframes sweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
  .btn-go:not(:disabled) { animation: nudge 2.8s ease-in-out infinite; }
  .btn-pay { animation: nudge 2.2s ease-in-out infinite; }
  .btn-go.pressed, .btn-go:active, .btn-pay:active { animation: none; }
  @keyframes nudge { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.03; } 90% { scale: .99; } }
  .btn-pay .arrow { display: inline-block; animation: arrow 1.1s ease-in-out infinite; }
  @keyframes arrow { 50% { transform: translateX(5px); } }
  .spin { animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hook-row { animation: glow 1.8s ease-in-out infinite; }
  @keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(178,58,44,.15); } }
  .six li { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.5s + var(--d)); }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  .six li.locked .no { animation: wiggle 2.4s ease-in-out infinite; animation-delay: var(--d); }
  @keyframes wiggle { 0%, 85%, 100% { transform: none; } 90% { transform: rotate(-14deg); } 95% { transform: rotate(12deg); } }
  .lock-title { animation: pop .5s .35s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes pop { from { transform: scale(.9); opacity: 0; } }
}


/* ===== 2026-11-04 결과 화면: 진짜 영수증 · 등급 카드 · 공유 · 풀이 가독성 ===== */
.cols, .item-row { display: grid; grid-template-columns: 1fr 3.2em 6.4em; gap: 6px; align-items: baseline; }
.cols { font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--paper-edge); padding-bottom: 4px; margin-bottom: 4px; }
.cols span:nth-child(n+2) { text-align: right; }
.item-row { display: grid; }
.item-row .qty { text-align: right; color: var(--ink-soft); }
.item-row .qty::before { content: "×"; }
.item-row .amt { text-align: right; font-weight: 700; }
.line.price { padding: 3px 0; }
.sect.good { color: var(--good); font-weight: 700; }
.sect.bad { color: var(--bad); font-weight: 700; }
.subtotal { font-size: 14px; color: var(--ink-soft); border-top: 1px dotted #cfcabd; padding-top: 4px; margin-top: 2px; }
.conv { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.conv b { color: var(--stamp); font-size: 18px; }
.gtable { font-size: 13.5px; }
.gt-head { font-weight: 700; text-align: center; margin-bottom: 6px; }
.gt-row { display: flex; justify-content: space-between; padding: 3px 8px; font-variant-numeric: tabular-nums; }
.gt-row b { width: 2.4em; }
.gt-row.on { background: var(--ink); color: #fff; font-weight: 700; border-radius: 4px; }
.gt-row.on span::after { content: "  ◀ 우리"; }

/* 등급 카드 */
.gcard { --c1: #5e5a52; --c2: #8f897c; position: relative; overflow: hidden; margin-top: 20px; padding: 18px 18px 20px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 16px 34px rgba(90,70,30,.28); }
.gcard::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.14); }
.g-S { --c1: #c8392f; --c2: #e0548f; } .g-Ap { --c1: #d9572b; --c2: #f0a23b; } .g-A { --c1: #c77a12; --c2: #e8b84a; }
.g-Bp { --c1: #2f6fd6; --c2: #5aa3e8; } .g-B { --c1: #2f8a6a; --c2: #58b88f; } .g-Cp { --c1: #6b5ea8; --c2: #9a8ed6; }
.gc-top { position: relative; display: flex; justify-content: space-between; font-size: 12.5px; opacity: .85; font-weight: 700; }
.gc-names { position: relative; text-align: center; font-size: 19px; font-weight: 700; margin: 10px 0 12px; font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.gc-names i { font-style: normal; color: #ffe0ea; }
.gc-mid { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.gc-grade { width: 112px; height: 112px; border-radius: 50%; background: #fff; color: var(--c1); display: grid; place-content: center; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.gc-grade b { font-family: var(--display); font-weight: 400; font-size: 54px; line-height: 1; }
.gc-grade small { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.gc-score span { display: block; font-size: 13px; opacity: .9; }
.gc-score strong { font-family: var(--display); font-weight: 400; font-size: 50px; line-height: 1.05; }
.gc-score strong small { font-size: 18px; margin-left: 2px; }
.gc-score em { display: block; font-style: normal; font-size: 12.5px; opacity: .9; }
.gc-line { position: relative; margin-top: 14px; font-size: 19px; font-weight: 700; text-align: center; font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.gc-style { position: relative; margin-top: 8px; background: rgba(255,255,255,.16); border-radius: 12px; padding: 10px 12px; text-align: center; font-size: 14px; }
.gc-style b { display: block; font-size: 15.5px; }
.gc-tags { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gc-tags span { background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px 10px; font-size: 13px; }

/* 공유 버튼 */
.share { display: grid; gap: 10px; margin-top: 14px; }
.share .btn { border-radius: 12px; }
.btn.kakao { background: #fee500; color: #191919; }
.btn.save { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.share-msg { margin: 0; text-align: center; font-size: 14px; color: var(--tray-ink); font-weight: 700; }
.share-msg[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .gcard { animation: cardIn .7s .2s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
  .gc-grade { animation: gradePop .6s .7s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes gradePop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
}

/* 상세 풀이: 읽기 쉬운 글꼴·간격·카드 */
.reading { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 16.5px; line-height: 1.85; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; color: #2a2722; padding: 26px 18px 30px; }
.reading h2 { margin-bottom: 14px; }
.reading p { margin: 0 0 14px; }
.reading b { color: #1a1814; background: linear-gradient(transparent 62%, #ffe9a8 62%); }
.reading .toc { border-radius: 12px; padding: 12px 14px; background: #f6f1e4; }
.reading .toc ol { columns: 1; padding-left: 1.5em; }
.reading .toc a { font-weight: 600; text-decoration: none; border-bottom: 1px solid #c9bfa6; }
.reading h3 { position: relative; font-size: 20px; line-height: 1.4; margin: 34px 0 14px; padding: 10px 14px; border: 0; border-radius: 10px;
  background: #2a2722; color: #fff; }
.reading h4 { font-size: 17px; align-items: baseline; margin-bottom: 8px; }
.reading .who, .reading .item { margin: 0 0 14px; padding: 14px 14px 4px; border: 1px solid #e6dfcf; border-radius: 12px; background: #fffdf8; }
.reading .item:last-of-type, .reading .who:last-of-type { border-bottom: 1px solid #e6dfcf; }
.reading .who:nth-of-type(1) { border-left: 5px solid var(--male); }
.reading .who:nth-of-type(2) { border-left: 5px solid var(--female); }
.reading .item:has(.amt.plus) { border-left: 5px solid var(--good); }
.reading .item:has(.amt.minus) { border-left: 5px solid var(--bad); }
.reading .tip { border-radius: 10px; background: #fff6d6; border: 1px solid #f0dc9a; padding: 10px 12px; font-size: 15.5px; line-height: 1.75; }
.reading .why { font-size: 13px; line-height: 1.6; color: #8a8476; }


/* ===== 2026-11-04 실제 영수증 느낌: 감열지 결·톱니 가장자리·흐린 잉크·가게 머리말·고객용 꼬리말 ===== */
.paper-wrap { filter: drop-shadow(0 12px 18px rgba(90,70,30,.22)) drop-shadow(0 2px 2px rgba(90,70,30,.12)); }
.paper-wrap .paper { box-shadow: none; }
.paper {
  --zz: 8px;
  color: #262626;
  padding: calc(var(--zz) + 18px) 20px calc(var(--zz) + 22px);
  background:
    linear-gradient(90deg, rgba(0,0,0,.045), transparent 5% 95%, rgba(0,0,0,.045)),   /* 말린 종이 양옆 그늘 */
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),      /* 감열지 가로 결 */
    #fdfdfa;
  text-shadow: 0 0 .4px rgba(38,38,38,.55);   /* 감열 잉크 번짐 */
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--zz)*2) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--zz)*2) 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--zz)*2) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--zz)*2) 51% repeat-x;
}
.paper.torn { padding-bottom: 34px; }
/* 점선은 글자처럼 촘촘한 감열 점선 */
.rule { border: 0; height: 2px; margin: 14px 0; background: repeating-linear-gradient(90deg, #3a3a3a 0 4px, transparent 4px 8px); opacity: .75; }
.rule.double { height: 6px; background:
  repeating-linear-gradient(90deg, #3a3a3a 0 4px, transparent 4px 8px) top / 100% 2px no-repeat,
  repeating-linear-gradient(90deg, #3a3a3a 0 4px, transparent 4px 8px) bottom / 100% 2px no-repeat; }
.rc-store { font-weight: 700; font-size: 15px; letter-spacing: .3em; }
.rc-addr { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 6px; }
.rc-copy { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; margin: 10px 0 6px; }
.rc-copy.end { margin-top: 12px; color: var(--ink-soft); }
.meta { font-size: 12px; }
.barcode { margin-bottom: 0; }
.barno { text-align: center; font-size: 11px; letter-spacing: .3em; color: #3a3a3a; margin-bottom: 6px; }
/* 영수증 숫자는 고정폭으로 줄 맞춤 */
.line, .item-row, .cols, .gt-row, .meta { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* 인쇄되며 나오는 느낌 */
@media (prefers-reduced-motion: no-preference) {
  .print { animation: print 1.1s steps(14, end) both; }
  @keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
}
.paper.torn {
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--zz)*2) 51% repeat-x,
                conic-gradient(from -45deg at 50% 100%, transparent, #000 1deg 89deg, transparent 90deg) 50% 100% / 22px 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--zz)*2) 51% repeat-x,
                conic-gradient(from -45deg at 50% 100%, transparent, #000 1deg 89deg, transparent 90deg) 50% 100% / 22px 51% repeat-x;
}
.reading { text-shadow: none; }