@import url("tokens.css");
/* 사진과 짧은 문장을 한 쌍으로 둔다. 격자는 바깥 여백에만 쓴다. */
.in { max-width:1180px; margin:0 auto; padding:0 20px; }
.top { background:var(--black); color:#fff; padding:6px 0 24px; }
.back { display:block; line-height:44px; font-size:14px; font-weight:700; }
h1 { font-size:28px; line-height:38px; letter-spacing:-.6px; font-weight:800; margin:4px 0 6px; }
.top p { font-size:16px; line-height:25px; color:#d4d4d4; margin:0 0 16px; }
.pick { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pick a { background:var(--yellow); color:#111; padding:13px 14px; font-size:14px; line-height:20px; }
.pick strong { display:block; font-size:18px; line-height:26px; font-weight:800; }

.apply { background:var(--yellow); padding:26px 0 28px; border-bottom:3px solid var(--ink); scroll-margin-top:56px; }
.apply h2 { font-size:24px; line-height:32px; font-weight:800; margin:0 0 14px; }
.apply ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.apply li { position:relative; background:#fff; border:2px solid var(--ink); padding:12px; font-size:14px; line-height:20px; color:var(--sub); }
.apply li > b { position:absolute; left:-2px; top:-2px; width:28px; height:28px; line-height:28px; text-align:center; background:var(--ink); color:#fff; font-size:15px; }
.apply strong { display:block; color:var(--ink); font-size:16px; line-height:23px; font-weight:800; text-wrap:balance; }
.art { display:flex; align-items:center; justify-content:center; height:62px; margin-bottom:8px; background:var(--mint-soft); }
.art em { font-style:normal; font-size:16px; font-weight:800; background:#fff; border:2px solid var(--ink); padding:3px 9px; }
.art .chat { background:#ffe14a; border-radius:12px 12px 12px 2px; }
.art .ok { background:var(--teal); color:#fff; border-color:var(--teal); }
.art .ok::before { content:"✓ "; }
.art .dl::before { content:"↓ "; }

.toc { position:sticky; top:0; z-index:5; display:flex; gap:6px; align-items:center; background:#fff; padding:8px 20px; overflow-x:auto; scrollbar-width:none; border-bottom:2px solid var(--ink); }
.tg { display:contents; }
.tg span { display:none; }
.toc a { flex:none; font-size:14px; line-height:20px; font-weight:700; padding:9px 10px; border:1px solid #d8d4c8; background:#fff; }
.toc a b { margin-right:4px; color:var(--teal); }
.toc a.now { background:var(--ink); color:#fff; border-color:var(--ink); }
.toc a.now b { color:var(--yellow); }
.toc .toc-apply { background:var(--yellow); border:2px solid var(--ink); font-weight:800; }

main { background:#fff; padding:0 20px 30px; }
main section { padding:26px 0 8px; scroll-margin-top:56px; }
.band { margin:30px -20px 0; padding:14px 20px; background:var(--black); color:#fff; display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline; }
.band:first-child { margin-top:0; }
.band strong { font-size:20px; line-height:28px; font-weight:800; color:var(--yellow); }
.band span { font-size:14px; color:#d4d4d4; }
.sh { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.sh > b { flex:none; width:40px; height:40px; line-height:40px; text-align:center; font-size:20px; font-weight:800; background:var(--mint); }
.sh h2 { font-size:14px; line-height:20px; font-weight:700; color:var(--teal); margin:0; }
.sh p { font-size:21px; line-height:29px; font-weight:800; letter-spacing:-.3px; margin:0; }
.lead2 { font-size:16px; line-height:26px; margin:0 0 12px; }
em { font-style:normal; font-weight:800; background:linear-gradient(transparent 62%,var(--yellow) 62%); }

.shot { position:relative; display:block; width:100%; max-width:200px; margin:0 auto; aspect-ratio:600/1300; background:#fff; border:2px solid var(--ink); border-radius:14px; overflow:hidden; }
.shot img { display:block; width:100%; height:100%; object-fit:contain; object-position:top; cursor:zoom-in; }
.tap { position:absolute; width:20%; aspect-ratio:1; transform:translate(-50%,-50%); border:3px solid var(--red); border-radius:50%; pointer-events:none; animation:tap 1.6s ease-in-out infinite; }
.num { position:absolute; width:26px; height:26px; line-height:22px; transform:translate(-50%,-50%); background:var(--yellow); border:2px solid var(--ink); border-radius:50%; text-align:center; font-size:14px; font-style:normal; font-weight:800; pointer-events:none; }
@keyframes tap { 50% { transform:translate(-50%,-50%) scale(1.15); opacity:.6; } }
@media (prefers-reduced-motion:reduce) { .tap { animation:none; } }

.cards { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cards li { display:flex; flex-direction:column; gap:10px; background:var(--mint-soft); padding:12px; }
.cards p { display:flex; gap:8px; margin:0; font-size:15px; line-height:22px; font-weight:600; text-wrap:balance; }
.cards p b { flex:none; width:24px; height:24px; line-height:24px; text-align:center; background:var(--ink); color:#fff; font-size:13px; }
.cards li:last-child:nth-child(odd) { grid-column:1 / -1; flex-direction:row; align-items:center; }
.cards li:last-child:nth-child(odd) .shot { flex:0 0 46%; max-width:46%; margin:0; }

.anno { display:grid; grid-template-columns:42% 1fr; gap:14px; align-items:center; background:#fff8cf; padding:12px; margin-bottom:12px; }
.anno ol { list-style:none; margin:0; padding:0; counter-reset:n; display:grid; gap:10px; }
.anno li { counter-increment:n; font-size:14px; line-height:21px; }
.anno strong { display:flex; gap:6px; font-size:16px; line-height:23px; font-weight:800; text-wrap:balance; }
.anno strong::before { content:counter(n); flex:none; width:22px; height:22px; line-height:18px; margin-top:.5px; text-align:center; font-size:13px; font-weight:800; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); }

.strip { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.strip li { background:var(--mint-soft); padding:12px 8px; text-align:center; font-size:14px; line-height:20px; font-weight:700; }
.strip b { display:block; width:26px; height:26px; line-height:26px; margin:0 auto 6px; background:var(--ink); color:#fff; }
.legend { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.legend li { border:2px solid var(--ink); padding:9px 6px; text-align:center; font-size:14px; line-height:20px; }
.legend strong { display:block; font-size:16px; line-height:23px; font-weight:800; }
.tips { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px; }
.tips li { padding:9px 12px; background:var(--paper); font-size:15px; line-height:23px; }
.keys { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.keys li { border:2px solid var(--ink); padding:10px; font-size:14px; line-height:20px; }
.keys b { display:inline-block; min-width:30px; height:30px; line-height:30px; padding:0 6px; text-align:center; background:var(--ink); color:#fff; border-radius:50%; font-size:14px; margin-right:6px; }
.keys strong { font-size:16px; font-weight:800; }
.mock { display:flex; flex-direction:column; gap:6px; padding:10px 8px; background:#f2f3f5; font-size:12px; line-height:16px; font-weight:700; }
.mock span { display:block; }
.m-t { font-size:13px; font-weight:800; margin-bottom:4px; }
.m-r, .m-s { background:#fff; padding:9px 8px; border-radius:8px; }
.m-r.on { outline:3px solid var(--red); }
.m-s { display:flex !important; justify-content:space-between; align-items:center; }
.m-s i { width:30px; height:16px; border-radius:9px; background:var(--mint); }
.m-b { align-self:flex-end; background:var(--mint); padding:6px 14px; border-radius:8px; }
.fix { margin:0 0 12px; display:grid; gap:8px; }
.fix div { background:var(--mint-soft); padding:12px 14px; }
.fix dt { font-size:17px; line-height:24px; font-weight:800; }
.fix dd { margin:2px 0 0; font-size:15px; line-height:23px; }

@media (min-width:600px) {
  .in { padding:0 28px; }
  h1 { font-size:34px; line-height:44px; }
  .pick { max-width:520px; }
  .apply ol { grid-template-columns:repeat(4,1fr); }
  .toc { padding:8px 28px; }
  main { padding:0 28px 40px; }
  .band { margin-left:-28px; margin-right:-28px; padding-left:28px; padding-right:28px; }
  .cards.c3 { grid-template-columns:repeat(3,1fr); }
  .cards.c4 { grid-template-columns:repeat(4,1fr); }
  .cards li:last-child:nth-child(odd) { grid-column:auto; flex-direction:column; align-items:stretch; }
  .cards li:last-child:nth-child(odd) .shot { flex:none; max-width:200px; margin:0 auto; }
  .cards.c2 { grid-template-columns:1fr 1fr; }
  .keys { grid-template-columns:repeat(3,1fr); }
  .fix { grid-template-columns:1fr 1fr; }
  .anno { grid-template-columns:230px 1fr; gap:24px; padding:18px; }
  .anno .shot { max-width:230px; }
  .anno li { font-size:15px; line-height:23px; }
  .anno strong { font-size:18px; }
  .sh p { font-size:24px; line-height:32px; }
}
@media (min-width:960px) {
  .wrap { max-width:1180px; margin:0 auto; padding:24px 28px 48px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:start; }
  .toc { position:sticky; top:16px; flex-direction:column; align-items:stretch; gap:10px; padding:12px; overflow:visible; border:2px solid var(--ink); box-shadow:4px 4px 0 #d8d4c8; }
  .tg { display:block; }
  .tg span { display:block; font-size:13px; line-height:18px; font-weight:800; color:var(--teal); margin-bottom:3px; }
  .toc a { display:block; border:0; padding:5px 6px; font-size:15px; line-height:21px; }
  .toc .toc-apply { text-align:center; border:2px solid var(--ink); padding:9px; font-size:16px; }
  main { border:1px solid #e0dccf; padding:0 32px 32px; }
  .band { margin-left:-32px; margin-right:-32px; padding-left:32px; padding-right:32px; }
  main section { scroll-margin-top:12px; }
  .apply { scroll-margin-top:0; }
}
.shot.short { aspect-ratio:600/560; }
.anno .short img { object-fit:cover; }
.cards.c2 li { flex-direction:column; }
.cards.c2 .short { max-width:none; }
@media (min-width:600px) { .anno .shot.short { max-width:230px; } }
.keys li { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; align-content:center; }
.keys span span { display:inline-block; }
.keys b { grid-row:1 / 3; margin:0; }
.keys strong { display:block; }
/* 신청 4단계: 차례로 나타난 뒤 한 장씩 돌아가며 강조한다 */
@media (prefers-reduced-motion:no-preference) {
  .apply li { animation:step-in .4s ease-out both, step-on 6.4s ease-in-out infinite; }
  .art em { animation:step-chip 6.4s ease-in-out infinite; }
  .apply li:nth-child(1), .apply li:nth-child(1) em { animation-delay:0s, .8s; }
  .apply li:nth-child(1) em { animation-delay:.8s; }
  .apply li:nth-child(2) { animation-delay:.12s, 2.4s; }
  .apply li:nth-child(2) em { animation-delay:2.4s; }
  .apply li:nth-child(3) { animation-delay:.24s, 4s; }
  .apply li:nth-child(3) em { animation-delay:4s; }
  .apply li:nth-child(4) { animation-delay:.36s, 5.6s; }
  .apply li:nth-child(4) em { animation-delay:5.6s; }
}
@keyframes step-in { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } }
@keyframes step-on { 0%,25%,100% { transform:none; box-shadow:none; } 6%,19% { transform:translateY(-4px); box-shadow:5px 5px 0 var(--ink); } }
@keyframes step-chip { 0%,25%,100% { transform:none; } 7% { transform:scale(1.18) rotate(-2deg); } 14%,19% { transform:scale(1.08); } }
.art em { color:var(--ink); background-image:none; }
.art .chat { background-color:var(--yellow); }
.art .ok { color:#fff; background-color:var(--teal); }
.art em:not(.chat):not(.ok) { background-color:#fff; }
.get { display:block; margin-top:14px; background:var(--ink); color:#fff; text-align:center; font-size:18px; line-height:26px; font-weight:800; padding:14px; }
main .get { margin:0 0 12px; }
.apply li { display:block; }
/* 앱 내려받기 버튼: 강한 줌인 */
html { overflow-x:clip; }
.apply { overflow:clip; }
@media (min-width:600px) { .get { max-width:480px; margin-left:auto; margin-right:auto; } main .get { margin:0 auto 12px; } }
@media (prefers-reduced-motion:no-preference) {
  .get { animation:get-zoom 1.3s ease-in-out infinite; }
}
@keyframes get-zoom { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(17,17,17,.45); } 45% { transform:scale(1.09); box-shadow:0 0 0 10px rgba(17,17,17,0); } }
/* 목차 이동: 눌렀을 때 절 제목이 바로 보이게 한다 */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
main section, .apply { scroll-margin-top:66px; }
@media (min-width:960px) { main section, .apply { scroll-margin-top:16px; } }