:root{
  --paper:#0e0c0a; --ink:#f0e8d8; --muted:#a99d86; --border:#3a3226;
  --accent:#c0323f; --accent-ink:#fff6ef;
  --ad-bg:#1c1712; --ad-border:#3a3226; --ad-ink:#8a8072;
  --cross-bg-a:#16302a; --cross-bg-b:#1c2624; --cross-border:#2c5548; --cross-accent:#5fd6b8;
  --cross-icon-bg:#0f211c;
  --font-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-display:"Black Han Sans","Pretendard Variable",Pretendard,sans-serif;
}

*{box-sizing:border-box;}
.hidden{display:none !important;}
html,body{margin:0; padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

html,body{height:100%;}
.app-shell{
  max-width:460px; margin:0 auto; height:100dvh; height:100vh; display:flex; flex-direction:column;
  overflow:hidden;
}

.brand{
  display:flex; align-items:center; justify-content:center; padding:6px 0; flex:none; position:relative;
  background-color:#132442;
}
.brand-landing-inner, .logo-link{position:relative; z-index:1;}
.brand .mark{
  width:22px; height:22px; border-radius:6px; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;
}
.brand .name{font-size:14px; font-weight:800; letter-spacing:-.01em;}
.brand .logo-img{height:104px; width:auto; max-width:100%; display:block; border-radius:0;}
.logo-link{display:block; line-height:0; text-decoration:none;}
.brand.brand-landing{padding:0;}
.brand.brand-landing .logo-img{width:100%; height:auto;}
.brand.brand-compact{padding:0;}
.brand.brand-compact .logo-img{height:80px;}

.hamburger-btn{
  position:absolute; right:34px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:1px solid rgba(232,200,119,.35); background:rgba(0,0,0,.22); border-radius:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; padding:0; z-index:20;
}
.hamburger-btn span{display:block; width:18px; height:3px; border-radius:2px; background:#e8c877; box-shadow:0 0 4px rgba(232,200,119,.5);}
.hamburger-btn:active{background:rgba(0,0,0,.35);}

.nav-menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:30; opacity:0;
  pointer-events:none; transition:opacity .2s ease;
}
.nav-menu-backdrop.is-open{opacity:1; pointer-events:auto;}

.nav-menu{
  position:absolute; top:calc(100% + 6px); right:34px; z-index:31; min-width:216px;
  background:#1c1712; border:1px solid var(--border); border-radius:14px; padding:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.nav-menu.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.nav-menu-item{
  display:block; padding:11px 12px; border-radius:9px; color:var(--ink); text-decoration:none;
  font-size:13.5px; font-weight:600;
}
.nav-menu-item:active{background:rgba(255,255,255,.06);}
.nav-menu-item + .nav-menu-item{border-top:1px solid rgba(255,255,255,.06); margin-top:2px; padding-top:12px;}

.screen{
  padding:6px 16px 12px; display:flex; flex-direction:column; gap:6px;
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
}
.screen.hidden{display:none;}

.sec-label{
  font-size:15px; font-weight:700; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase; margin:2px 0 -2px; flex:none;
}

.select-intro{
  font-size:16px; line-height:1.5; color:var(--muted); text-align:center;
  padding:2px 6px 6px; flex:none;
}
.select-intro-title{
  display:block; font-size:1.4em; font-weight:800; color:inherit; margin-bottom:3px;
}

.type-list{display:flex; flex-direction:column; gap:10px; flex:none;}
.type-row{
  position:relative; display:flex; align-items:center; gap:0; flex:none; height:112px;
  border:1.5px solid var(--border); border-radius:16px; overflow:hidden;
  background-size:cover; background-position:center; background-color:var(--ad-bg);
  padding:0 14px 0 0; cursor:pointer; text-align:left; font:inherit; color:inherit;
}
.type-row-scrim{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(6,5,4,.88) 0%, rgba(6,5,4,.68) 38%, rgba(6,5,4,.22) 78%);
}
.type-row-badge{
  position:relative; z-index:1; height:78%; width:auto; aspect-ratio:571/1024; object-fit:cover;
  border-radius:9px; box-shadow:0 8px 18px rgba(0,0,0,.55); flex:none; margin-left:14px;
  transform:rotate(-3deg);
}
.type-row-text{position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:8px 12px;}
.type-row-title{font-family:var(--font-display); font-size:24px; font-weight:400; letter-spacing:.01em; color:#f0cf82; text-shadow:0 1px 4px rgba(0,0,0,.5);}
.type-row-preview{
  font-size:15px; color:rgba(240,232,216,.78); line-height:1.35; white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.type-row-arrow{position:relative; z-index:1; flex:none; align-self:center; color:rgba(240,232,216,.7); font-size:16px; font-weight:700;}

.occasion-hero{
  position:relative; display:block; flex:1; min-height:280px; border-radius:16px; overflow:hidden;
}
.occasion-hero-slides{position:absolute; inset:0;}
.occasion-hero-slide{
  position:absolute; inset:0; display:block; text-decoration:none; color:inherit;
  opacity:0; transform:translateX(18px); transition:opacity .7s ease, transform .7s ease;
}
.occasion-hero-slide.is-active{opacity:1; transform:translateX(0); z-index:1;}
.occasion-hero-slide-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center center; display:block;
  background:var(--ad-bg);
}
.occasion-hero-scrim{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.1) 55%); z-index:2;
}
.occasion-hero-text{
  position:absolute; left:16px; right:44px; bottom:14px; display:flex; flex-direction:column; gap:3px; z-index:3;
}
.occasion-hero-badges{display:flex; align-items:center; gap:6px; margin-bottom:4px;}
.occasion-hero-tag{
  background:#0e0c0a; color:#e8c877; font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:20px; border:1px solid rgba(232,200,119,.4);
}
.occasion-hero-badge{
  background:var(--accent); color:var(--accent-ink); font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:20px;
}
.occasion-hero-title{font-family:var(--font-display); font-size:25px; font-weight:400; letter-spacing:.01em; color:#fff;}
.occasion-hero-sub{font-size:12px; color:rgba(255,255,255,.85);}
.occasion-hero-arrow{position:absolute; right:16px; bottom:16px; color:#fff; font-size:18px; font-weight:700; z-index:3;}
.occasion-hero-dots{position:absolute; right:16px; top:12px; display:flex; gap:5px; z-index:3;}
.occasion-hero-dot{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); transition:background .3s ease, transform .3s ease;}
.occasion-hero-dot.is-active{background:#fff; transform:scale(1.3);}

.scroll-hint{
  display:flex; flex-direction:column; align-items:center; gap:2px; flex:none;
  padding:4px 0 2px; color:var(--muted); font-size:11px; font-weight:600;
}
.scroll-hint-arrow{font-size:14px; animation:scrollHintBounce 1.6s ease-in-out infinite;}
@keyframes scrollHintBounce{0%,100%{transform:translateY(0); opacity:.6;} 50%{transform:translateY(4px); opacity:1;}}
@media (prefers-reduced-motion: reduce){.scroll-hint-arrow{animation:none;}}

.category-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; flex:none;}
.category-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  border:1.5px solid var(--border); border-radius:14px; background:var(--ad-bg);
  padding:12px 12px 11px; text-align:left; text-decoration:none; color:inherit;
  font:inherit; cursor:pointer;
}
.category-card:not(button){opacity:1;}
.category-card[data-status]{opacity:.6;}
.category-card.tone-heavy{background:linear-gradient(160deg,#241512,#171010); border-color:#4a3226;}
.category-card-badge{
  position:absolute; top:8px; right:8px; font-size:9px; font-weight:800; color:var(--ad-ink);
  border:1px solid var(--ad-ink); border-radius:4px; padding:1px 5px; background:var(--paper);
}
.category-card-icon{font-size:22px; line-height:1;}
.category-card-title{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25;}
.category-card-sub{
  font-size:10.5px; color:var(--muted); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.footer-link{
  flex:none; text-align:center; font-size:10.5px; color:var(--muted); text-decoration:none;
  padding-top:2px;
}

.back-btn{
  align-self:flex-start; background:none; border:none; color:var(--muted); font-size:15px;
  font-weight:600; padding:2px 0; cursor:pointer; flex:none; text-decoration:none;
}

.region-list{display:flex; flex-direction:column; gap:6px; flex:none;}
.region-btn{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  border:1.5px solid var(--border); border-radius:9px; padding:8px 12px; background:none; cursor:pointer;
  text-align:left;
}
.region-btn.on{border-color:var(--accent); background:var(--ad-bg);}
.region-btn .rt{font-size:13px; font-weight:800; color:var(--ink); flex:none;}
.region-btn .rc{font-size:10px; color:var(--muted); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---- 여행안전부: 색상 테마 칩 ---- */
.theme-tabs{display:flex; gap:8px; flex:none;}
.theme-tab{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 8px; border-radius:10px; border:1px solid #4a4038;
  background:linear-gradient(160deg,#241f1a,#171310); color:var(--muted); font-weight:700; font-size:11.5px;
  cursor:pointer; white-space:normal; word-break:keep-all;
}
.theme-tab.active{
  border-color:var(--t-foil, #e8c877); color:#f5e6bc; background:linear-gradient(160deg,#3a3024,#241d16);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--t-foil, #e8c877) 55%, transparent),
    0 0 16px color-mix(in srgb, var(--t-foil, #e8c877) 50%, transparent), 0 4px 10px rgba(0,0,0,.4);
}
.theme-tab-swatch{
  width:44px; height:26px; border-radius:6px; border:1px solid var(--t-foil, rgba(232,200,119,.4));
  background:var(--t-bg, #241f1a); box-shadow:inset 0 1px 2px rgba(255,255,255,.15), inset 0 -1px 2px rgba(0,0,0,.4);
  flex:none;
}
.concept-tab-swatch{display:flex; align-items:center; justify-content:center; font-size:15px;}
.theme-tab-label{line-height:1.3; text-align:center;}
.theme-meaning{
  font-size:12px; line-height:1.5; color:var(--muted); margin:4px 2px 0; flex:none;
  text-align:left;
}

/* ---- 여행안전부: 권역 카드 (선택된 테마 색으로 물듦) ---- */
.region-list#region-list{
  --region-bg:#241f1a; --region-foil:#e8c877;
  display:flex; flex-direction:column; gap:8px;
}
.region-card{
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  border:1.5px solid var(--border); border-radius:14px; padding:10px 14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--region-bg) 88%, black), var(--region-bg));
  transition:border-color .15s ease, box-shadow .15s ease;
}
.region-card.on{
  border-color:var(--region-foil);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--region-foil) 55%, transparent),
    0 0 16px color-mix(in srgb, var(--region-foil) 45%, transparent);
}
.region-card-badge{
  flex:none; width:38px; height:38px; border-radius:10px;
  background:color-mix(in srgb, var(--region-foil) 22%, #0e0c0a);
  border:1px solid color-mix(in srgb, var(--region-foil) 50%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.region-card-badge::before{content:"🌊";}
.region-icon-sun::before{content:"☀️";}
.region-icon-dragon::before{content:"🐉";}
.region-icon-compass::before{content:"🧭";}
.region-icon-north_star::before{content:"⭐";}
.region-card-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.region-card-title{font-size:14px; font-weight:800; color:var(--ink);}
.region-card-sub{font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---- 여행안전부: 편명 입력 ---- */
.mode-grid-3{grid-template-columns:repeat(3,1fr);}
.flight-manual-field.hidden, .flight-random-field.hidden{display:none;}
.flight-manual-row{display:flex; gap:6px;}
.airline-select{
  flex:none; width:78px; border:1px solid #8a8478; border-radius:8px; padding:11px 8px;
  font-size:15px; font-weight:800; color:#2a2620;
  background-image:linear-gradient(170deg, rgba(216,210,196,.85), rgba(160,154,140,.72) 45%, rgba(207,201,186,.85)), url(/static/metal-texture.jpg);
  background-size:cover, cover; background-position:center; background-blend-mode:overlay;
}
.flight-manual-row input{flex:1;}
.airline-custom-input{margin-top:6px;}
.flight-random-field{
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none;
  border:1px solid var(--border); border-radius:10px; padding:10px 14px;
  background:var(--ad-bg);
}
.flight-random-code{font-size:16px; font-weight:800; letter-spacing:.06em; color:#f5e6bc; font-variant-numeric:tabular-nums;}
.flight-reroll-btn{
  flex:none; border:1px solid var(--border); border-radius:20px; background:none; color:var(--muted);
  font-size:12px; font-weight:700; padding:6px 12px; cursor:pointer;
}
.flight-none-note{font-size:12px; color:var(--muted); margin:0; flex:none;}
.flight-none-note.hidden{display:none;}

.thanks-theme-chip{
  display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:20px;
  border:1px solid; font-size:11.5px; font-weight:700; color:#f5e6bc; margin:0 4px 4px 0;
}

/* ---- 시험생존부: 학년/반/번호 입력 ---- */
.class-input-field.hidden{display:none;}
.class-input-row{display:flex; gap:6px;}
.class-input-row input{flex:1; min-width:0; text-align:center;}
#talisman-list{--region-bg:#241f1a; --region-foil:#e8c877;}

/* ---- 연리지부: 년/월/일 선택 ---- */
.date-select{width:auto !important; flex:1;}

/* ---- 시험생존부: 색상 의미 캡션 ---- */
.color-meaning{font-size:11.5px; color:var(--muted); margin:-2px 0 0; flex:none; text-align:left;}
.color-meaning.hidden{display:none;}

#screen-detail{
  background:linear-gradient(180deg, #16294a 0%, #101f38 40%, #0b1626 100%);
  margin:0 -16px; padding:6px 24px 16px; border-radius:0;
}

.detail-top{display:flex; align-items:center; justify-content:center; gap:16px; flex:none; position:relative; padding:6px 16px;}
.detail-hero-wrap{position:relative; flex:none; width:73px; height:130px;}
.detail-hero-wrap::before{
  content:""; position:absolute; inset:-22px; z-index:0;
  background:radial-gradient(ellipse at center, rgba(232,200,119,.55) 0%, rgba(232,200,119,.18) 45%, transparent 72%);
  filter:blur(2px);
}
.detail-hero{
  position:relative; z-index:1; border-radius:10px; overflow:hidden; width:73px; height:130px;
  background:var(--ad-bg); transform:rotate(-7deg);
  box-shadow:0 10px 26px rgba(0,0,0,.6), 0 0 22px rgba(232,200,119,.35);
}
.detail-hero img{width:100%; height:100%; display:block; object-fit:contain;}
.detail-info{min-width:0; max-width:280px; display:flex; flex-direction:column; justify-content:center; gap:6px;}
.detail-title{font-family:var(--font-display); font-size:33px; font-weight:400; margin:0; letter-spacing:.01em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5);}
.detail-preview{
  font-size:19px; line-height:1.4; color:rgba(240,232,216,.75); margin:0;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}

.mode-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:6px; flex:none;}
.mode-btn{
  padding:11px 4px; border-radius:8px; border:1px solid #8a8478;
  background-image:linear-gradient(170deg, rgba(216,210,196,.88), rgba(160,154,140,.78) 45%, rgba(207,201,186,.88)), url(/static/metal-texture.jpg);
  background-size:cover, cover; background-position:center; background-blend-mode:overlay;
  color:#4a453c; font-weight:700; font-size:14px; cursor:pointer;
  text-align:center; line-height:1.25; text-shadow:0 1px 0 rgba(255,255,255,.4);
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.4);
}
.mode-btn.active{
  border-color:var(--accent); color:#2a2620;
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,.7), 0 0 0 2px rgba(192,50,63,.4), 0 4px 12px rgba(0,0,0,.45);
}

.field{flex:none;}
.field.hidden{display:none;}
.field input{
  width:100%; border:1px solid #8a8478; border-radius:8px; padding:11px 14px;
  font-size:19px; font-weight:800; letter-spacing:.08em; color:#2a2620;
  background-image:linear-gradient(170deg, rgba(216,210,196,.85), rgba(160,154,140,.72) 45%, rgba(207,201,186,.85)), url(/static/metal-texture.jpg);
  background-size:cover, cover; background-position:center; background-blend-mode:overlay;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.4);
}
.field input::placeholder{color:#6b655a;}
.field input:focus{outline:none; border-color:var(--accent);}
.field-error{color:var(--accent); font-size:11px; min-height:14px; margin:2px 2px 0;}

/* ============ 시험생존부: 공책 테마 (exam-theme) ============ */
body.exam-theme #screen-select{
  --exam-ink:#3d3122; --exam-muted:#5c4f39; --exam-accent:#c0323f;
  position:relative;
  background:#e9dcbd url(/static/exam-notebook-bg.jpg) center/cover no-repeat;
  color:var(--exam-ink);
}
body.exam-theme #screen-select .back-btn{color:var(--exam-ink); opacity:.7; font-size:16px;}
body.exam-theme #screen-select .select-intro{
  color:var(--exam-muted); font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:18.5px; font-weight:700;
}
body.exam-theme #screen-select .sec-label{
  color:var(--exam-ink); font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:21px; font-weight:700;
  text-transform:none; letter-spacing:0; border-bottom:2px dashed rgba(61,49,34,.3); padding-bottom:5px; margin-top:10px;
}
body.exam-theme #screen-select .banner-slot{background:rgba(61,49,34,.08); color:var(--exam-muted); border-color:rgba(61,49,34,.25);}

/* ---- 부적 종류: 찢어진 종이 + 마스킹 테이프 ---- */
body.exam-theme #talisman-list{gap:16px; padding-top:6px;}
body.exam-theme #talisman-list .region-card{
  background:linear-gradient(175deg,#f8f0dd,#ecdfc0); border:none; border-radius:3px 16px 3px 16px;
  padding:15px 16px 12px; box-shadow:0 3px 0 rgba(0,0,0,.06), 0 8px 16px rgba(61,49,34,.2);
  position:relative; transform:rotate(var(--tilt,0deg));
}
body.exam-theme #talisman-list .region-card:nth-child(1){--tilt:-1deg;}
body.exam-theme #talisman-list .region-card:nth-child(2){--tilt:0.7deg;}
body.exam-theme #talisman-list .region-card:nth-child(3){--tilt:-0.6deg;}
body.exam-theme #talisman-list .region-card::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:62px; height:20px; background:linear-gradient(180deg, rgba(255,241,168,.88), rgba(255,221,102,.65));
  box-shadow:0 2px 3px rgba(0,0,0,.15); clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
}
body.exam-theme #talisman-list .region-card-title{
  color:var(--exam-ink); font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:21px; font-weight:700;
}
body.exam-theme #talisman-list .region-card.on{
  box-shadow:0 3px 0 rgba(0,0,0,.06), 0 8px 16px rgba(61,49,34,.2), 0 0 0 2.5px var(--exam-accent);
}
body.exam-theme #talisman-list .region-card.on::after{
  content:"✓ 선택됨"; position:absolute; right:12px; top:9px; transform:rotate(-4deg);
  font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:12px; font-weight:700; color:var(--exam-accent);
}

