/*
 * linkbiseo-v4.css — 링크비서 page layout on top of home-system.css.
 * Every value here is a home token (home-system.css :root) or a size measured from the
 * home components named in each block. No app (iOS) tokens.
 */

.fill { position: absolute; inset: 0; }
.nowrap { white-space: nowrap; }
.b { font-weight: 500; }

/* Korean leading: the home scale is set for Latin (t-hero 1.09, t-h2 1.09). Hangul needs
   more room or stacked lines touch; sizes/weights/tracking stay the home's. */
.t-hero { line-height: 46px; }
.t-h2 { line-height: 40px; }
@media (width >= 48rem) {
  .t-hero { line-height: 72px; }
  .t-h2 { line-height: 56px; }
}
@media (width < 48rem) {
  .hero-title br, .hero-lead br, .t-h2 br { display: none; }
}
.logo-mark { width: 28px; height: 28px; border-radius: 7px; }

/* ---------- ① Hero (components/site/hero.tsx) ---------- */
.hero { position: relative; overflow-x: clip; padding: 8px; }
@media (width >= 48rem) { .hero { padding: 16px; } }
.hero-rel { position: relative; }
.hero-shell { position: absolute; inset-inline: 0; top: 0; overflow: hidden; border-radius: var(--radius-xl); pointer-events: none; }
.hero-ink { position: relative; isolation: isolate; }
.hero-navwrap { padding-inline: 12px; }
.hero-nav { margin-inline: auto; max-width: 1248px; }
@media (width >= 48rem) { .hero-navwrap { padding-inline: 24px; } }

.hero-copy { margin-inline: auto; display: flex; max-width: 1248px; flex-direction: column; align-items: flex-start; padding: 48px 20px 0; }
@media (width >= 48rem) { .hero-copy { align-items: center; padding: 96px 24px 0; text-align: center; } }
.hero-title { margin-top: 20px; max-width: 820px; }
@media (width >= 48rem) { .hero-title { margin-top: 24px; } }
.hero-lead { margin-top: 16px; max-width: 720px; font-size: 17px; line-height: 27px; text-wrap: balance; }
.hero-lead br { display: none; } /* balance gives three even lines instead of a dangling last line */
@media (width >= 48rem) { .hero-lead { margin-top: 20px; font-size: 19px; line-height: 30px; } }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
@media (width >= 48rem) { .hero-actions { margin-top: 36px; } }
.hero-link { display: inline-flex; height: 44px; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; text-underline-offset: 4px; transition: color 150ms var(--ease-ui), opacity 150ms var(--ease-ui); }
.hero-link:hover { text-decoration-line: underline; }

.hero-demo { position: relative; margin: 40px auto 0; max-width: 1288px; padding-inline: 4px; }
@media (width >= 48rem) { .hero-demo { margin-top: 64px; padding-inline: 32px; } }

