/* Hallmark · macrostructure: slide deck (scroll storytelling) · tone: plain, factual · anchor hue: brand blue (neon.css tokens) */
/* 상세페이지 슬라이드형: 한 화면에 말 한 마디, 핵심 글자 강조. 색은 neon.css 변수를 그대로 씀 */
.deck{ --hl:color-mix(in srgb, var(--accent) 34%, transparent); max-width:1080px; margin:0 auto; padding:0 20px 40px; }
.slide{ min-height:calc(100svh - 53px); display:flex; flex-direction:column; justify-content:center; gap:22px; padding:56px 0; border-bottom:1px solid var(--line-soft); scroll-margin-top:53px; }
.slide:last-child{ border-bottom:0; }
.slide h1,.slide h2{ margin:0; font-size:clamp(30px,5.2vw,58px); line-height:1.16; font-weight:700; letter-spacing:-0.035em; color:var(--text); overflow-wrap:anywhere; word-break:keep-all; max-width:20ch; }
.slide h1{ font-size:clamp(34px,6.4vw,72px); }
.slide .lead{ margin:0; font-size:clamp(17px,2vw,21px); line-height:1.7; color:var(--text-2); max-width:42em; word-break:keep-all; }
.slide .lead b{ color:var(--text); font-weight:600; }
.slide .note{ margin:0; font-size:15px; line-height:1.7; color:var(--text-2); max-width:46em; word-break:keep-all; }
.slide a:not(.btn){ color:var(--link); }

/* 형광펜 강조: 화면에 들어오면 왼쪽에서 오른쪽으로 칠해짐 */
mark.hl{ color:inherit; background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 88%/0% 42%; padding:0 .06em; transition:background-size .9s var(--ease-out,cubic-bezier(.2,.8,.2,1)) .25s; }
.on mark.hl, .no-anim mark.hl{ background-size:100% 42%; }
.say{ margin:0; font-size:clamp(24px,3.6vw,40px); line-height:1.35; font-weight:650; letter-spacing:-0.03em; color:var(--text); word-break:keep-all; max-width:24ch; }
.say .blue{ color:var(--accent); }

/* 나타나기: 아래에서 살짝 올라옴 */
/* 움직임은 그림(질문·비교·단계)에만. 글은 처음부터 보이고 강조선만 칠해짐 */
.js-deck :is(.ask,.vs,.chips,.steps li).rv{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 90ms); }
.js-deck .on :is(.ask,.vs,.chips,.steps li).rv{ opacity:1; transform:none; }

/* 첫 장: PC에서는 왼쪽 제목, 오른쪽 손님 질문 장면 */
@media (min-width:900px){
  .slide.hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-areas:"t a" "l a"; column-gap:56px; align-content:center; }
  .slide.hero h1{ grid-area:t; align-self:end; } .slide.hero .lead{ grid-area:l; align-self:start; } .slide.slide.hero h1{ font-size:clamp(34px,4.6vw,60px); max-width:none; }
.hero .ask{ grid-area:a; align-self:center; }
}
.hero .ask{ padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--panel); gap:18px; }
.hero .bubble{ font-size:clamp(18px,2.2vw,24px); }
.hero .pick{ font-size:16px; padding:10px 16px; }
/* 손님 질문 말풍선 + 타자 효과 */
.ask{ display:flex; flex-direction:column; gap:12px; max-width:520px; }
.bubble{ align-self:flex-start; padding:14px 18px; border-radius:18px 18px 18px 4px; background:var(--panel-2); border:1px solid var(--line); font-size:clamp(17px,2vw,20px); color:var(--text); }
.bubble .typed{ display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:0; border-right:2px solid var(--accent); }
.on .bubble .typed, .no-anim .bubble .typed{ max-width:22em; transition:max-width 1.6s steps(16,end) .3s; }
.picks{ display:flex; flex-wrap:wrap; gap:8px; }
.pick{ padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--text-2); font-size:15px; background:var(--panel); }
.pick.me{ border-color:var(--accent); color:var(--text); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); font-weight:600; }
.js-deck .pick{ opacity:0; transform:scale(.92); transition:opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); transition-delay:calc(1.9s + var(--i,0) * 160ms); }
.js-deck .on .pick{ opacity:1; transform:none; }