/* ---- 색상: 실제 형광펜 스트로크 이미지 ---- */
body.exam-theme #color-tabs .theme-tab{
  flex-direction:column-reverse; background:none; border:none; padding:6px 4px 4px; gap:4px;
}
body.exam-theme #color-tabs .theme-tab-swatch{
  width:auto; height:36px; max-width:100%; object-fit:contain;
  border:none; border-radius:0; background:none;
  box-shadow:none; filter:drop-shadow(0 2px 3px rgba(61,49,34,.18));
  transition:filter .12s ease;
}
body.exam-theme #color-tabs .theme-tab.active .theme-tab-swatch{
  filter:drop-shadow(0 2px 6px rgba(61,49,34,.32)) brightness(1.04) saturate(1.08);
}
body.exam-theme #color-tabs .theme-tab-label{
  font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:17px; font-weight:700; color:var(--exam-ink);
}
body.exam-theme #color-tabs .theme-tab.active .theme-tab-label::after{content:" ✓"; color:var(--exam-accent);}
body.exam-theme #color-meaning{
  color:var(--exam-muted); font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:16px; font-weight:700;
}

/* ---- 추천 스티커 (색상 / 도장 공용) ---- */
body.exam-theme .is-recommended{position:relative;}
body.exam-theme .is-recommended::before{
  content:"추천!"; position:absolute; top:-12px; right:-4px; z-index:2;
  font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:12.5px; font-weight:700; color:#fff6ef;
  background:var(--exam-accent); padding:2px 7px 3px; border-radius:3px 9px 3px 9px;
  transform:rotate(11deg); box-shadow:0 2px 4px rgba(0,0,0,.28);
}

