/* Registration follows the poster, while form fields stay clear and readable. */
:root { --ink: #493421; --muted: #725e49; --teal: #0759a6; --boss: #b33c25; --font-title: "Noto Sans KR", "Malgun Gothic", sans-serif; }
body { background: radial-gradient(ellipse at top, #17659c, #062b52 70%); word-break: keep-all; overflow-wrap: anywhere; line-height: 1.65; }
.top { background: #062b52f2; }
.brand { max-width: 640px; margin: auto; flex-wrap: wrap; gap: 2px 12px; }
.brand .disp { background: none; color: #ffe7ab; font-size: 15px; font-weight: 700; text-decoration: none; }
.brand small { color: #f7da9c; letter-spacing: 0; opacity: 1; }
.progress { max-width: 640px; margin: 9px auto 0; }
.stage { width: min(640px,100%); gap: 20px; padding-top: 24px; }
.card, .kid { background: #fff8e9; border: 1px solid #d3ab69; border-radius: 18px; padding: 24px; box-shadow: 0 12px 32px #001b3540; }
.card h2 { color: #6c421c; font-size: 20px; flex-wrap: wrap; line-height: 1.5; }
.card.hero.kv { padding: 0 24px 24px; }
.form-poster { position: relative; margin: 0 -24px 24px; aspect-ratio: 1200 / 1080; overflow: hidden; background: #063668; }
.form-sea { width: 100%; height: auto; display: block; }
.form-poster h1 { position: absolute; inset: 0 0 auto; margin: 0; line-height: 0; }
.form-poster h1 img { width: 100%; height: auto; display: block; }
.form-kicker { color: #8a5c2b; font-size: 12px; font-weight: 700; margin: 0 0 8px; }
.lead { color: #493421; line-height: 1.9; text-wrap: pretty; }
.lead b, .hero h1 b { color: #805020; font-weight: 800; }
.hero h1 { color: #493421; font-weight: 800; text-wrap: balance; line-height: 1.5; }
.info { gap: 0; padding: 4px 16px; background: #f5e8cd; border-radius: 12px; }
.info > div { padding: 11px 0; border-bottom: 1px solid #dac39b; grid-template-columns: 38px minmax(0,1fr); gap: 8px; }
.info > div:last-child { border-bottom: 0; }
.info dt { color: #76512b; letter-spacing: 0; }
.info dd { color: #493421; text-wrap: pretty; }
.form-date { white-space: nowrap; font-size: 13px; }
.note, .field small, .check small { color: #725e49; line-height: 1.75; text-wrap: pretty; }
.req { color: #805020; background: #f5e8cd; border-color: #cfa667; }
.consent { border-color: #dac39b; padding: 12px 0; }
.check { line-height: 1.7; }
.check input { accent-color: #946020; }
.consent .more { color: #0759a6; padding: 8px 0; }
.consent .detail { background: #fffdf8; color: #493421; border-color: #dac39b; margin-left: 0; line-height: 1.8; }
.consent .detail b { color: #805020; }
.field { gap: 8px; margin-bottom: 24px; }
.field label { color: #65411f; font-size: 15px; }
.field input[type=text], .field input[type=tel] { background: #fff; color: #382a20; border-color: #bea787; box-shadow: inset 0 1px 3px #6c421c0d; min-height: 52px; }
.field input::placeholder { color: #8a7967; }
.field input:focus { outline: 2px solid #986223; box-shadow: 0 0 0 4px #dbb77840; }
.photo-box { background: #f3e7d0; border-color: #ae8752; }
.btn.small, .btn.small.ghost, .btn.ghost { color: #65411f; background: #fff6e4; border-color: #c6a470; }
.btn.primary { color: #352006; background: linear-gradient(#fff0b8,#efb649 55%,#cc8b25); }
.btn:focus-visible, .opt:focus-visible, a:focus-visible { outline: 3px solid #0759a6; outline-offset: 3px; }
.nav { background: #fff8e9f5; border-color: #c6a470; padding-left: max(16px,calc((100vw - 592px)/2)); padding-right: max(16px,calc((100vw - 592px)/2)); }
.kid { overflow: hidden; }
.kid .ship { margin: -24px -24px 18px; }
.kid .ship::after { background: linear-gradient(transparent 55%,#fff8e9); }
.q-num { color: #ffe2a0; }
.q h1 { background: none; color: #fff0c4; font-weight: 800; filter: none; line-height: 1.5; text-wrap: balance; font-size: 28px; }
.q-hint { color: #f6e4bd; }
.opt { background: #fff8e9; color: #493421; border-color: #d3ab69; font-size: 20px; line-height: 1.5; }
.opt.on { background: #ffe3a5; color: #493421; border-color: #ffcf6b; box-shadow: 0 0 0 3px #fff0c4; }
.review .row { grid-template-columns: 70px minmax(0,1fr) auto; }
.review .row b { color: #805020; }
.regnos span { background: #f5e8cd; color: #493421; }
.regnos span b { color: #805020; }
.info .contact dt, .info .contact dd, .contact a { color: #0759a6; font-weight: 700; }
.toast { max-width: calc(100% - 24px); white-space: normal; text-align: center; }
@media (max-width: 420px) {
 .stage { padding: 14px 12px calc(var(--nav-h) + 24px); }
 .card { padding: 20px 16px; }
 .card.hero.kv { padding: 0 16px 20px; }
 .form-poster { margin: 0 -16px 20px; }
 .info { padding: 4px 10px; }
 .info > div { font-size: 13px; }
 .form-date { font-size: 12px; }
 .hero h1 { font-size: 24px; }
 .kid .ship { margin: -20px -16px 16px; }
 .opt { grid-template-columns: 56px minmax(0,1fr); gap: 10px; padding: 12px; font-size: 18px; }
}

/* Registration design audit: readable help text and unobstructed preview controls. */
.lead { font-size: 16px; }
.note, .field small, .check small, .info small, .review small { font-size: 14px; color: #654d36; line-height: 1.8; }
.info > div { font-size: 15px; line-height: 1.8; }
.form-date { font-size: 15px; white-space: normal; text-wrap: balance; font-weight: 700; }
.form-kicker { font-size: 14px; }
.check { font-size: 15px; }
.req { font-size: 12px; }
.field label { font-size: 16px; }
.field input::placeholder { color: #786653; }
.consent .detail { font-size: 14px; }
.consent .more { min-height: 44px; }
.preview-notice .dev-skip { position: static; display: block; width: fit-content; margin: 10px auto 0; padding: 10px 16px; min-height: 44px; background: #0759a6; color: #fff; font-size: 14px; opacity: 1; border-radius: 10px; box-shadow: none; }
.review .row { font-size: 15px; line-height: 1.8; }
.review .row button { min-height: 44px; min-width: 44px; font-size: 14px; }
@media (max-width: 420px) {
 .info > div { grid-template-columns: 1fr; gap: 3px; font-size: 15px; }
 .info dt { font-size: 14px; }
 .review .row { grid-template-columns: 1fr auto; gap: 4px 8px; }
 .review .row > b { grid-column: 1; }
 .review .row > div { grid-column: 1; }
 .review .row > button { grid-column: 2; grid-row: span 2; }
}

@media (max-width: 420px) {
 .review .row { grid-template-areas: 'label edit' 'value value'; grid-template-columns: 1fr auto; padding: 12px 0; align-items: center; }
 .review .row > b { grid-area: label; }
 .review .row > span { grid-area: value; }
 .review .row > button { grid-area: edit; }
}

.field select { width:100%; min-height:52px; font:inherit; font-size:17px; color:#382a20; background:#fff; border:1px solid #bea787; border-radius:12px; padding:13px 14px; box-shadow:inset 0 1px 3px #6c421c0d; }
.field select:invalid { color:#786653; }
.field select:focus { outline:2px solid #986223; outline-offset:-1px; box-shadow:0 0 0 4px #dbb77840; }
.field.error select { border-color:var(--boss); }

/* The brass case stays still; only the needle turns. */
.sailor-compass { position:relative; width:100px; height:100px; margin:22px auto 24px; border-radius:50%; border:7px solid #c99534; background:#fdf4d7; box-shadow:0 5px 12px #69401b30,inset 0 0 0 2px #fae5a0; }
.compass-ring { position:absolute; width:16px; height:16px; border:4px solid #c99534; border-radius:50%; top:-23px; left:50%; transform:translateX(-50%); }
.compass-face { position:absolute; inset:5px; border-radius:50%; background:repeating-conic-gradient(from -1deg,#a9957133 0deg 2deg,transparent 2deg 30deg),radial-gradient(circle,#fffdf4,#e9dec5); border:1px solid #cab487; }
.compass-north { position:absolute; top:1px; left:0; right:0; text-align:center; color:#80613b; font:700 10px/1.4 sans-serif; }
.compass-needle { position:absolute; inset:9px; transform-origin:50% 50%; animation:needle-search 3s ease-in-out infinite; }
.compass-needle::before,.compass-needle::after { content:""; position:absolute; left:50%; width:17px; height:50%; transform:translateX(-50%); }
.compass-needle::before { top:0; background:linear-gradient(90deg,#b92d46 50%,#e66376 50%); clip-path:polygon(50% 0,100% 100%,0 100%); }
.compass-needle::after { bottom:0; background:linear-gradient(90deg,#718092 50%,#acb4c0 50%); clip-path:polygon(0 0,100% 0,50% 100%); }
.compass-pin { position:absolute; width:10px; height:10px; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background:#e4bd60; border:2px solid #9b6c25; }
@keyframes needle-search { 0%,100% { transform:rotate(-35deg); } 35% { transform:rotate(205deg); } 70% { transform:rotate(325deg); } }
@media(prefers-reduced-motion:reduce) { .compass-needle { animation:none; transform:rotate(-35deg); } }