/* 목록 vs AI 답 */
.vs{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; }
.vs-box{ border:1px solid var(--line); border-radius:20px; background:var(--panel); padding:20px; display:flex; flex-direction:column; gap:8px; }
.vs-box h3{ margin:0 0 6px; font-size:17px; font-weight:650; color:var(--text); }
.vs-box .bar{ height:12px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); }
.vs-box .bar:nth-child(n+6){ opacity:.45; } .vs-box .bar:nth-child(n+8){ opacity:.2; }
.vs-box .pk{ padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); color:var(--text-2); font-size:14.5px; }
.vs-box .pk.me{ border-color:var(--accent); color:var(--text); font-weight:600; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.chips li{ padding:9px 15px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--text); font-size:15.5px; font-weight:550; }

/* 단계 카드 */
.steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; counter-reset:st; }
.steps li{ counter-increment:st; border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:18px 16px; display:flex; flex-direction:column; gap:8px; }
.steps li::before{ content:counter(st); font-size:34px; font-weight:750; line-height:1; color:var(--accent); letter-spacing:-0.04em; }
.steps b{ font-size:18px; font-weight:650; color:var(--text); }
.steps span{ font-size:14.5px; line-height:1.6; color:var(--text-2); word-break:keep-all; }
.steps li:last-child{ border-color:var(--accent); }

/* 체크 목록 + 취소선 */
.checks{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; max-width:46em; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:clamp(16px,1.8vw,18.5px); line-height:1.6; color:var(--text); word-break:keep-all; }
.checks li::before{ content:""; flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.checks li.warn::before{ background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px no-repeat; border:1px solid var(--line); }
s.cut{ text-decoration:none; background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/0% 2px; transition:background-size .7s cubic-bezier(.2,.8,.2,1) .6s; color:var(--text-2); }
.on s.cut, .no-anim s.cut{ background-size:100% 2px; }

/* 가격 카드 */
.prices{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.price{ border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:20px 18px; display:flex; flex-direction:column; gap:8px; }
.price h3{ margin:0; font-size:16px; font-weight:600; color:var(--text-2); }
.price .won{ font-size:clamp(24px,2.6vw,30px); font-weight:750; letter-spacing:-0.03em; color:var(--text); }
.price p{ margin:0; font-size:14px; line-height:1.6; color:var(--text-2); word-break:keep-all; }
.price.main{ border-color:var(--accent); }

/* 원칙 2x2 */
.rules{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.rules li{ border:1px solid var(--line); border-radius:20px; background:var(--panel); padding:22px 20px; display:flex; flex-direction:column; gap:8px; }
.rules b{ font-size:clamp(20px,2.4vw,26px); font-weight:700; letter-spacing:-0.03em; color:var(--text); }
.rules span{ font-size:15px; line-height:1.65; color:var(--text-2); word-break:keep-all; }

/* 자주 묻는 질문 */
.qa{ display:flex; flex-direction:column; gap:10px; max-width:46em; }
.qa details{ border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.qa summary{ cursor:pointer; padding:18px 20px; font-size:17.5px; font-weight:600; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; color:var(--accent); font-weight:700; }
.qa details[open] summary::after{ content:"–"; }
.qa details p{ margin:0; padding:0 20px 18px; font-size:15.5px; line-height:1.75; color:var(--text-2); }
.qa summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:16px; }

.cta-row{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{ white-space:nowrap; }

/* 위쪽 진행 막대 */
.deck-prog{ position:fixed; left:0; top:0; height:3px; width:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); z-index:20; }

@media (max-width:860px){
  .steps{ grid-template-columns:minmax(0,1fr); } .steps li{ flex-direction:row; align-items:baseline; flex-wrap:wrap; column-gap:12px; } .steps span{ flex-basis:100%; }
  .prices{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .slide{ min-height:auto; padding:48px 0; }
  .rules,.prices{ grid-template-columns:minmax(0,1fr); }
  .vs{ gap:10px; } .vs-box{ padding:14px; } .vs-box .pk{ font-size:13px; padding:9px 10px; }
}
@media (prefers-reduced-motion:reduce){
  .js-deck .rv,.js-deck .pick{ opacity:1; transform:none; transition:none; }
  mark.hl{ background-size:100% 42%; transition:none; }
  s.cut{ background-size:100% 2px; transition:none; }
  .bubble .typed{ max-width:22em; transition:none; border-right:0; }
  .deck-prog{ display:none; }
}

html:has(.deck),html:has(.deck) body{ overflow-x:clip; }
html:has(.deck){ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html:has(.deck){ scroll-behavior:auto; } }