/* ---- 학년반번호 모드 버튼 ---- */
body.exam-theme #class-mode-tabs .mode-btn{
  background:linear-gradient(175deg,#f8f0dd,#ecdfc0); background-image:none;
  border:1.5px dashed rgba(61,49,34,.35); color:var(--exam-ink);
  font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:17px; font-weight:700;
  box-shadow:0 2px 5px rgba(61,49,34,.14); text-shadow:none;
}
body.exam-theme #class-mode-tabs .mode-btn.active{
  border-style:solid; border-color:var(--exam-accent); color:var(--exam-accent);
  box-shadow:0 2px 5px rgba(61,49,34,.14), 0 0 0 2px rgba(192,50,63,.18);
}

/* ---- 도장 문구: 실제 도장 이미지, 2x2 그리드 ---- */
body.exam-theme #stamp-tabs{grid-template-columns:repeat(2,1fr); gap:8px; margin-top:16px;}
body.exam-theme #stamp-tabs .mode-btn.stamp-preview-btn{
  position:relative; background:linear-gradient(175deg,#faf3e2,#eee0c2); background-image:none;
  border:1.5px solid #c4322a; border-radius:8px; color:#c4322a; padding:8px 6px;
  font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:19px; font-weight:700;
  aspect-ratio:2112/768; width:70%; margin:0 auto; text-shadow:none;
  box-shadow:0 2px 5px rgba(61,49,34,.14); transform:rotate(-4deg);
  transition:filter .12s ease, transform .12s ease, border-color .12s ease, border-width .12s ease;
}
body.exam-theme #stamp-tabs .mode-btn.stamp-preview-btn::after{
  content:""; position:absolute; inset:3px; border:1px solid #c4322a; border-radius:5px; pointer-events:none;
  transition:border-width .12s ease;
}
body.exam-theme #stamp-tabs .mode-btn.stamp-preview-btn.active{
  filter:brightness(1.05) saturate(1.1); border-color:#7a1712; border-width:3.5px;
  transform:rotate(-4deg) scale(1.03); box-shadow:0 3px 8px rgba(61,49,34,.28);
}
body.exam-theme #stamp-tabs .mode-btn.stamp-preview-btn.active::after{border-color:#7a1712; border-width:2px;}