/* Mini share sheet (how-it-works 01; ShareView.swift: 취소 · 카드로 만들 자료 · 저장) */
.mini-share { border-radius: var(--radius-md); background: #fff; padding: 12px; text-align: left; }
.share-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 28px; font-size: 13px; line-height: 20px; }
.share-bar b { font-weight: 500; }
.save-btn { justify-self: end; display: inline-flex; height: 26px; align-items: center; border-radius: 9999px; background: var(--primary); padding-inline: 11px; font-size: 12px; font-weight: 500; color: var(--primary-foreground); transition: scale 150ms var(--ease-ui), opacity 150ms var(--ease-ui); }
.save-btn.is-pressed { scale: 0.96; opacity: 0.8; }
.share-link { position: relative; margin-top: 10px; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); padding: 8px; box-shadow: inset 0 0 0 1px var(--hairline); }
.share-tile { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 8px; background: var(--muted); color: var(--muted-foreground); }
.share-tile .ico { width: 15px; height: 15px; }
.share-text { min-width: 0; }
.share-text b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.share-text small { display: block; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.memo-label { margin-top: 12px; font-size: 13px; line-height: 20px; font-weight: 500; }
.memo-label span { font-weight: 400; color: var(--muted-foreground); }
.memo-box { margin-top: 6px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgb(9 11 12 / 0.1); padding: 9px 12px; }
.memo-grid { display: grid; font-size: 15px; line-height: 22px; }
.memo-ghost, .memo-live { grid-area: 1 / 1; }
.memo-ghost { visibility: hidden; }
.memo-caret { display: none; margin-left: 1px; width: 1.5px; height: 1.05em; translate: 0 2px; border-radius: 9999px; background: var(--foreground); vertical-align: baseline; }
.is-focused .memo-caret { display: inline-block; }

/* Notification (real text from the app's 9:00 reminder) */
.notif { position: relative; display: flex; max-width: 380px; gap: 10px; border-radius: var(--radius-md); background: #fff; padding: 10px 12px; text-align: left; }
.notif img { width: 28px; height: 28px; flex: none; border-radius: 7px; }
.notif-app { font-size: 11px; line-height: 16px; color: var(--muted-foreground); }
.notif-app span::before { content: "· "; }
.notif-title { font-size: 13px; line-height: 19px; font-weight: 500; }
.notif-body { font-size: 13px; line-height: 19px; color: rgb(9 11 12 / 0.7); }

.ltile {
  position: relative; display: flex; min-height: 88px; flex-direction: column; justify-content: flex-end; overflow: hidden;
  border-radius: var(--radius-sm); padding: 10px; background: var(--tile);
  box-shadow: 0 0 0 0.5px rgb(9 11 12 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
  --pop-from: 0.86;
}
.ltile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 70%, rgb(255 255 255 / 0.75), transparent 70%); }
.ltile > * { position: relative; }
.ltile b { font-size: 13px; line-height: 18px; font-weight: 500; }
.ltile small { margin-top: 2px; font-size: 11px; line-height: 14px; color: rgb(9 11 12 / 0.55); }
.ltile--lav { --tile: linear-gradient(160deg, #c6bdff, #efecff); }
.ltile--blue { --tile: linear-gradient(160deg, #8fc0ff, #e6f1ff); }
.ltile--peri { --tile: linear-gradient(160deg, #aab4ff, #eef0ff); }
.ltile--mint { --tile: linear-gradient(160deg, #a8e6c1, #eefaf2); }
.ltile--sky { --tile: linear-gradient(160deg, #9fdcef, #e8f7fc); }
.ltile--pink { --tile: linear-gradient(160deg, #ffc2dc, #fff0f6); }

/* ---------- Sections (components/site/section-heading.tsx) ---------- */
.section--first { border-top: 0; }
.sh .sh-lead .fill-line { color: var(--foreground); }

/* 문제: DM scene in a silk card, docked like the home's app fragments */
.problem-card { margin: 40px auto 0; max-width: 718px; }
@media (width >= 48rem) { .problem-card { margin-top: 56px; } }
.problem-media { height: 340px; }
@media (width >= 48rem) { .problem-media { height: 360px; } }
.dm { position: absolute; inset-inline: 0; bottom: 0; margin-inline: auto; width: min(380px, 86%); border-radius: var(--radius-md) var(--radius-md) 0 0; background: #fff; padding: 14px 14px 18px; }
.dm-head { margin-bottom: 4px; border-bottom: 1px solid var(--hairline); padding-bottom: 10px; text-align: center; font-size: 13px; font-weight: 500; }
.dm-row { margin-top: 8px; display: flex; }
.dm-row--me { justify-content: flex-end; }
.dm-bubble { max-width: 82%; border-radius: 16px; background: #f1f2f4; padding: 8px 12px; font-size: 13.5px; line-height: 20px; }
.dm-row--me .dm-bubble { background: var(--brand); color: #fff; }
.dm-link { display: flex; max-width: 82%; align-items: center; gap: 10px; border-radius: 14px; background: #fff; padding: 8px 12px 8px 8px; box-shadow: inset 0 0 0 1px rgb(9 11 12 / 0.08); }
.dm-note { margin-top: 12px; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* 약속: three silk cards (components/site/solutions.tsx) */
.promise-grid, .how-row { margin: 40px -16px 0; display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; }
.promise-grid > li { width: 84%; flex-shrink: 0; scroll-snap-align: start; }
@media (width >= 48rem) {
  .promise-grid { margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; }
  .promise-grid > li { width: auto; }
}
.art-media { height: 256px; }
@media (width >= 48rem) { .art-media { height: 300px; } }
.art-panel { position: absolute; right: 0; bottom: 0; left: 28px; border-top-left-radius: var(--radius-md); background: #fff; }
.art-toast { position: absolute; top: 24px; left: 20px; z-index: 10; display: flex; max-width: 80%; align-items: center; gap: 10px; border-radius: var(--radius-md); border-top-left-radius: var(--radius-xs); background: #fff; padding: 9px 12px; }
@media (width >= 48rem) { .art-toast { top: 28px; left: 24px; } }
.toast-ico { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 7px; background: var(--brand-soft); color: var(--link); }
.toast-ico .ico { width: 13px; height: 13px; }
.toast-ico--app { background: none; }
.toast-ico--app img { width: 24px; height: 24px; border-radius: 6px; }
.wf-stack { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 6px; }
.wf { display: block; height: 7px; max-width: 100%; flex: none; border-radius: 9999px; background: #e7e8ea; }
.wf--light { background: #f0f1f2; }
.wf--dark { background: rgb(9 11 12 / 0.5); }
.wf--brand { background: rgb(43 76 255 / 0.45); height: 6px; }
.ap-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; color: var(--muted-foreground); }
.ap-head .ico { width: 14px; height: 14px; }
.ap-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hairline); padding: 9px 14px; }
.ap-row:last-of-type { border-bottom: 0; }
.ap-row--new { --pop-from: 0.9; }
.ap-tile { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 6px; background: #eef0f3; }
.ap-tile--brand { background: var(--brand-soft); color: var(--link); }
.ap-tile .ico { width: 12px; height: 12px; }
.ap-time { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hairline); padding: 6px 14px 10px; }
.ap-clock { font-family: var(--font-heading); font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: -0.02em; }
.ap-toggle { position: relative; width: 30px; height: 18px; border-radius: 9999px; background: var(--success); }
.ap-toggle span { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.18); }
.ap-lines { display: grid; gap: 7px; padding: 4px 14px 12px; }
.ap-mine { margin: 0 10px 8px; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); background: var(--brand-soft); padding: 9px 10px; --pop-from: 0.92; }
.ap-check { display: grid; width: 18px; height: 18px; flex: none; place-items: center; border-radius: 9999px; background: var(--link); color: #fff; }
.ap-check .ico { width: 10px; height: 10px; stroke-width: 3; }

/* ---------- ② How it works (components/site/how-it-works.tsx) ---------- */
.how-line { position: relative; margin-top: 56px; display: none; height: 12px; }
@media (width >= 48rem) { .how-line { display: block; } }
.how-track, .how-line-fill { position: absolute; top: 50%; left: 0; height: 1px; width: calc(75% + 15px); background: rgb(9 11 12 / 0.1); }
.how-line-fill { background: var(--brand); transform-origin: left; transform: scaleX(var(--fill, 1)); }
.how-nodes { display: grid; height: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.how-nodes > span { position: relative; display: flex; align-items: center; }
.how-node { position: relative; width: 9px; height: 9px; border-radius: 9999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgb(9 11 12 / 0.18); }
.how-node-fill { position: absolute; inset: 0; border-radius: 9999px; background: var(--brand); }
.how-row > li { width: 80%; flex-shrink: 0; scroll-snap-align: start; }
@media (width >= 48rem) {
  .how-row { margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; }
  .how-row > li { width: auto; }
}
.how-media { display: grid; height: 208px; place-items: center; }
@media (width >= 48rem) { .how-media { height: 240px; } }
.how-media--dark { background: var(--panel); }
.card-num--dark { color: rgb(255 255 255 / 0.5); }
.dark-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 120%, rgb(43 76 255 / 0.34), transparent 60%), radial-gradient(60% 60% at 100% 0%, rgb(43 76 255 / 0.18), transparent 70%); }
.dark-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.3; }

.mini-share { width: 86%; padding: 10px; }
.mini-share .share-bar { height: 24px; font-size: 12px; }
.mini-share .save-btn { height: 22px; padding-inline: 9px; font-size: 11px; }
.mini-share .share-link { margin-top: 8px; padding: 6px; gap: 8px; }
.mini-share .share-tile { width: 28px; height: 28px; }
.mini-share .share-text b { font-size: 13px; line-height: 18px; }
.mini-share .share-text small { font-size: 11px; line-height: 14px; }
.mini-share .memo-label { margin-top: 8px; font-size: 12px; line-height: 16px; }
.mini-share .memo-box { padding: 7px 10px; }
.mini-share .memo-grid { font-size: 13px; line-height: 19px; }

.kcard { position: relative; z-index: 1; width: 86%; overflow: hidden; border-radius: var(--radius-md); padding: 12px; text-align: left; background: radial-gradient(60% 40% at 18% 12%, rgb(140 123 255 / 0.55), transparent 70%), linear-gradient(165deg, #c6bdff 0%, #efecff 60%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6); }
.kchip { display: inline-flex; height: 22px; align-items: center; border-radius: 9999px; background: rgb(255 255 255 / 0.55); padding-inline: 8px; font-size: 11px; font-weight: 500; color: #5643c4; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.75); }
.ktitle { margin-top: 8px; font-family: var(--font-heading); font-size: 16px; line-height: 22px; font-weight: 500; }
.knext { position: relative; margin-top: 7px; border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.62); padding: 6px 9px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8); }
.knext-label { font-size: 10.5px; line-height: 14px; font-weight: 500; color: #5643c4; }
.knext-text { margin-top: 1px; font-size: 12px; line-height: 17px; font-weight: 500; }

.lock { width: 86%; text-align: center; }
.lock-time { font-family: var(--font-heading); font-size: 44px; line-height: 48px; font-weight: 450; letter-spacing: -0.03em; color: rgb(9 11 12 / 0.22); }
.lock .notif { margin-top: 12px; max-width: none; }

.mini-lib { width: 86%; border-radius: var(--radius-md); background: #fff; padding: 10px; text-align: left; }
.mini-lib-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mini-lib-bar b { font-size: 14px; font-weight: 500; }
.ai-badge { display: inline-flex; height: 22px; align-items: center; gap: 4px; border-radius: 9999px; background: var(--success-soft); padding-inline: 8px; font-size: 11px; font-weight: 500; color: var(--success-foreground); white-space: nowrap; }
.ai-badge .ico { width: 11px; height: 11px; stroke-width: 2.5; }
.mini-lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-lib-grid .ltile { min-height: 58px; padding: 8px; }
.mini-lib-grid .ltile b { font-size: 11.5px; line-height: 15px; }

/* ---------- 다른 점 / 필요한 것 (components/site/principles.tsx) ---------- */
.pair-grid { margin: 48px auto 0; display: grid; max-width: 860px; gap: 32px; }
@media (width >= 40rem) { .pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (width >= 48rem) { .pair-grid { margin-top: 64px; } }
.diag-media { height: 220px; background: #fff; }
@media (width >= 64rem) { .diag-media { height: 260px; } }
.stage { position: absolute; top: 50%; left: 50%; width: 400px; height: 220px; translate: -50% -50%; scale: 0.82; }
@media (width >= 40rem) { .stage { scale: 0.64; } }
@media (width >= 64rem) { .stage { scale: 1; } }
.stage > * { position: absolute; }
.stage-lines { inset: 0; width: 400px; height: 220px; overflow: visible; fill: none; }
.ln-dash { stroke: rgb(9 11 12 / 0.22); stroke-width: 1.25; stroke-dasharray: 3 4; }
.ln-brand { stroke: var(--brand); stroke-width: 1.5; opacity: 0.7; }
.node-doc { display: grid; width: 84px; gap: 7px; border-radius: 10px; background: #fff; padding: 11px 10px; }
.node-doc--short { width: 76px; }
.lane-label { margin-top: -4px; font-size: 11px; line-height: 14px; color: var(--muted-foreground); white-space: nowrap; }
.lane-label--us { color: var(--link); font-weight: 500; }
.node-card { width: 152px; border-radius: 12px; padding: 7px; background: linear-gradient(165deg, #c6bdff, #efecff); box-shadow: 0 0 0 0.5px rgb(9 11 12 / 0.1), 0 8px 18px -10px rgb(86 67 196 / 0.45); }
.node-card p { border-radius: 8px; background: rgb(255 255 255 / 0.68); padding: 5px 8px 7px; }
.node-card p + p { margin-top: 4px; }
.node-card p span:first-child { display: block; margin-bottom: 4px; font-size: 10px; line-height: 13px; font-weight: 500; color: #5643c4; }
.node-card .wf { height: 5px; }
.node-pile { width: 96px; height: 92px; }
.node-pile span { position: absolute; display: grid; width: 72px; height: 52px; place-items: center; border-radius: 10px; background: #fff; color: var(--muted-foreground); }
.node-pile span:nth-child(1) { left: 12px; top: 0; }
.node-pile span:nth-child(2) { left: 6px; top: 13px; }
.node-pile span:nth-child(3) { left: 0; top: 26px; }
.node-pile .ico { width: 16px; height: 16px; }
.node-wait { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9999px; border: 1px dashed rgb(9 11 12 / 0.25); background: #fff; color: var(--muted-foreground); }
.node-wait .ico { width: 16px; height: 16px; }
.node-bell { display: inline-flex; height: 28px; align-items: center; gap: 6px; border-radius: 9999px; background: #fff; padding: 0 12px 0 10px; font-size: 12px; font-weight: 500; }
.node-bell .ico { width: 14px; height: 14px; color: var(--link); }
.node-ai { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 9999px; background: #fff; color: var(--link); }
.node-ai .ico { width: 18px; height: 18px; }
.node-cap { width: 72px; text-align: center; font-size: 11px; line-height: 14px; color: var(--muted-foreground); }
.orbit-ring { width: 180px; height: 180px; border-radius: 9999px; border: 1px dashed rgb(9 11 12 / 0.15); background: radial-gradient(closest-side, #f6f8ff, rgb(246 248 255 / 0)); }
.ring-label { left: 200px !important; translate: -50% 0; border-radius: 9999px; background: #fff; padding: 0 8px; font-size: 11px; line-height: 16px; color: var(--muted-foreground); }
.node-dev { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #fff; color: rgb(9 11 12 / 0.8); }
.node-dev--lg { width: 52px; height: 52px; }
.node-dev .ico { width: 20px; height: 20px; }
.node-dev--lg .ico { width: 24px; height: 24px; }
.orbit { width: 0; height: 0; }
.ochip { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9999px; background: #fff; color: rgb(9 11 12 / 0.6); }
.ochip .ico { width: 13px; height: 13px; stroke-width: 2; }
.link-line { height: 0; border-top: 1.5px dashed rgb(9 11 12 / 0.2); }
.ochip-text { display: inline-flex; height: 24px; align-items: center; border-radius: 9999px; background: #fff; padding-inline: 10px; font-size: 11px; font-weight: 500; white-space: nowrap; }
/* Packets travel only while the art is on screen; static = no packets. */
.packet { top: 0; left: 0; width: 7px; height: 7px; border-radius: 9999px; background: var(--brand); box-shadow: 0 0 0 3px rgb(43 76 255 / 0.15); opacity: 0; offset-rotate: 0deg; }
.packet-a { offset-path: path("M112 110 H150 V150 H236"); }
.packet-b { offset-path: path("M112 110 H150 V150 H226"); }
.packet-c { offset-path: path("M120 110 H280"); }
.live-art[data-live="play"] .packet { animation: packet 3.2s cubic-bezier(0.45, 0, 0.55, 1) 0.8s infinite; }
.live-art[data-live="play"] .packet-c { animation-name: packet-pingpong; animation-duration: 4.4s; }
@keyframes packet { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 80% { offset-distance: 100%; opacity: 1; } 90%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes packet-pingpong { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 42% { offset-distance: 100%; opacity: 1; } 50% { offset-distance: 100%; opacity: 0; } 58% { offset-distance: 100%; opacity: 1; } 92% { offset-distance: 0%; opacity: 1; } 100% { offset-distance: 0%; opacity: 0; } }
.live-art[data-live="play"] .orbit { animation: orbit 40s linear infinite; }
.live-art[data-live="play"] .orbit .orbit-chip { animation: orbit 40s linear infinite reverse; }

/* Comparison caption (the old table's three columns as a caption list) */
.vs { padding-inline: 4px; }
@media (width >= 48rem) { .vs { padding-inline: 6px; } }
.vs-title { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; text-wrap: wrap; }
.vs dl { margin-top: 10px; display: grid; gap: 10px; }
.vs dl > div { border-left: 2px solid var(--border); padding-left: 12px; }
.vs dt { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.vs dd { font-size: 16px; line-height: 24px; color: var(--muted-foreground); }
.vs .vs-us { border-left-color: var(--brand); }
.vs .vs-us dt { color: var(--link); font-weight: 500; }
.vs .vs-us dd { color: var(--foreground); }

/* ---------- 자주 묻는 질문 ---------- */
.faq { margin: 40px auto 0; max-width: 718px; border-top: 1px solid var(--border); }
@media (width >= 48rem) { .faq { margin-top: 48px; } }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; list-style: none; font-size: 16px; line-height: 24px; font-weight: 500; outline: none; transition: color 150ms var(--ease-ui); }
@media (width >= 48rem) { .faq-item summary { font-size: 17px; line-height: 26px; } }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: rgb(9 11 12 / 0.7); }
.faq-item summary:focus-visible { box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); border-radius: var(--radius-xs); }
.faq-ico { width: 18px; height: 18px; color: var(--muted-foreground); transition: rotate 200ms var(--ease-ui); }
.faq-item[open] .faq-ico { rotate: 45deg; }
.faq-item p { padding: 0 32px 18px 0; font-size: 16px; line-height: 27px; color: var(--muted-foreground); }
.faq-item p + p { margin-top: -8px; }
.js .faq-item[open] > p { animation: status-in 200ms var(--ease-ui) both; }
@media (width < 48rem) { .faq-item p { padding-right: 0; } }

/* ---------- ⑧ Closing CTA + form (components/site/contact.tsx) ---------- */
.beta-section { border-top: 1px solid var(--hairline); padding: 48px 12px 24px; }
@media (width >= 48rem) { .beta-section { padding: 96px 24px; } }
.beta-banner { position: relative; isolation: isolate; scroll-margin-top: 80px; overflow: hidden; border-radius: var(--radius-lg); padding: 48px 10px 10px; }
@media (width >= 48rem) { .beta-banner { padding: 96px 32px 48px; } }
.beta-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-shimmer-clip { overflow: hidden; }
.cta-shimmer { position: absolute; top: 0; bottom: 0; left: -50%; width: 50%; }
.beta-head { padding-inline: 14px; text-align: center; }
@media (width >= 48rem) { .beta-head { padding-inline: 0; } }
.beta-head .t-h2 { margin-inline: auto; max-width: 680px; }
.beta-lead { margin: 12px auto 0; max-width: 460px; font-size: 18px; line-height: 28px; text-wrap: balance; color: rgb(9 11 12 / 0.7); }
.beta-card { position: relative; margin: 32px auto 0; max-width: 640px; border-radius: var(--radius-lg); background: #fff; padding: 16px; text-align: left; box-shadow: 0 0 0 1px rgb(9 11 12 / 0.06), 0 24px 48px -28px rgb(20 32 140 / 0.55); }
@media (width >= 48rem) { .beta-card { margin-top: 48px; padding: 28px; } }

.form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 20px 12px; }
@media (width >= 40rem) { .form-row { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.field { display: grid; min-width: 0; gap: 8px; }
fieldset.field { margin: 0; border: 0; padding: 0; }
fieldset.field legend { margin-bottom: 8px; padding: 0; }
.label .opt { font-weight: 400; color: var(--muted-foreground); }
.label { line-height: 20px; }
.helper { font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.helper.is-error { color: var(--destructive); }
.options { display: grid; gap: 8px; }
@media (width >= 40rem) { .options { grid-template-columns: 1fr 1fr; } }
.option { position: relative; display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-sm); background: #fff; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--input); cursor: pointer; transition: box-shadow 150ms var(--ease-ui), background-color 150ms var(--ease-ui); }
.option:hover { background: var(--subtle); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.radio { position: relative; margin-top: 2px; width: 18px; height: 18px; flex: none; border-radius: 9999px; box-shadow: inset 0 0 0 1.5px rgb(9 11 12 / 0.25); background: #fff; transition: box-shadow 150ms var(--ease-ui); }
.radio::after { content: ""; position: absolute; inset: 4px; border-radius: 9999px; background: var(--foreground); scale: 0; transition: scale 200ms var(--ease-reveal); }
.option__title, .option__desc { display: block; }
.option__title { font-size: 15px; line-height: 22px; font-weight: 500; }
.option__desc { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--muted-foreground); }
.option:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 1px rgb(9 11 12 / 0.4), 0 1px 3px rgb(0 0 0 / 0.08); }
.option:has(input:checked) .radio { box-shadow: inset 0 0 0 1.5px var(--foreground); }
.option:has(input:checked) .radio::after { scale: 1; }
.option:has(input:focus-visible) { box-shadow: inset 0 0 0 1px rgb(9 11 12 / 0.4), 0 0 0 3px rgb(115 115 115 / 0.4); }
.options[aria-invalid="true"] .option { box-shadow: inset 0 0 0 1px rgb(198 42 42 / 0.6); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.consent input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--foreground); }
.consent input[aria-invalid="true"] { outline: 2px solid rgb(198 42 42 / 0.5); outline-offset: 1px; }
.submit-row { display: flex; flex-direction: column-reverse; gap: 12px; }
.submit-row p { text-align: center; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
@media (width >= 40rem) { .submit-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .submit-row p { text-align: left; } }
.submit-btn { width: 100%; }
@media (width >= 40rem) { .submit-btn { width: auto; min-width: 160px; } }
.preview-message { border-radius: var(--radius-sm); background: var(--muted); padding: 12px 16px; font-size: 14px; line-height: 22px; }
.preview-message.is-error { background: rgb(198 42 42 / 0.08); color: var(--destructive); animation: t-shake 280ms linear; }
@media (prefers-reduced-motion: reduce) { .preview-message.is-error { animation: none; } }

/* ---------- Footer (components/site/footer.tsx) ---------- */
.site-footer { border-top: 0; padding: 8px 16px 32px; }
@media (width >= 48rem) { .site-footer { padding: 16px 24px 56px; } }
.foot-phone { padding: 32px 0; font-size: 14px; }
.foot-inline { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.foot-inline a, .foot-nav a { font-weight: 500; }
.foot-cols { display: none; }
@media (width >= 48rem) {
  .foot-phone { display: none; }
  .foot-cols { display: grid; grid-template-columns: 1.6fr 3fr; gap: 24px; padding: 56px 0; font-size: 14px; line-height: 20px; }
}
.foot-tag { margin-top: 12px; max-width: 300px; color: var(--muted-foreground); }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-h { color: var(--muted-foreground); }
.foot-nav ul { margin-top: 12px; display: grid; gap: 10px; }
.foot-legal { border-top: 1px solid var(--border); padding-top: 20px; font-size: 13px; color: var(--muted-foreground); }
@media (width >= 48rem) { .foot-legal { padding-top: 24px; font-size: 14px; } }
.footer-mark { padding-bottom: 0.06em; letter-spacing: -0.04em; }

@media (prefers-reduced-motion: reduce) {
  .faq-ico { transition: none; }
  .js .faq-item[open] > p { animation: none; }
  .packet { display: none; }
}

/* =====================================================================
 * v5 (2026-10-27): iPhone app as the hero + detail pass.
 * Page = home tokens. Inside the phone = the app's own tokens (docs/design/ds.css:
 * zinc greys, kind colours), because that part IS the app.
 * ===================================================================== */
@font-face { font-family: "Pretendard App"; src: url("./fonts/pretendard-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard App"; src: url("./fonts/pretendard-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Pretendard App"; src: url("./fonts/pretendard-600.woff") format("woff"); font-weight: 600 700; font-display: swap; }

/* Shell height = home's (923px at 1440): the phone overhangs a little more than the home window
   (208 vs 168) so the sky keeps the home's height and the gradient lands on the same pixels. */
.hero { --hero-overhang: 164px; }
@media (width >= 48rem) { .hero { --hero-overhang: 264px; } .t-hero { line-height: 68px; } }
@media (width >= 64rem) { .hero { --hero-overhang: 208px; } }

/* ---------- Phone stage (replaces the desktop window) ---------- */
.phone-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "phone phone" "l r" "now now"; gap: 14px 6px; margin-inline: auto; max-width: 1224px; }
.iphone { grid-area: phone; justify-self: center; zoom: 0.86; }
.hs-col { display: flex; gap: 6px; }
.hs-col--l { grid-area: l; }
.hs-col--r { grid-area: r; }
.step-now { grid-area: now; text-align: center; font-size: 15px; line-height: 22px; font-weight: 500; }
@media (width >= 48rem) { .iphone { zoom: 1; } .phone-stage { max-width: 640px; } }
@media (width >= 64rem) {
  .phone-stage { max-width: 1224px; grid-template-columns: minmax(0, 1fr) 272px minmax(0, 1fr); grid-template-areas: "l phone r"; column-gap: 72px; align-items: start; }
  .hs-col { flex-direction: column; gap: 14px; padding-top: 118px; }
  .hs-col--l { align-items: flex-end; }
  .hs-col--r { align-items: flex-start; }
  .step-now { display: none; }
}

/* Step captions: glass cards on the sky (home: hero badge glass + .raised hairline) */
.hs-btn {
  position: relative; display: grid; flex: 1; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 10px;
  border-radius: var(--radius-md); background: rgb(9 11 12 / 0.04); padding: 9px 10px 10px; text-align: left; outline: none;
  transition: background-color 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui), scale 150ms var(--ease-ui);
}
.hs-num { font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--muted-foreground); }
.hs-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.hs-bar { grid-column: 1 / -1; display: block; height: 2px; overflow: hidden; border-radius: 9999px; background: rgb(9 11 12 / 0.08); }
.hs-bar i { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.hs-btn[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 0.5px rgb(9 11 12 / 0.12), 0 1px 3px rgb(0 0 0 / 0.08); }
.hs-btn[aria-pressed="true"] .hs-num { color: var(--link); }
.hs-btn[aria-pressed="true"] .hs-bar i { transform: scaleX(1); }
.hs-btn.is-run .hs-bar i { animation: hs-fill var(--dur, 3s) linear both; }
@keyframes hs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hs-btn:hover { background: rgb(9 11 12 / 0.07); }
.hs-btn[aria-pressed="true"]:hover { background: #fff; }
.hs-btn:active { scale: 0.98; }
.hs-btn:focus-visible, .demo-pause:focus-visible { box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); }
@media (width >= 64rem) {
  .hs-btn { flex: none; width: min(100%, 272px); padding: 14px 16px 12px; gap: 10px 10px; background: rgb(255 255 255 / 0.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 0 0 0.5px rgb(9 11 12 / 0.08); }
  .hs-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 15px; line-height: 22px; font-weight: 500; color: rgb(9 11 12 / 0.62); transition: color 150ms var(--ease-ui); }
  .hs-btn:hover { background: rgb(255 255 255 / 0.72); }
  .hs-btn[aria-pressed="true"], .hs-btn[aria-pressed="true"]:hover { background: rgb(255 255 255 / 0.9); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgb(9 11 12 / 0.12), 0 12px 24px -12px rgb(16 28 110 / 0.28); }
  .hs-btn[aria-pressed="true"] .hs-title { color: var(--foreground); }
  /* connector to the phone */
  .hs-btn::after { content: ""; position: absolute; top: 50%; width: 44px; height: 1px; background: rgb(255 255 255 / 0.9); transition: background-color 150ms var(--ease-ui); }
  .hs-col--l .hs-btn::after { right: -58px; }
  .hs-col--r .hs-btn::after { left: -58px; }
  .hs-btn[aria-pressed="true"]::after { background: rgb(43 76 255 / 0.5); }
}
.demo-pause { position: relative; display: grid; width: 34px; height: 34px; flex: none; place-items: center; align-self: center; border-radius: 9999px; color: var(--muted-foreground); background: rgb(9 11 12 / 0.04); outline: none; transition: color 150ms var(--ease-ui), background-color 150ms var(--ease-ui), scale 150ms var(--ease-ui); }
.demo-pause:hover { color: var(--foreground); background: rgb(9 11 12 / 0.07); }
.demo-pause:active { scale: 0.96; }
.demo-pause .ico { width: 14px; height: 14px; }
.demo-pause [data-icon="play"] { position: absolute; translate: 1px 0; } /* optical centre of the triangle */
@media (width >= 64rem) {
  .demo-pause { align-self: flex-start; margin-left: 2px; background: rgb(255 255 255 / 0.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 0 0 0.5px rgb(9 11 12 / 0.08); }
  .demo-pause:hover { background: rgb(255 255 255 / 0.8); }
}

/* ---------- iPhone frame: outer radius 52 = screen 43 + bezel 9 ---------- */
.iphone {
  --a-fg: #09090b; --a-muted: #71717a; --a-border: #e4e4e7; --a-bg-muted: #f4f4f5; --a-primary: #18181b;
  position: relative; width: 272px; padding: 9px; border-radius: 52px;
  background: linear-gradient(150deg, #34373e 0%, #15171b 45%, #2a2d33 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 0 0 2.5px #0c0d10, 0 0 0 0.5px rgb(9 11 12 / 0.35),
    0 40px 70px -24px rgb(16 28 110 / 0.42), 0 14px 28px -14px rgb(16 28 110 / 0.28);
  font-family: "Pretendard App", -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--a-fg);
  text-align: left; word-break: keep-all;
}
.iphone::before, .iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #23262b; }
.iphone::before { left: -2.5px; top: 104px; height: 26px; box-shadow: 0 44px 0 0 #23262b, 0 90px 0 0 #23262b; }
.iphone::after { right: -2.5px; top: 150px; height: 70px; }
.iphone-screen { position: relative; height: 550px; overflow: hidden; border-radius: 43px; background: #fff; isolation: isolate; }
.island { position: absolute; top: 9px; left: 50%; z-index: 40; width: 76px; height: 22px; translate: -50% 0; border-radius: 11px; background: #000; }
.iphone .ico { width: 14px; height: 14px; stroke-width: 2; }

.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; scale: 1.015; transition: opacity 420ms var(--ease-ui), scale 520ms var(--ease-reveal), visibility 0s linear 420ms; }
.phone-stage[data-scene="1"] .scr-share, .phone-stage[data-scene="2"] .scr-card, .phone-stage[data-scene="3"] .scr-lock, .phone-stage[data-scene="4"] .scr-lib {
  opacity: 1; visibility: visible; scale: 1; transition: opacity 420ms var(--ease-ui), scale 520ms var(--ease-reveal), visibility 0s;
}
.sb { position: relative; z-index: 2; display: flex; height: 38px; align-items: center; justify-content: space-between; padding: 3px 20px 0 28px; font-size: 12px; font-weight: 600; }
.sb--light { color: #fff; }
.sb-icons { display: flex; align-items: center; gap: 4px; }
.sb-icons svg { width: 15px; height: 10px; fill: currentColor; }
.sb-batt { position: relative; width: 21px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.9; }
.sb-batt i { position: absolute; inset: 2px 5px 2px 2px; border-radius: 1.5px; background: currentColor; }

/* App primitives (ds.css: Button / IconTile / Chip / Callout) */
.a-btn { display: inline-flex; height: 26px; align-items: center; justify-content: center; gap: 4px; border-radius: 8px; background: var(--a-primary); padding: 0 10px; font-size: 11.5px; font-weight: 500; color: #fafafa; white-space: nowrap; transition: scale 150ms var(--ease-ui), opacity 150ms var(--ease-ui); }
.a-btn .ico { width: 12px; height: 12px; }
.a-btn--ghost { background: transparent; color: var(--a-fg); }
.a-btn--outline { background: #fff; color: var(--a-fg); box-shadow: inset 0 0 0 1px var(--a-border); }
.a-btn--icon { width: 28px; padding: 0; background: #fff; color: var(--a-fg); box-shadow: inset 0 0 0 1px var(--a-border); }
.a-btn--lg { flex: 1; height: 34px; border-radius: 10px; font-size: 12.5px; }
.a-btn.is-pressed { scale: 0.96; opacity: 0.85; }
.a-tile { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: 8px; background: var(--a-bg-muted); color: var(--a-muted); }
.a-two { min-width: 0; }
.a-two b { display: block; font-size: 12px; line-height: 16px; font-weight: 500; }
.a-two small { display: block; font-size: 10.5px; line-height: 14px; color: var(--a-muted); }

/* 01 share */
.dm-app { position: absolute; inset: 0; overflow: hidden; background: #fff; transform-origin: 50% 0; transition: scale 560ms var(--ease-reveal), translate 560ms var(--ease-reveal), border-radius 560ms var(--ease-reveal); }
.phone-stage:not([data-live]) .dm-app, .phone-stage[data-p1] .dm-app { scale: 0.93; translate: 0 6px; border-radius: 16px; }
.dm-top { display: flex; height: 36px; align-items: center; gap: 2px; border-bottom: 1px solid var(--a-border); padding: 0 10px; font-size: 13px; font-weight: 600; }
.dm-top .ico { width: 18px; height: 18px; }
.dm-feed { display: grid; justify-items: start; gap: 8px; padding: 14px 12px; }
.dm-b { max-width: 84%; border-radius: 16px; background: #f1f1f3; padding: 8px 11px; font-size: 12px; line-height: 17px; }
.dm-l { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 7px 11px 7px 7px; box-shadow: inset 0 0 0 1px var(--a-border); }
.dim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.32); transition: opacity 420ms var(--ease-ui); }
.phone-stage[data-live]:not([data-p1]) .dim { opacity: 0; }
.sheet { position: absolute; inset: 44px 0 0; border-radius: 14px 14px 0 0; background: #fff; box-shadow: 0 -8px 24px rgb(0 0 0 / 0.12); transition: translate 560ms var(--ease-reveal); }
.phone-stage[data-live]:not([data-p1]) .sheet { translate: 0 104%; }
.sheet-head { position: relative; display: flex; height: 44px; align-items: center; justify-content: space-between; padding: 0 10px 0 6px; }
.sheet-head b { position: absolute; left: 50%; translate: -50% 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sheet-body { display: grid; gap: 10px; padding: 4px 14px 0; }
.a-preview { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px; box-shadow: inset 0 0 0 1px var(--a-border); }
.a-label { margin-bottom: -4px; font-size: 12px; line-height: 16px; font-weight: 500; }
.a-label span { font-weight: 400; color: var(--a-muted); }
.a-textarea { min-height: 58px; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 18px; box-shadow: inset 0 0 0 1px var(--a-border); transition: box-shadow 150ms var(--ease-ui); }
.a-textarea.is-focused { box-shadow: inset 0 0 0 1px #a1a1aa, 0 0 0 3px rgb(161 161 170 / 0.45); }
.a-caret { display: none; margin-left: 1px; width: 1.5px; height: 1.05em; border-radius: 9999px; background: var(--a-fg); vertical-align: -2px; }
.is-focused .a-caret { display: inline-block; }
.a-helper { margin-top: -4px; font-size: 10.5px; line-height: 14px; color: var(--a-muted); }
.a-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.a-chips span { display: inline-flex; height: 24px; align-items: center; border-radius: 9999px; padding: 0 9px; font-size: 11px; box-shadow: inset 0 0 0 1px var(--a-border); }
.a-callout { display: flex; align-items: center; gap: 8px; border-radius: 10px; background: var(--a-bg-muted); padding: 9px 10px; font-size: 11.5px; line-height: 16px; }
.a-callout b { font-weight: 500; }
.a-callout .ico { width: 13px; height: 13px; color: var(--a-muted); }
.a-toast { position: absolute; top: 44px; left: 10px; right: 10px; z-index: 20; display: flex; align-items: center; gap: 9px; border-radius: 14px; background: #fff; padding: 10px 12px; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 10px 24px -8px rgb(0 0 0 / 0.28); transition: opacity 300ms var(--ease-ui), translate 420ms var(--ease-reveal); }
.phone-stage[data-live]:not([data-p2]) .a-toast { opacity: 0; translate: 0 -14px; }
.phone-stage:not([data-live]) .a-toast { display: none; }
.a-toast-ico { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 9999px; background: #15803d; color: #fff; }
.a-toast-ico .ico { width: 12px; height: 12px; stroke-width: 3; }

/* 02 card (kind art = ds.css .kart, opinion = lavender) */
.k-design { --k-deep: #f27fae; --k-mid: #ffc2da; --k-pale: #ffeef5; --k-tone: #a8326a; }
.k-tool { --k-deep: #2f8cff; --k-mid: #8ccbff; --k-pale: #ddf0ff; --k-tone: #1c5bc2; }
.k-howto { --k-deep: #52c48c; --k-mid: #a9e8c7; --k-pale: #e8faf0; --k-tone: #2a7a52; }
.k-opinion { --k-deep: #8c7bff; --k-mid: #c6bdff; --k-pale: #efecff; --k-tone: #5643c4; }
.k-case { --k-deep: #5b7cff; --k-mid: #adbfff; --k-pale: #e8eeff; --k-tone: #3550c2; }
.k-news { --k-deep: #1fa3e0; --k-mid: #95d8f5; --k-pale: #e2f5fd; --k-tone: #146e99; }
.kart { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(165deg, var(--k-mid) 0%, var(--k-pale) 52%, var(--k-pale) 100%); }
.kart::before, .kart::after { content: ""; position: absolute; inset: -10%; filter: blur(var(--k-blur, 22px)); }
.kart::before { background: radial-gradient(33.3% 15.8% at 83.3% 25.8%, color-mix(in srgb, var(--k-deep) 50%, transparent) 96%, transparent), radial-gradient(39.6% 20.8% at 18.8% 19.2%, color-mix(in srgb, var(--k-deep) 80%, transparent) 96%, transparent); }
.kart::after { background: radial-gradient(33.3% 18.8% at 16.7% 78.8%, rgb(255 255 255 / 0.7) 96%, transparent), radial-gradient(37.5% 16.7% at 83.3% 90%, color-mix(in srgb, var(--k-mid) 55%, transparent) 96%, transparent), radial-gradient(37.5% 18.8% at 50% 52.1%, rgb(255 255 255 / 0.85) 96%, transparent); }
.kart--tile { --k-blur: 14px; }
.c-top { display: flex; justify-content: space-between; padding: 2px 12px 8px; }
.c-scroll { display: grid; gap: 10px; padding: 0 10px; }
.c-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; padding: 14px 14px 16px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 14px 24px -20px color-mix(in srgb, var(--k-deep) 75%, transparent); }
.c-hero > :not(.kart) { position: relative; z-index: 1; }
.c-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.c-badge { display: inline-flex; height: 20px; align-items: center; border-radius: 9999px; background: rgb(255 255 255 / 0.6); padding: 0 7px; font-size: 10px; font-weight: 500; color: var(--k-tone); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8); }
.c-title { margin-top: 10px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em; }
.c-what { margin-top: 4px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 10.5px; line-height: 15px; color: rgb(9 9 11 / 0.66); }
.c-meta { margin-top: 12px; display: flex; align-items: flex-start; gap: 7px; }
.c-meta .ico { width: 12px; height: 12px; margin-top: 2px; color: rgb(9 9 11 / 0.6); }
.c-meta small { display: block; font-size: 9.5px; line-height: 13px; font-weight: 500; color: rgb(9 9 11 / 0.6); }
.c-meta b { display: block; font-size: 11.5px; line-height: 16px; font-weight: 400; }
.c-next { position: relative; border-radius: 16px; background: #fff; padding: 12px 13px 13px; box-shadow: inset 0 0 0 1px var(--a-border); --sk-ms: 900ms; }
.c-lab { font-size: 10.5px; line-height: 14px; font-weight: 500; color: var(--a-muted); }
.c-lab--xs { font-size: 9.5px; line-height: 13px; }
.c-main { margin-top: 5px; font-size: 13px; line-height: 18.5px; font-weight: 600; letter-spacing: -0.02em; }
.c-also { margin-top: 12px; }
.c-step { margin-top: 5px; display: flex; gap: 6px; font-size: 11.5px; line-height: 16px; }
.c-step .ico { width: 12px; height: 12px; margin-top: 2px; flex: none; color: var(--a-muted); }
.c-actions { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: 6px; border-top: 1px solid var(--a-border); background: #fff; padding: 9px 10px 22px; }
.c-actions .a-btn:not(.a-btn--outline) { gap: 5px; }

/* 03 lock screen. Wallpaper sampled from shot-reminder.webp (#9187fe → #bcb1f7 → #abb1ff); its pink
   top-right (#e9b8e4) is left out so it doesn't fight the page's cobalt sky. */
.lk-wall { position: absolute; inset: 0; background: radial-gradient(70% 40% at 80% 6%, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0) 70%), radial-gradient(80% 50% at 0% 22%, #8f87fe, rgb(143 135 254 / 0) 70%), linear-gradient(180deg, #a59cfb 0%, #bcb1f7 50%, #abb1ff 100%); }
.lk-date { position: relative; margin-top: 22px; text-align: center; font-size: 13px; line-height: 18px; font-weight: 500; color: rgb(255 255 255 / 0.86); }
.lk-time { position: relative; text-align: center; font-family: "Inter Display", var(--font-heading); font-size: 78px; line-height: 82px; font-weight: 600; letter-spacing: -0.03em; color: rgb(255 255 255 / 0.94); }
.lk-note { position: relative; margin: 44px 8px 0; display: flex; gap: 9px; border-radius: 18px; background: rgb(255 255 255 / 0.62); padding: 10px 11px; box-shadow: 0 8px 20px -10px rgb(40 30 120 / 0.4); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.phone-stage[data-live]:not([data-p7]) .lk-note { translate: 0 -14px; scale: 0.97; }
.lk-note img { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.lk-note > div { min-width: 0; }
.lk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.lk-row b { font-size: 11.5px; line-height: 16px; font-weight: 600; }
.lk-row span { flex: none; font-size: 10px; color: rgb(9 9 11 / 0.5); }
.lk-note p:last-child { font-size: 11.5px; line-height: 16px; color: rgb(9 9 11 / 0.82); }
.lk-bottom { position: absolute; right: 26px; bottom: 30px; left: 26px; display: flex; justify-content: space-between; }
.lk-bottom span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9999px; background: rgb(255 255 255 / 0.22); color: #fff; }
.lk-bottom .ico { width: 16px; height: 16px; }
.home-ind { position: absolute; bottom: 8px; left: 50%; width: 100px; height: 4px; translate: -50% 0; border-radius: 9999px; background: rgb(255 255 255 / 0.85); }

/* 04 library */
.l-head { padding: 4px 14px 0; }
.l-title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.l-count { font-size: 11px; line-height: 15px; color: var(--a-muted); }
.l-ai { margin: 8px 14px 0; display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 15px; font-weight: 500; }
.l-ai .ico { width: 12px; height: 12px; }
.l-chips { margin: 10px 14px 0; display: flex; gap: 5px; }
.l-chips span { display: inline-flex; height: 24px; align-items: center; border-radius: 8px; padding: 0 8px; font-size: 10.5px; box-shadow: inset 0 0 0 1px var(--a-border); white-space: nowrap; }
.l-chips .on { background: var(--a-primary); color: #fafafa; box-shadow: none; }
.l-grid { margin: 10px 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.l-tile { position: relative; isolation: isolate; display: flex; height: 112px; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 14px; padding: 9px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7), 0 8px 16px -12px color-mix(in srgb, var(--k-deep) 70%, transparent); --pop-from: 0.85; }
.l-tile > :not(.kart) { position: relative; z-index: 1; }
.l-tile.ph-8 { transition-delay: 450ms; }
.l-emo { position: absolute !important; top: 8px; left: 8px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 9999px; background: rgb(255 255 255 / 0.6); font-size: 10px; }
.l-tile b { font-size: 11.5px; line-height: 15px; font-weight: 600; }
.l-tile small { margin-top: 2px; font-size: 9px; line-height: 12px; color: rgb(9 9 11 / 0.6); }
.l-tabs { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--a-border); background: rgb(255 255 255 / 0.95); padding: 7px 0 20px; }
.l-tabs span { display: grid; justify-items: center; gap: 2px; font-size: 9.5px; color: var(--a-muted); }
.l-tabs .ico { width: 17px; height: 17px; stroke-width: 1.75; }
.l-tabs .on { color: var(--a-fg); font-weight: 600; }

/* ---------- Detail pass ---------- */
/* Scroll-fill lead: starts readable (home .16 was near-invisible on first view) and fills earlier. */
.fill-word:not([data-on]) { color: rgb(9 11 12 / 0.3); }
/* No one-word last lines in Korean captions / answers. */
dd, .cap-body, .faq-item p, .beta-lead, .foot-tag { text-wrap: pretty; }
/* Focus rings on every link (home: focus-visible:ring-3 ring/40). */
:where(a, summary):not(.btn):not(.sheet-cta):focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); }
.btn-pill:focus-visible, .sheet-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); }
/* Radius nesting: on phones the form card sits 10px inside the 22.4px banner → 12.4px. */
.beta-card { border-radius: calc(var(--radius-lg) - 10px); }
@media (width >= 48rem) { .beta-card { border-radius: var(--radius-lg); } }
/* Numbers line up. */
.ltile small, .notif-app, .lock-time, .ap-clock, .lk-time, .node-bell { font-variant-numeric: tabular-nums; }
/* how-it-works 02 = the app card's own wording */
.knext-step { display: flex; gap: 5px; }
.knext-step .ico { width: 11px; height: 11px; margin-top: 3px; flex: none; color: #5643c4; }

@media (prefers-reduced-motion: reduce) {
  .scr, .phone-stage[data-scene] .scr, .dm-app, .sheet, .dim, .a-toast, .hs-btn, .hs-btn::after { transition: none !important; }
  .hs-btn.is-run .hs-bar i { animation: none; }
}
.c-crit { margin-top: 12px; border-top: 1px solid var(--a-border); padding-top: 10px; }
.c-crit-k { margin-top: 6px; font-size: 10.5px; line-height: 14px; font-weight: 500; color: var(--a-muted); }
.c-crit-v { font-size: 10.5px; line-height: 15px; color: var(--a-muted); }
.c-actions { z-index: 2; }
.card-caption, .vs dd { text-wrap: pretty; } /* inline title+body: the wrap rule must sit on the block */

/* 2026-10-27 사용자 "semibold 쓰고": 제목은 SemiBold(600), 페이지 전체 최대 굵기도 600. */
.t-hero, .t-h1, .t-h2, .t-h3 { font-weight: 600; }
.ktitle, .vs-title, .option__title { font-weight: 600; }
b, strong { font-weight: 600; }

/* ---------- 신청 양식 v2 (2026-10-27, public/linkbiseo 원본과 같은 마크업) ----------
   홈 입력 모양: 흰 카드 + 1px 테두리(--input), 선택 = 진한 테두리 + raised 그림자.
   라디오는 원, 체크박스는 네모(반경 5px)로 구분. 체크 묶음은 좁은 폰(<480px)에서 1열. */
.options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (width < 30rem) { .options--2:has(.check) { grid-template-columns: 1fr; } }
.option:has(input[type="radio"]) { align-items: center; }
.option:has(input[type="radio"]) .radio { margin-top: 0; }
.check { position: relative; margin-top: 2px; width: 18px; height: 18px; flex: none; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px rgb(9 11 12 / 0.25); transition: background-color 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui); }
.check::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; scale: 0; transition: scale 200ms var(--ease-reveal); }
.option:has(input:checked) .check { background: var(--foreground); box-shadow: inset 0 0 0 1.5px var(--foreground); }
.option:has(input:checked) .check::after { scale: 1; }
.option:hover .check, .option:hover .radio { box-shadow: inset 0 0 0 1.5px rgb(9 11 12 / 0.45); }
.option:has(input:checked):hover .check { box-shadow: inset 0 0 0 1.5px var(--foreground); }
.options[aria-invalid="true"] .check, .options[aria-invalid="true"] .radio { box-shadow: inset 0 0 0 1.5px rgb(198 42 42 / 0.7); }
@media (prefers-reduced-motion: reduce) { .check, .check::after { transition: none; } }

/* ---------- v6: 내 자료는 어디로 가요 + 흰 바탕 위 다른 점 ---------- */
.where-card { margin: 40px auto 0; max-width: 718px; }
@media (width >= 48rem) { .where-card { margin-top: 56px; } }
.where-media { height: 240px; }
@media (width >= 40rem) { .where-media .stage { scale: 0.9; } }
@media (width >= 64rem) { .where-media .stage { scale: 1; } }
.where-label { translate: -50% 0; border-radius: 9999px; background: #fff; padding: 0 8px; font-size: 11px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; }
.where-link { margin-top: 8px; padding-inline: 4px; font-size: 16px; line-height: 24px; }
@media (width >= 48rem) { .where-link { padding-inline: 6px; } }
.packet-w { offset-path: path("M222 110 H310"); }
.live-art[data-live="play"] .packet-w { animation-name: packet-pingpong; animation-duration: 4.4s; }
#diff .diag-media { background: var(--muted); }

/* =====================================================================
 * v6-fix (2026-10-28): 넓은 화면을 쓰는 한 컨테이너.
 * 가운데 1248px 문서 기둥과 양옆 세로선을 없애고, 내비·첫 화면·모든 섹션·바닥글이 같은 왼쪽/오른쪽 선을 써요.
 *   컨테이너 = 화면 − 양옆 gutter(20–72px), 최대 1360px. 배경(회색 띠·CTA 패널)은 화면 끝까지.
 * ===================================================================== */
:root { --gutter: clamp(20px, 4.5vw, 72px); --wrap: 1360px; --pad-x: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.frame-col { margin-inline: 0; max-width: none; border-inline: 0; }
.sticky-nav .frame-col { padding-inline: var(--pad-x); }
.section { padding-inline: var(--pad-x); }
.sh { margin-inline: 0; max-width: 760px; }

/* 가로로 넘기는 줄(폰): 화면 끝까지 넘기되 첫 카드는 컨테이너 선에서 시작 */
@media (width < 48rem) {
  .promise-grid, .how-row { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}

/* 필요한 것 · 다른 점: 두 카드가 컨테이너 폭을 다 써요 */
.pair-grid { max-width: none; margin-inline: 0; }
@media (width >= 40rem) { .pair-grid { gap: 20px; } }
@media (width >= 64rem) { .pair-grid .diag-media { height: 280px; } .pair-grid .stage { scale: 1; } }

/* 내 자료는 어디로 가요 · 자주 묻는 질문: 넓은 화면에서 왼쪽 제목 / 오른쪽 내용 */
.where-card { margin-inline: 0; max-width: none; }
.faq { margin-inline: 0; max-width: none; }
@media (width >= 80rem) {
  #where, #faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  #where .where-card, #faq .faq { margin-top: 0; }
  #where .where-media { height: 280px; }
  #faq .faq-item:first-child summary { padding-top: 0; min-height: 44px; }
}

/* 신청: 빛줄기 패널이 화면 끝까지, 넓은 화면에서 왼쪽 글 / 오른쪽 양식 */
/* --pad-x는 100%를 쓰니 화면 폭을 아는 요소(여백 0인 섹션 바로 아래 패널)에서만 써요. */
.beta-section { padding: 0; border-top: 0; }
.beta-banner { border-radius: 0; margin: 0; padding: 64px var(--pad-x) 56px; }
@media (width >= 48rem) { .beta-banner { padding-block: 96px; } }
@media (width >= 80rem) {
  .beta-banner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: center; }
  .beta-head { padding-inline: 0; text-align: left; }
  .beta-head .t-h2, .beta-lead { margin-inline: 0; }
  .beta-card { margin: 0 0 0 auto; width: 100%; max-width: 680px; }
}

/* 바닥글: 같은 컨테이너, 큰 흐린 "링크비서"는 컨테이너 폭에 맞춰요 */
.site-footer { padding-inline: var(--pad-x); }
.footer-mark { font-size: min(calc((100vw - 2 * var(--gutter)) / 3.9), calc(var(--wrap) / 3.9)); letter-spacing: -0.04em; text-align: left; }
@media (width >= 48rem) { .foot-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; } }
@media (width >= 80rem) { .pair-grid .diag-media { height: 300px; } .pair-grid .stage { scale: 1.15; } }