/* ---- 학년·반·번호: 빈칸 채우기 ---- */
body.exam-theme .class-input-row{display:flex; gap:18px; justify-content:center; padding-top:4px;}
body.exam-theme .blank-group{display:flex; flex-direction:column; align-items:center; gap:5px;}
body.exam-theme .blank-group input{
  width:58px; border:none; border-bottom:3px dotted rgba(61,49,34,.7); border-radius:0;
  background:none; background-image:none; box-shadow:none;
  font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:26px; font-weight:700;
  text-align:center; color:var(--exam-accent); padding:4px 0;
}
body.exam-theme .blank-group input::placeholder{color:rgba(61,49,34,.35);}
body.exam-theme .blank-group input:focus{outline:none; border-bottom-color:var(--exam-accent);}
body.exam-theme .blank-label{
  font-family:"Cafe24Dongdong","Pretendard Variable",sans-serif; font-size:16px; font-weight:700; color:var(--exam-ink);
}

/* ---- CTA: 빨간펜 도장 ---- */
body.exam-theme #screen-select .cta{
  background:linear-gradient(160deg,#c0323f,#8f2530); border-color:#7a1f28; color:#fff6ef;
  box-shadow:0 10px 22px rgba(61,20,20,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
body.exam-theme #screen-select .cta::before, body.exam-theme #screen-select .cta::after{
  background:#f5e6bc; box-shadow:0 0 6px rgba(245,230,188,.5);
}

.group-tabs{display:flex; gap:8px; overflow-x:auto; flex:none; padding-bottom:2px;}
.group-tab{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:9px 13px; border-radius:10px; border:1px solid #4a4038;
  background:linear-gradient(160deg,#241f1a,#171310); color:var(--muted); font-weight:700; font-size:13px;
  cursor:pointer; white-space:nowrap;
}
.group-tab.active{
  border-color:#e8c877; color:#f5e6bc; background:linear-gradient(160deg,#3a3024,#241d16);
  box-shadow:0 0 0 2px rgba(232,200,119,.55), 0 0 16px rgba(232,200,119,.5), 0 4px 10px rgba(0,0,0,.4);
}
.group-tab-swatch{
  width:34px; height:34px; object-fit:contain; flex:none; display:block; border-radius:8px;
  transition:box-shadow .15s ease;
}
.group-tab.active .group-tab-swatch{box-shadow:0 0 0 2px rgba(232,200,119,.6), 0 0 10px rgba(232,200,119,.55);}
.group-tab-label{line-height:1.25; text-align:center;}

.pattern-tab-img{
  flex:1; min-width:0; padding:6px; border:1px solid #4a4038; border-radius:10px; overflow:hidden;
  cursor:pointer; background:linear-gradient(160deg,#241f1a,#171310); line-height:0; transition:box-shadow .15s ease, border-color .15s ease;
}
.pattern-tab-img img{width:100%; height:auto; display:block;}
.pattern-tab-img.active{
  border-color:#e8c877;
  box-shadow:0 0 0 2px rgba(232,200,119,.55), 0 0 16px rgba(232,200,119,.5), 0 4px 10px rgba(0,0,0,.4);
}

.color-tabs{display:flex; gap:8px; flex:none;}
.color-tab{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 8px; border-radius:10px; border:1px solid #4a4038;
  background:linear-gradient(160deg,#241f1a,#171310); color:var(--muted); font-weight:700; font-size:10.5px;
  cursor:pointer; white-space:normal; word-break:keep-all;
}
.color-tab.active{
  border-color:#e8c877; color:#f5e6bc; background:linear-gradient(160deg,#3a3024,#241d16);
  box-shadow:0 0 0 2px rgba(232,200,119,.55), 0 0 16px rgba(232,200,119,.5), 0 4px 10px rgba(0,0,0,.4);
}
.color-tab-swatch{
  width:44px; height:30px; border-radius:6px; border:1px solid rgba(232,200,119,.4);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.2), inset 0 -1px 2px rgba(0,0,0,.4); flex:none;
  transition:box-shadow .15s ease; display:flex; align-items:center; justify-content:center;
}
.color-tab-ink{width:16px; height:3px; border-radius:2px; box-shadow:0 0 3px rgba(0,0,0,.5);}
.color-tab.active .color-tab-swatch{
  box-shadow:inset 0 1px 2px rgba(255,255,255,.3), inset 0 -1px 2px rgba(0,0,0,.4),
    0 0 0 3px rgba(232,200,119,.65), 0 0 12px rgba(232,200,119,.55);
}
.color-tab-label{line-height:1.3; text-align:center;}

.cta{
  margin-top:2px; position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(160deg, #1c2c4a, #0a1428);
  color:#f5e6bc; border:1.5px solid #e8c877; text-align:center; letter-spacing:.02em;
  font-weight:800; font-size:15px; padding:14px 36px; border-radius:14px; cursor:pointer; flex:none;
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(232,200,119,.3);
}
.cta::before, .cta::after{
  content:""; position:absolute; top:50%; width:8px; height:8px; background:#e8c877;
  transform:translateY(-50%) rotate(45deg); border-radius:2px; box-shadow:0 0 6px rgba(232,200,119,.6);
}
.cta::before{left:14px;}
.cta::after{right:14px;}
.cta-flame{
  display:inline-block; height:34px; width:auto; object-fit:contain; margin:-10px 0;
}
.cta.is-disabled .cta-flame{opacity:.5;}
.cta.cta-image{
  background:none; border:none; padding:0; box-shadow:none; display:block; overflow:hidden;
}
.cta.cta-image::before, .cta.cta-image::after{content:none;}
.cta.cta-image img{width:100%; height:auto; display:block;}
.cta.is-disabled{opacity:.55; box-shadow:none;}
.cta.cta-travel{padding-top:10px; padding-bottom:10px; gap:12px;}
.cta-travel-icon{
  display:block; height:58px; width:58px; object-fit:contain; flex:none;
  filter:drop-shadow(0 0 6px rgba(232,200,119,.5));
}

/* ============ 만개인연부: 청실홍실 테마 (solo-theme) ============ */
body.solo-theme #screen-select{
  --solo-ink:#3a2a35; --solo-muted:#6d5866; --solo-accent:#a8763a;
  --solo-hong:#b5455f; --solo-cheong:#39507e;
  position:relative;
  background:#efe4d2 url(/static/solo-linen-bg.jpg) center/cover no-repeat;
  color:var(--solo-ink);
}
body.solo-theme #screen-select .back-btn{color:var(--solo-ink); opacity:.7;}
body.solo-theme #screen-select .select-intro{
  color:#4a3540; font-family:"Song Myung",serif; font-size:18.5px; line-height:1.6;
}
body.solo-theme #screen-select .sec-label{
  color:var(--solo-ink); font-family:"Song Myung",serif; font-size:18.5px; font-weight:400;
  text-transform:none; letter-spacing:.02em; border-bottom:1px solid rgba(58,42,53,.22); padding-bottom:5px; margin-top:10px;
}
body.solo-theme #screen-select .banner-slot{background:rgba(58,42,53,.06); color:var(--solo-muted); border-color:rgba(58,42,53,.2);}

/* ---- 컨셉 (꽃길인연/달빛인연): 레퍼런스 카드 이미지 그대로 사용 ---- */
body.solo-theme #concept-tabs.theme-tabs{gap:10px;}
body.solo-theme .concept-card-btn{
  position:relative; background:none; background-image:none;
  border:none; border-radius:12px; box-shadow:none;
  padding:4px; aspect-ratio:955/405; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease;
}
body.solo-theme .concept-card-img{width:100%; height:100%; object-fit:contain; display:block;}
body.solo-theme .concept-card-btn.active{transform:scale(1.03);}
body.solo-theme .concept-card-btn.active .concept-card-img{
  filter:drop-shadow(0 0 7px rgba(168,118,58,.55)) brightness(1.06);
}
body.solo-theme .concept-card-btn.active::after{
  content:"✓"; position:absolute; top:2px; right:4px; width:20px; height:20px;
  border-radius:50%; background:var(--solo-accent); color:#fff6ec;
  font-size:12px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(58,42,53,.3);
}

/* ---- 색상 테마: 청실/홍실 매듭 노리개 ---- */
body.solo-theme #theme-tabs .theme-tab{
  position:relative; z-index:0;
  background:linear-gradient(175deg,rgba(255,251,242,.85),rgba(240,228,205,.7));
  border:1px solid rgba(58,42,53,.16); border-radius:14px; padding:16px 8px 12px; gap:4px;
}
body.solo-theme #theme-tabs .theme-tab::before{
  content:""; position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
  width:76%; aspect-ratio:1/1; border-radius:50%; border:1px solid rgba(58,42,53,.22); z-index:-1;
}
body.solo-theme #theme-tabs .thread-swatch{
  width:82%; height:auto; aspect-ratio:520/640; object-fit:contain; border-radius:0;
  border:none; background:none; box-shadow:none; filter:drop-shadow(0 3px 5px rgba(58,42,53,.18));
}
body.solo-theme #theme-tabs .theme-tab-label{
  font-family:"Song Myung",serif; font-size:15px; color:var(--solo-ink);
}
body.solo-theme #theme-tabs .theme-tab.active{
  border-color:var(--t-foil, var(--solo-accent));
  background:linear-gradient(175deg,rgba(255,251,242,.98),rgba(245,232,205,.92));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--t-foil, var(--solo-accent)) 55%, transparent),
    0 6px 14px rgba(58,42,53,.2);
}
body.solo-theme #theme-tabs .theme-tab.active .thread-swatch{filter:drop-shadow(0 3px 7px rgba(58,42,53,.28));}

/* ---- 아트 스타일: 자수풍(스티치) vs 말랑부적풍(매끈) ---- */
body.solo-theme #style-tabs .mode-btn{
  background:linear-gradient(175deg,rgba(255,251,242,.85),rgba(240,228,205,.7)); background-image:none;
  color:var(--solo-ink); font-family:"Pretendard Variable",sans-serif; font-weight:700; font-size:14.5px;
  box-shadow:0 2px 5px rgba(58,42,53,.1); text-shadow:none;
}
body.solo-theme #style-tabs .mode-btn[data-style="jasu"],
body.solo-theme #style-tabs .mode-btn[data-style="mallang"]{
  border:1.5px solid rgba(58,42,53,.22); border-radius:20px;
}
body.solo-theme #style-tabs .mode-btn.active{
  border-color:var(--solo-accent); color:var(--solo-accent);
  box-shadow:0 2px 5px rgba(58,42,53,.1), 0 0 0 2px color-mix(in srgb, var(--solo-accent) 30%, transparent);
}

/* ---- 인연 도착 예정 시점: 나무 명패 태그 ---- */
body.solo-theme #preset-grid.mode-grid{gap:14px 10px; padding-top:6px;}
body.solo-theme .tag-btn{
  position:relative; z-index:0; background:none; background-image:none; border:none; box-shadow:none;
  padding:0; aspect-ratio:482/148; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease;
}
body.solo-theme .tag-btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url(/static/solo-tag-plaque.png) center/100% 100% no-repeat;
  filter:drop-shadow(0 4px 7px rgba(58,42,53,.28));
}
body.solo-theme .tag-btn-text{
  position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); width:100%;
  font-family:"Song Myung",serif; font-size:13.5px; font-weight:400; color:#3a2410;
  text-shadow:0 1px 1px rgba(255,240,210,.55); padding:0 9%; text-align:center; white-space:nowrap;
  box-sizing:border-box;
}
body.solo-theme .tag-btn::after{
  content:"🦋"; position:absolute; top:-11px; right:-2px; font-size:15px; transform:rotate(-8deg);
  opacity:.9; z-index:1;
}
body.solo-theme .tag-btn.active{transform:scale(1.06);}
body.solo-theme .tag-btn.active::before{
  filter:drop-shadow(0 5px 9px rgba(58,42,53,.35)) brightness(1.1) saturate(1.12);
  box-shadow:0 0 0 3px var(--solo-accent), 0 0 12px rgba(168,118,58,.6);
  border-radius:12px;
}
body.solo-theme .tag-btn.active .tag-btn-text{color:var(--solo-accent); font-weight:700;}
body.solo-theme .tag-btn.active::after{
  content:"✓"; font-size:12px; color:#fff; background:var(--solo-accent); transform:none; opacity:1;
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  top:-8px; right:-6px; text-shadow:none; box-shadow:0 2px 5px rgba(58,42,53,.4);
}
body.solo-theme .tag-btn.active .tag-btn-text{font-weight:700;}

/* ---- CTA: 레퍼런스 버튼 이미지 그대로 사용 ---- */
body.solo-theme #screen-select .cta{
  background:url(/static/solo-cta.png) center/150% 150% no-repeat;
  border:none; box-shadow:none; color:transparent; padding:0; aspect-ratio:1024/143; width:100%;
  filter:saturate(1.6) contrast(1.2) brightness(0.95);
}
body.solo-theme #screen-select .cta::before, body.solo-theme #screen-select .cta::after{content:none;}
body.solo-theme #screen-select .cta.is-disabled{opacity:.6;}

.kakao-channel-btn{
  flex:none; background:#fee500; color:#3c1e1e; border:none; text-align:center;
  font-weight:800; font-size:13px; padding:10px; border-radius:10px; cursor:pointer;
  display:block; text-decoration:none;
}

.crosslink-card{
  display:flex; align-items:center; gap:12px; flex:none;
  border:1.5px solid var(--cross-border); border-radius:14px; padding:14px 14px;
  text-decoration:none; background:linear-gradient(135deg, var(--cross-bg-a), var(--cross-bg-b));
}
.crosslink-icon{
  flex:none; width:38px; height:38px; border-radius:10px; background:var(--cross-icon-bg);
  display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.crosslink-icon img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.crosslink-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.crosslink-text .q{font-size:15px; font-weight:700; color:var(--ink); line-height:1.3;}
.crosslink-text .go{font-size:13.5px; font-weight:700; color:var(--cross-accent);}

.load-body{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 24px;}
.load-art{position:relative; width:170px; max-width:60%; border-radius:16px; overflow:hidden; box-shadow:0 12px 26px rgba(0,0,0,.5);}
.load-art img{width:100%; height:auto; display:block;}
.load-art::before{
  content:""; position:absolute; left:50%; top:27%; width:72%; height:34%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(232,200,119,.65) 0%, transparent 70%);
  animation:haloPulse 1.8s ease-in-out infinite; pointer-events:none;
}
@keyframes haloPulse{0%,100%{opacity:.45; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.18);}}
.load-sparkle{
  position:absolute; width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 8px 3px rgba(255,255,255,.9), 0 0 16px 6px rgba(232,200,119,.6);
  left:40%; top:63%; animation:sparkleMove 1.4s ease-in-out infinite; pointer-events:none;
}
@keyframes sparkleMove{
  0%,100%{ left:36%; top:66%; opacity:.9; }
  50%{ left:50%; top:57%; opacity:.35; }
}
@media (prefers-reduced-motion: reduce){ .load-art::before, .load-sparkle{animation:none;} }
.load-text{font-size:14px; font-weight:700;}
.load-sub{font-size:11px; color:var(--muted);}

.result-hero{
  margin:0 -16px; flex:none; min-height:70vh; min-height:70dvh;
  background:var(--ad-bg); position:relative;
  display:flex; align-items:center; justify-content:center;
}
/* overflow:hidden을 일부러 뺐다 - flex 컨테이너가 실제 기기에서 콘텐츠 높이만큼
   기대대로 커지지 않으면(브라우저마다 중첩 flex+overflow 처리가 달라 신뢰 못 함)
   overflow:hidden이 있으면 그 차이만큼 조용히 잘려서 cover랑 똑같이 보이는 버그가
   난다. border-radius도 부모 대신 이미지 자체에 걸어서, overflow 속성과 무관하게
   모서리만 둥글게 하고 내용은 절대 안 잘리도록 한다. */
.result-hero img{width:100%; height:auto; display:block; border-radius:14px;}
.result-hero img.reveal{animation:revealDown 2.5s cubic-bezier(.22,.9,.32,1) both;}
@keyframes revealDown{
  from{ clip-path:inset(0 0 100% 0); }
  to{ clip-path:inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){ .result-hero img.reveal{animation:none;} }

.interp-toggle{
  display:flex; align-items:center; justify-content:center; gap:7px; flex:none;
  background:linear-gradient(160deg,#332a1a,#1c1712); border:1.5px solid #e8c877; border-radius:22px;
  color:#f5e6bc; font-size:14px; font-weight:800;
  padding:10px 20px; cursor:pointer; margin-top:2px;
  box-shadow:0 0 0 0 rgba(232,200,119,.5), 0 4px 12px rgba(0,0,0,.35);
  animation:interpGlow 2s ease-in-out infinite;
}
.interp-toggle.is-open{animation:none; box-shadow:0 4px 12px rgba(0,0,0,.35);}
@keyframes interpGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,200,119,.45), 0 4px 12px rgba(0,0,0,.35); }
  50%{ box-shadow:0 0 0 6px rgba(232,200,119,0), 0 4px 12px rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce){ .interp-toggle{animation:none;} }
.interp-arrow{display:inline-block; transition:transform .2s ease; font-size:12px;}
.interp-toggle.is-open .interp-arrow{transform:rotate(180deg);}
.interp-text{
  font-size:13px; line-height:1.6; color:rgba(240,232,216,.85); margin:0; flex:none;
  padding:10px 12px; border:1px solid rgba(232,200,119,.25); border-radius:10px;
  background:rgba(232,200,119,.06); white-space:pre-line;
}

.story{
  font-size:16.5px; line-height:1.4; margin:0; flex:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.catline{display:flex; align-items:flex-end; gap:8px; flex:none;}
.cat-avatar{
  flex:none; width:38px; height:38px; border-radius:50%; overflow:hidden;
  background:var(--paper); border:1.5px solid rgba(232,200,119,.55);
}
.cat-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.bubble{
  position:relative; flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:3px 11px 11px 11px; padding:8px 11px;
  font-size:12px; line-height:1.5; color:rgba(240,232,216,.82);
}
.bubble::before{
  content:""; position:absolute; left:-6px; bottom:8px; width:0; height:0;
  border-style:solid; border-width:0 6px 6px 0;
  border-color:transparent rgba(255,255,255,.04) transparent transparent;
}
.bubble b{color:#e8c877; font-weight:700;}
.disclaimer{font-size:11.5px; color:var(--muted); line-height:1.35; margin:0; padding-top:5px; border-top:1px solid var(--border); flex:none;}

/* 2순위: 보조 액션 (언락 CTA보다 작게) */
.btnrow{display:flex; gap:6px; flex:none;}
.btnrow .b{
  flex:1; text-align:center; font-size:11px; font-weight:700; padding:8px 4px; border-radius:9px;
  border:1.5px solid var(--ink); color:var(--ink); text-decoration:none; background:none; cursor:pointer;
}

.other-talismans-btn{display:block; flex:none; margin:4px auto 0; width:57%;}
.other-talismans-img{width:100%; height:auto; display:block;}

/* 일반 배너 placeholder (입력화면 1개, 결과화면 1개) - 실 SDK 붙기 전 중립 자리표시 */
.banner-slot{
  flex:none; height:30px; border:1px solid var(--ad-border); background:var(--ad-bg);
  color:var(--ad-ink); border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:600;
}
/* 애드핏 실 유닛(320x50) - 로드 전엔 ins가 display:none이라 높이가 0이 되어 레이아웃이
   튀는 걸 막기 위해 래퍼에 고정 높이를 준다. 애드핏은 광고 외관(모서리 둥글림, 잘림 등)
   임의 변형을 금지하므로 .banner-slot의 border-radius/overflow를 명시적으로 없앤다. */
.banner-slot--adfit{
  height:50px; border:none; background:none; padding:0;
  border-radius:0; overflow:visible; display:flex; justify-content:center;
}
.banner-slot--adfit .kakao_ad_area{margin:0 auto;}

/* Depth 4 감사화면 / Depth 4' 재시도 인터스티셜 - 공통 컴포넌트 */
.thanks-body{
  flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; gap:8px; text-align:center; padding:24px 20px 8px;
}
.thanks-icon{font-size:34px;}
.thanks-title{font-family:var(--font-display); font-size:23px; font-weight:400; margin:0; letter-spacing:.01em;}
.thanks-sub{font-size:14.5px; color:var(--muted); margin:0;}
.thanks-preview{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; justify-content:center;}
.thanks-preview button{
  padding:0; border:1.5px solid var(--border); border-radius:8px; background:none; cursor:pointer; overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.thanks-preview button:active{transform:scale(.96);}
.thanks-preview img{
  width:64px; height:114px; object-fit:cover; display:block;
}
.thanks-preview{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; justify-content:center;}
.thanks-preview button{
  padding:0; border:1.5px solid var(--border); border-radius:8px; background:none; cursor:pointer; overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.thanks-preview button:active{transform:scale(.96);}
.thanks-preview img{
  width:64px; height:114px; object-fit:cover; display:block;
}

.interstitial-block{
  flex:none; position:relative; border:1px solid var(--ad-border); background:var(--ad-bg);
  border-radius:10px; height:96px; display:flex; align-items:center; justify-content:center;
  color:var(--ad-ink); font-size:11px; font-weight:600; margin:6px 0;
}
.interstitial-label{
  position:absolute; top:6px; left:8px; font-size:8.5px; font-weight:700; color:var(--ad-ink);
  border:1px solid var(--ad-ink); border-radius:4px; padding:1px 4px;
}
/* 애드핏 인터스티셜 실 유닛(300x250 / 320x480). 모서리를 임의로 자르지 않도록
   border-radius는 배너와 동일하게 0으로 두지만, overflow는 hidden으로 둔다 -
   네이티브/캐러셀형 크리에이티브가 선언한 박스보다 훨씬 크게 렌더링되는 경우가 있어서,
   visible로 두면 아래 콘텐츠(다른 스타일 추천, CTA 버튼) 위로 광고가 넘쳐서 덮어버린다.
   hidden은 "광고 자체를 잘라서 변형"하는 게 아니라 "레이아웃 밖으로 못 넘치게" 막는
   용도라 애드핏 정책과는 무관하다. overflow:hidden으로도 여전히 덮이는 경우가 있었는데
   - 크리에이티브 내부가 position:fixed(뷰포트 기준)를 쓰면 overflow:hidden을 그냥
   뚫고 나간다. transform을 하나 걸어두면 CSS 스펙상 이 박스가 그 자손들의 containing
   block이 되어 fixed도 강제로 이 박스 기준으로 가둬진다(시각적으로는 아무 효과 없음).*/
.interstitial-block--adfit{
  height:250px; width:300px; border:none; background:none; padding:0;
  border-radius:0; overflow:hidden; margin:6px auto; transform:translateZ(0);
}
.interstitial-block--adfit-lg{height:480px; width:320px;}

.footer-links{
  flex:none; display:flex; justify-content:center; gap:14px; padding-top:2px;
}
.footer-links .footer-link{padding-top:0;}

.cta:disabled{opacity:.5; cursor:not-allowed;}
a.cta{display:block; text-decoration:none;}

/* ============ 연리지부: 스티치 프레임 테마 (couple-theme) ============ */
body.couple-theme #screen-select{position:relative;}
body.couple-theme #screen-select::before{
  content:""; position:absolute; inset:6px; z-index:0; pointer-events:none;
  border:2px dashed rgba(232,200,119,.4); border-radius:18px;
}
body.couple-theme #screen-select > *{position:relative; z-index:1;}
body.couple-theme #screen-select .select-intro{
  color:#e8c877; font-family:"Black Han Sans","Pretendard Variable",sans-serif; font-weight:400;
  font-size:16.5px; line-height:1.55;
}

/* ---- 부적 종류: 레퍼런스 카드 이미지 그대로 사용 ---- */
body.couple-theme #talisman-list{gap:10px;}
body.couple-theme #talisman-list .region-card{
  border:none; box-shadow:none; background-color:transparent;
  background-size:100% 100%; background-repeat:no-repeat; background-position:center;
  aspect-ratio:770/116; padding:0; border-radius:14px; margin:0;
  transition:filter .12s ease, transform .12s ease;
}
body.couple-theme #talisman-list .region-card-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}
body.couple-theme #talisman-list .region-card.on{
  filter:brightness(1.15) saturate(1.15); transform:scale(1.015);
}
body.couple-theme #talisman-list .color-meaning{
  margin:0 4px; font-size:13px; line-height:1.5; color:var(--t-accent); font-weight:700; flex:none;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
}
body.couple-theme #talisman-list .region-card.on + .color-meaning{
  max-height:50px; opacity:1; margin:-2px 4px 2px;
}

/* ---- 아트 스타일 / 사귄 시작일 모드: 레퍼런스 버튼 이미지 그대로 사용 ---- */
body.couple-theme #style-tabs.mode-grid-3{grid-template-columns:repeat(2,1fr);}
body.couple-theme #style-tabs .mode-btn,
body.couple-theme #date-mode-tabs .mode-btn{
  border:none; box-shadow:none; background-color:transparent; background-image:none;
  background-image:url(/static/couple-style-inactive.png);
  background-size:100% 100%; background-repeat:no-repeat; background-position:center;
  aspect-ratio:378/95; color:#3a2f22; font-weight:800; text-shadow:none;
}
body.couple-theme #style-tabs .mode-btn.active,
body.couple-theme #date-mode-tabs .mode-btn.active{
  background-image:url(/static/couple-style-active.png); color:#3a2410;
}

/* ---- 사귄 시작일: 년/월/일 드롭다운 ---- */
body.couple-theme .date-select{border-style:dashed; border-width:2px;}

/* ---- CTA: 클로버 매듭 장식 (텍스트가 바뀔 수 있어 이미지 대신 CSS로) ---- */
body.couple-theme #screen-select .cta{
  background:linear-gradient(160deg,#1c2c4a,#0a1428); border:1.5px solid #e8c877; color:#f5e6bc;
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(232,200,119,.3);
}
body.couple-theme #screen-select .cta::before,
body.couple-theme #screen-select .cta::after{
  content:"🍀"; background:none; box-shadow:none; transform:translateY(-50%); font-size:15px; border-radius:0;
}
body.couple-theme #screen-select .cta.is-disabled{opacity:.55;}

/* ============ 생일운수부 (birthday-theme): 프리미엄 디지털 리추얼 오브제 ============ */
body.birthday-theme{--gold:#D4AF37;}
body.birthday-theme #screen-select{
  position:relative; background:#151515; color:#ece7de;
}
body.birthday-theme #screen-select::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='%23D4AF37'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
body.birthday-theme #screen-select > *{position:relative; z-index:1;}
body.birthday-theme #screen-select .select-intro{color:#c9c2b4;}
body.birthday-theme #screen-select .sec-label{color:#ece7de;}

/* ---- 부적 종류 카드: 한지 질감 + 내부 그레이디언트 + 워터마크 문양 ---- */
body.birthday-theme #talisman-list .region-card{
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--t-accent) 9%, transparent), transparent 55%),
    linear-gradient(160deg, #1c1a17, #141310);
  box-shadow:inset 0 0 34px color-mix(in srgb, var(--t-accent) 10%, transparent);
  transition:box-shadow .3s ease, border-color .3s ease;
}
body.birthday-theme #talisman-list .region-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)' fill='%23f0e8d8'/%3E%3C/svg%3E");
}
body.birthday-theme #talisman-list .region-card::after{
  content:attr(data-motif); position:absolute; right:-6px; bottom:-14px; z-index:0; pointer-events:none;
  font-size:76px; line-height:1; opacity:.07; filter:grayscale(1) contrast(1.2);
  transition:opacity .5s ease-in-out;
}
body.birthday-theme #talisman-list .region-card-text{position:relative; z-index:1;}
body.birthday-theme #talisman-list .region-card-title{color:color-mix(in srgb, var(--t-accent) 70%, #f5f0e6);}
body.birthday-theme #talisman-list .region-card-sub{
  font-family:"Gowun Batang","Nanum Myeongjo",serif; font-weight:400; letter-spacing:.02em;
  color:#a89f8e;
}
body.birthday-theme #talisman-list .region-card.on{
  border-color:color-mix(in srgb, var(--t-accent) 60%, transparent);
  box-shadow:inset 0 0 34px color-mix(in srgb, var(--t-accent) 16%, transparent),
    0 0 22px 3px color-mix(in srgb, var(--t-accent) 40%, transparent);
}
/* 하나라도 선택되면: 선택 안 된 카드는 문양을 숨기고, 선택된 카드만 더 진하게 보여준다 */
body.birthday-theme #talisman-list.has-selection .region-card::after{opacity:0;}
body.birthday-theme #talisman-list.has-selection .region-card.on::after{opacity:.16;}

/* 부적 의미 한 줄 - 해당 카드가 선택됐을 때만 그 카드 바로 아래에 펼쳐진다 */
body.birthday-theme #talisman-list .region-card-meaning{
  display:block; font-size:11px; line-height:1.5; color:#a89f8e;
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  transition:max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
body.birthday-theme #talisman-list .region-card.on .region-card-meaning{
  max-height:40px; opacity:1; margin-top:4px;
  color:color-mix(in srgb, var(--t-accent) 55%, #ece7de);
}

/* ---- 아트 스타일 버튼 ---- */
body.birthday-theme .style-subgroup-label{
  color:#8a8375; font-size:14px; font-weight:700; margin:2px 0 -2px;
}
body.birthday-theme #style-tabs-dark{margin-top:2px;}
body.birthday-theme #style-tabs .mode-btn,
body.birthday-theme #style-tabs-dark .mode-btn{
  background:#F3F1EA; background-image:none; border:1px solid transparent;
  color:#3a352c; text-shadow:none; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
body.birthday-theme #style-tabs .mode-btn.active,
body.birthday-theme #style-tabs-dark .mode-btn.active{
  border-color:var(--gold); color:#5c4a1a;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent),
    0 0 10px color-mix(in srgb, var(--gold) 45%, transparent), 0 2px 6px rgba(0,0,0,.3);
}

/* ---- 생일 월/일: 미니멀 언더라인 셀렉트 ---- */
body.birthday-theme #birthday-input-field .date-select{
  appearance:none; -webkit-appearance:none; background:none; background-image:none;
  border:none; border-bottom:1px solid rgba(255,255,255,.28); border-radius:0;
  color:#ece7de; box-shadow:none; padding:9px 4px; font-weight:700;
}
body.birthday-theme #birthday-input-field .date-select:focus{outline:none; border-bottom-color:var(--gold);}
/* 네이티브 드롭다운 목록은 OS가 흰 배경으로 그리는데, 셀렉트 자체의 밝은 글자색(#ece7de)이
   옵션에도 상속되면서 흰 배경에 흰 글자가 되어 하얗게만 보이는 문제 - 옵션 색만 별도 지정 */
body.birthday-theme #birthday-input-field .date-select option{
  color:#2a2a2a; background:#fff;
}

/* ---- CTA: 진사홍 + 낙관 아이콘 ---- */
body.birthday-theme #screen-select .cta{
  background:linear-gradient(160deg,#B5342A,#7d2019); border-color:var(--gold); color:#fbeee2;
  box-shadow:0 10px 24px rgba(90,20,15,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
body.birthday-theme #screen-select .cta.is-disabled{opacity:.55;}
body.birthday-theme .cta-seal-icon{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border:1px solid rgba(251,238,226,.65); border-radius:3px; font-size:13px; font-weight:700;
  transform:rotate(-6deg); flex:none;
}

/* ---- 카톡 공유 - 보낸 사람 이름 모달 ---- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal-backdrop.hidden{display:none;}
.modal-card{
  width:100%; max-width:340px; background:#1c1712; border:1px solid var(--border); border-radius:16px;
  padding:20px; display:flex; flex-direction:column; gap:12px;
}
.modal-title{font-size:15px; font-weight:800; color:var(--ink); margin:0; text-align:center;}
.modal-input{
  border:1px solid var(--border); border-radius:10px; padding:11px 14px; font-size:15px;
  background:var(--ad-bg); color:var(--ink);
}
.modal-input::placeholder{color:var(--muted);}
.modal-btnrow{display:flex; gap:8px;}
.modal-btnrow .b{flex:1;}
.modal-btnrow .cta{flex:2; padding:11px 12px; font-size:13.5px;}