/* 모두의철도 — 서비스 소개 · 광고 안내 랜딩
   참고: 모두의철도 랜딩/참고스크린샷.png (흰 바탕, 큰 이미지 카드 줄, 파스텔 배너, 썸네일 카드 목록) */
@import url("../fonts/wanted-sans.css");

:root {
  --ink: #191F28;
  --ink-2: #4E5968;
  --ink-3: #66707D;   /* 흰 바탕 5.0:1 · 회색 바탕 4.6:1 (본문 대비 기준 4.5:1 통과) */
  --line: #E5E8EB;
  --bg: #FFFFFF;
  --bg-2: #F5F6F8;

  --brand: #1B64DA;     /* 모두의철도 · 동해선 */
  --dg: #F26B1D;        /* 대경선 */

  --mint: #E6F6EE;
  --sky: #E8F1FF;
  --lilac: #F0ECFF;

  --wrap: 1056px;
  --gutter: 24px;
  --hd-h: 72px;
  --r: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-top: var(--hd-h);
  font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px; line-height: 1.6; letter-spacing: -0.01em;
  color: var(--ink); background: var(--bg);
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 헤더 (fixed, 검색바 없음) ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd-h); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hd .wrap { height: 100%; display: flex; align-items: center; gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.gnb { display: flex; gap: 4px; }
.gnb a { padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.gnb a:hover { background: var(--bg-2); color: var(--ink); }
.gnb a[aria-current="page"] { color: var(--brand); }
.hd-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 19px; box-shadow: inset 0 0 0 1px #D1D6DB; font-size: 14px; font-weight: 600; color: var(--ink); transition: background-color .15s, box-shadow .15s; }
.hd-cta::after { content: ""; width: 6px; height: 6px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.hd-cta:hover { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.hd-cta[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }
.menu-btn { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color .15s; }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: #1554BC; }
.btn--line { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.btn--line:hover { background: var(--bg-2); }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 12px; }

/* ---------- 이미지 카드 줄 (아코디언) ---------- */
.showcase { display: grid; grid-template-columns: 1fr 320px; gap: 12px; margin-top: 32px; }
.showcase-label { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: -0.01em; }
.tiles { display: flex; gap: 12px; height: 300px; margin-top: 40px; }
.tiles .tile--app { flex-grow: 1.5; }
.tile {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r);
  color: #fff; background: var(--tile-bg, #1B3A6B);
  transition: flex-grow .45s cubic-bezier(.2,.7,.1,1);
}
.tile-media { position: absolute; left: 50%; top: 22px; width: min(72%, 150px); transform: translateX(-50%); transition: left .45s cubic-bezier(.2,.7,.1,1), width .45s cubic-bezier(.2,.7,.1,1), transform .45s cubic-bezier(.2,.7,.1,1); }
.tile-media img { width: 100%; border-radius: 14px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.45); }
.tile-media--wide { left: 14%; width: 190%; transform: none; }
.tile-media--wide img { border-radius: 8px; }
.tile-media--icon img { box-shadow: none; border-radius: 0; }
.tile.is-on .tile-media { left: 58%; width: 180px; transform: rotate(-4deg); }
.tile.is-on .tile-media--wide { left: 40%; width: 120%; transform: none; }
.tile.is-on .tile-media--icon { width: 170px; transform: none; top: 40px; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, var(--tile-bg) 74%); pointer-events: none; }
.tile.is-on::after { background: linear-gradient(90deg, var(--tile-bg) 30%, transparent 62%); }
.tile-txt { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; }
.tile-txt small { display: block; font-size: 15px; font-weight: 600; opacity: 0; color: rgba(255,255,255,.85); transform: translateY(6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.tile-txt b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; transition: font-size .3s; }
.tile-arrow { position: absolute; right: 22px; bottom: 26px; z-index: 1; opacity: 0; transition: opacity .3s; }
.tiles .tile.is-on { flex-grow: 3.2; }
.tile.is-on .tile-txt small { opacity: 1; transform: none; }
.tile.is-on .tile-txt b { font-size: 34px; }
.tile.is-on .tile-arrow { opacity: 1; }

/* 앱 안의 기능 (2×2) — 글은 위, 아래엔 실제 화면에서 잘라 낸 조각 */
.feats { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 300px; margin: 0; padding: 0; list-style: none; }
.feat { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 14px; background: var(--f-bg); color: var(--ink); transition: box-shadow .25s; }
.feat:hover { box-shadow: 0 12px 26px -16px rgba(25,31,40,.4); }
.feat-txt { position: absolute; left: 16px; right: 16px; top: 14px; z-index: 1; }
.feat-txt b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.feat-txt small { display: block; font-size: 13px; color: var(--ink-2); }
.feat--cta { color: #fff; }
.feat--cta .feat-txt small { color: rgba(255,255,255,.8); }
.feat-big { position: absolute; left: 16px; bottom: 10px; font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.feat-big small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; opacity: .8; }

/* 화면 조각: 이미지 한 장에서 특정 영역만 보이게 자른다 (margin % 는 너비 기준) */
.crop { position: absolute; left: 14px; right: -10px; bottom: 16px; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(25,31,40,.45); transform: rotate(-3deg); transform-origin: left bottom; transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.feat:hover .crop { transform: rotate(-1deg) translateY(-3px); }
.crop img { display: block; max-width: none; }
.crop--banner { aspect-ratio: 920 / 224; }
.crop--banner img { width: 108.7%; margin: -97.3% 0 0 -4.35%; }
.crop--kpi { aspect-ratio: 370 / 150; right: 14px; }
.crop--kpi img { width: 389.2%; margin: -114.9% 0 0 -70.3%; }
.feat-mascot { position: absolute; right: -6px; bottom: -12px; width: 84px; height: auto; transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.feat:hover .feat-mascot { transform: translateY(-4px) rotate(-4deg); }
.bubble { position: absolute; left: 16px; bottom: 44px; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: #fff; font-size: 12px; font-weight: 600; color: var(--ink-2); box-shadow: 0 6px 14px -8px rgba(25,31,40,.35); white-space: nowrap; }

/* ---------- 파스텔 배너 캐러셀 ---------- */
.promo { margin-top: 76px; }
.promo-view { position: relative; overflow: hidden; padding-top: 18px; }
.promo-track { display: flex; transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.slide { position: relative; flex: 0 0 100%; }
.slide-box { position: relative; display: grid; grid-template-columns: 1fr 260px; align-items: center; min-height: 154px; padding: 24px 48px 24px 96px; border-radius: var(--r); background: var(--slide-bg); }
.slide-tag { position: absolute; left: 32px; top: -18px; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 18px 18px 18px 4px; background: #2B2B2B; color: #fff; font-size: 14px; font-weight: 700; }
.slide h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.45; font-weight: 700; letter-spacing: -0.03em; }
.slide p { margin: 0; font-size: 15px; color: var(--ink-2); }
.slide-art { justify-self: center; height: 154px; display: flex; align-items: center; }
.slide-art img { max-height: 140px; width: auto; mix-blend-mode: multiply; }
.promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.promo-dots button { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #D1D6DB; cursor: pointer; transition: width .3s, background-color .3s; }
.promo-dots button[aria-current="true"] { width: 26px; background: var(--ink); }
.promo-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* 터치 영역 */

/* ---------- 섹션 ---------- */
.sec { padding-top: 112px; }
.sec-title { margin: 0 0 28px; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.4; }
.sec-title small { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; color: var(--ink-3); letter-spacing: -0.01em; }

/* 서비스 소개 레일 — 참고스크린샷_2: 큰 카드가 화면 오른쪽 끝까지 이어지고, 아래 진행 막대 */
.svc-title { margin: 0 0 12px; text-align: center; font-size: 36px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.3; }
.svc-sub { margin: 0 auto 44px; max-width: 32em; text-align: center; font-size: 17px; color: var(--ink-2); }
.rail { margin-right: calc(50% - 50vw); }
html, body { overflow-x: hidden; }
.rail-track { display: flex; gap: 14px; margin: 0; padding: 12px 24px 16px 0; list-style: none; overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track.is-drag { cursor: grabbing; }
.rail-track li { flex: none; }
.rail-card { position: relative; display: block; width: 600px; height: 340px; overflow: hidden; border-radius: 14px; background: var(--c-bg); color: #fff; transition: transform .35s cubic-bezier(.2,.7,.1,1); -webkit-user-drag: none; }
.rail-card:hover, .rail-card:focus-visible { transform: translateY(10px) scale(1.025); }
.rail-card img { pointer-events: none; -webkit-user-drag: none; }
.rail-phone { position: absolute; right: 9%; top: 9%; width: 34%; border: 6px solid #15191F; border-radius: 26px; transform: rotate(-6deg); box-shadow: 0 24px 40px -18px rgba(0,0,0,.5); }
.rail-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.rail-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 58%); }
.rail-no { position: absolute; left: 28px; top: 26px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; }
.rail-txt { position: absolute; left: 30px; bottom: 26px; z-index: 1; font-size: 28px; font-weight: 700; line-height: 1.38; letter-spacing: -0.04em; }
.rail-bar { position: relative; height: 4px; margin: 20px 64px 0; border-radius: 2px; background: #E5E8EB; }
.rail-thumb { position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px; background: var(--ink); }

/* 썸네일 카드 목록 */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { display: block; }
.card-thumb { position: relative; aspect-ratio: 16 / 9; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); overflow: hidden; border-radius: 14px; background: var(--thumb-bg, var(--bg-2)); }
.card-thumb > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center top); transition: transform .5s; }
.card:hover .card-thumb > img { transform: scale(1.04); }
.card-thumb--phone > img { position: absolute; left: 50%; top: 14%; width: 44%; height: auto; transform: translateX(-50%); border-radius: 14px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.45); }
.card:hover .card-thumb--phone > img { transform: translateX(-50%) translateY(-4px); }
.card h3 { margin: 16px 0 6px; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.flag { flex: none; width: 20px; height: 14px; border-radius: 2px; background: linear-gradient(var(--c) 0 50%, #fff 50% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.card p { margin: 0; font-size: 15px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.badge--live { background: var(--brand); color: #fff; }

/* 광고 자리 (세로 화면 카드) */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.slot .card-thumb { aspect-ratio: 3 / 4; }
.slot .card-thumb > img, .slot:hover .card-thumb > img { position: absolute; left: 50%; top: 50%; width: 72%; height: auto; transform: translate(-50%, calc(-1 * var(--y, 50%))); border-radius: 18px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); }
.slot h3 { font-size: 17px; }

/* 성과 리포트 */
.report { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 20px; background: var(--bg-2); }
.report h2 { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.4; }
.report > div > p { margin: 0; color: var(--ink-2); }
.report-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.report-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.report-list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.report-list b { color: var(--ink); }
.report-shot { margin: 0; }
.report-shot div { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px -24px rgba(25,31,40,.35), 0 0 0 1px var(--line); }
.report-shot div::before { content: ""; display: block; height: 26px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 16px 13px, #FF5F57 4px, transparent 4.5px), radial-gradient(circle at 30px 13px, #FEBC2E 4px, transparent 4.5px), radial-gradient(circle at 44px 13px, #28C840 4px, transparent 4.5px), #F2F4F6; }
.report-shot img { width: 100%; }
.report-shot figcaption { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); text-align: right; }

/* 진행 순서 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; padding: 22px 20px; border-radius: 14px; background: var(--bg-2); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 16px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; }
.steps li.is-free { background: var(--mint); }
.steps li.is-free::before { background: #17A35B; }
.steps b { display: block; font-size: 17px; margin-bottom: 4px; }
.steps span { font-size: 14px; color: var(--ink-2); line-height: 1.5; display: block; }

/* 문의 */
.inq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; padding: 48px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.inq-side h2 { margin: 0 0 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.35; }
.inq-side p { margin: 0 0 28px; color: var(--ink-2); }
.inq-side dl { margin: 0; display: grid; gap: 12px; }
.inq-side dl div { display: flex; gap: 16px; font-size: 15px; }
.inq-side dt { width: 48px; color: var(--ink-3); }
.inq-side dd { margin: 0; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0; }
.field label i, .field legend i { color: #F04452; font-style: normal; margin-left: 2px; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,100,218,.12); }
.field.is-error input { border-color: #F04452; }
.field-err { display: none; font-size: 13px; font-weight: 600; color: #F04452; }
.field.is-error .field-err, .agree-err.is-on { display: block; }
.agree-err { margin: 8px 0 0; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.chips input:checked + span { background: var(--sky); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.chips input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.agree b { color: var(--ink); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.form-foot p { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 24em; }
.form-done { display: none; margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--sky); color: var(--brand); font-size: 14px; font-weight: 600; }
.form-done.is-on { display: block; }

/* FAQ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: -4px 0 20px; color: var(--ink-2); font-size: 15px; }

/* 푸터 */
.ft { margin-top: 120px; padding: 40px 0 48px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 13px; color: var(--ink-3); }
.ft-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 16px; }
.ft-links a { font-size: 14px; font-weight: 600; color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; }
.ft p { margin: 0 0 4px; }

/* =========================================================
   서브 페이지 (서비스 · 광고 · 자주 묻는 질문 · 광고 문의) — 흰 바탕, 가는 선, 글 위주
   ========================================================= */
.sp-head { padding: 80px 0 0; }
.sp-head h1 { margin: 0 0 16px; font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.2; }
.sp-head p { margin: 0; max-width: 36em; font-size: 18px; color: var(--ink-2); }
.sp-toc { display: flex; gap: 4px 28px; margin: 40px 0 0; padding: 0 0 16px; list-style: none; border-bottom: 1px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.sp-toc::-webkit-scrollbar { display: none; }
.sp-toc a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.sp-toc a:hover { color: var(--ink); }

.sp-sec { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding: 64px 0; border-bottom: 1px solid var(--line); }
.sp-sec > header h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.4; }
.sp-meta { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.sp-body { min-width: 0; }
.sp-lead { margin: 0 0 36px; max-width: 40em; font-size: 17px; color: var(--ink-2); }
.sp-body h3 { margin: 40px 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sp-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }

/* 휴대폰 프레임 — 캡처 화면을 같은 모양으로 감싼다 */
.phone { position: relative; width: 100%; max-width: 220px; aspect-ratio: 516 / 860; margin: 0 auto; padding: 6px; border-radius: 32px; background: #15191F; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 26px; background: #fff; }

/* 화면 모음: 회색 판 위에 휴대폰, 아래 설명 */
.sp-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; margin: 0; padding: 0; list-style: none; }
.sp-shots li > div { padding: 28px 0 0; border-radius: 12px; background: var(--bg-2); overflow: hidden; height: 300px; }
.sp-shots .phone { max-width: 180px; }
.sp-shots b { display: block; margin: 14px 0 2px; font-size: 15px; font-weight: 700; }
.sp-shots span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* 글 + 그림 한 쌍 */
.sp-pair { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.sp-panel { padding: 32px 0 0; border-radius: 12px; background: var(--bg-2); overflow: hidden; height: 400px; }
.sp-panel .phone { max-width: 210px; }

/* 정의 목록 (사양 · 기능) */
.sp-rows { margin: 0; border-top: 1px solid var(--ink); }
.sp-rows > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.sp-rows dt { font-size: 14px; color: var(--ink-3); }
.sp-rows dd { margin: 0; font-size: 15px; color: var(--ink); }
.sp-rows dd small { display: block; font-size: 13px; color: var(--ink-3); }

/* 3단 글 묶음 */
.sp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.sp-cols li { padding-top: 14px; border-top: 2px solid var(--ink); }
.sp-cols b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.sp-cols span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.65; }

/* 비교표 */
.sp-table { width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1px solid var(--ink); }
.sp-table th, .sp-table td { padding: 14px 12px 14px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sp-table tbody th { width: 30%; font-weight: 600; }
.sp-table td { color: var(--ink-2); }
.sp-table td + td { color: var(--ink); font-weight: 600; }

/* 브라우저 프레임 (관리자 화면) */
.browser { margin: 0; }
.browser > div { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgba(25,31,40,.4); }
.browser > div::before { content: ""; display: block; height: 24px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 14px 12px, #D1D6DB 3.5px, transparent 4px), radial-gradient(circle at 27px 12px, #D1D6DB 3.5px, transparent 4px), radial-gradient(circle at 40px 12px, #D1D6DB 3.5px, transparent 4px), #F7F8FA; }
.browser img { width: 100%; }
.browser figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* 예시 질문 */
.sp-quotes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.sp-quotes li { padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg-2); font-size: 14px; color: var(--ink-2); }

/* 숫자 순서 */
.sp-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; border-top: 1px solid var(--ink); }
.sp-steps li { counter-increment: s; display: grid; grid-template-columns: 48px 160px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sp-steps li::before { content: counter(s, decimal-leading-zero); color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.sp-steps b { font-weight: 700; }
.sp-steps span { color: var(--ink-2); }
.sp-steps em { font-style: normal; margin-left: 6px; font-size: 12px; font-weight: 700; color: #17A35B; }

/* 페이지 끝 문의 */
.sp-end { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 64px 0 0; }
.sp-end h2 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.035em; }
.sp-end p { margin: 0; font-size: 15px; color: var(--ink-2); }
.sp-end .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 24px; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color .15s, box-shadow .15s; }
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink:hover { background: #333D4B; }
.pill--line { box-shadow: inset 0 0 0 1px #D1D6DB; color: var(--ink); }
.pill--line:hover { background: var(--bg-2); }

.text-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 하단 문의 띠 (메인) */
.cta-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: 112px; padding: 36px 48px; border-radius: 20px; background: var(--mint); }
.cta-band h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.cta-band p { margin: 0; color: var(--ink-2); font-size: 15px; }
.cta-band .actions { display: flex; align-items: center; gap: 20px; }
.cta-band img { width: 84px; height: auto; }

/* ---------- 태블릿 ---------- */
@media (max-width: 1024px) {
  .gnb a { padding: 8px; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .slide-box { padding-left: 48px; }
}

/* ---------- 모바일 (≤768px) ---------- */
@media (max-width: 768px) {
  :root { --gutter: 16px; --hd-h: 60px; }
  .hd .wrap { gap: 12px; }
  .brand { font-size: 18px; }
  .gnb { display: none; }
  .hd-cta { height: 36px; padding: 0 14px; font-size: 13px; }
  .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; cursor: pointer; }
  .hd.is-open .gnb { display: flex; flex-direction: column; position: fixed; inset: var(--hd-h) 0 auto; padding: 8px 16px 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -20px rgba(0,0,0,.3); }
  .hd.is-open .gnb a { min-height: 52px; display: flex; align-items: center; font-size: 17px; color: var(--ink); }

  /* 카드 줄: 옆으로 넘기기 */
  .tiles { height: 230px; gap: 10px; margin: 20px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 40%; scroll-snap-align: start; }
  .tiles .tile.is-on { flex: 0 0 76%; }
  .feats { height: auto; grid-template-rows: none; gap: 10px; }
  .feat { height: 150px; }
  .feat-txt { left: 14px; top: 12px; }
  .feat-txt b { font-size: 15px; }
  .feat-mascot { width: 76px; }
  .bubble { left: 12px; bottom: 50px; font-size: 11px; }
  .feat-big { left: 14px; font-size: 36px; }

  .svc-title { font-size: 26px; }
  .svc-sub { font-size: 15px; margin-bottom: 24px; }
  .rail-track { gap: 10px; scroll-snap-type: x mandatory; padding-right: var(--gutter); }
  .rail-track li { scroll-snap-align: start; }
  .rail-card { width: 80vw; height: 240px; }
  .rail-card:hover { transform: none; }
  .rail-no { left: 18px; top: 18px; }
  .rail-txt { left: 20px; bottom: 18px; font-size: 20px; }
  .rail-bar { margin: 16px var(--gutter) 0 0; }
  .tile.is-on .tile-txt b { font-size: 26px; }
  .tile-txt { left: 16px; bottom: 16px; }
  .tile.is-on .tile-media { left: 58%; width: 108px; top: 26px; }
  .tile .tile-media { width: 80px; }
  .tile.is-on .tile-media--wide { left: 46%; width: 130%; }
  .tile.is-on .tile-media--icon { width: 110px; top: 30px; }
  .tile.is-on .tile-txt { right: 44%; }
  .tile-txt small { font-size: 13px; white-space: normal; line-height: 1.4; margin-bottom: 4px; }

  .promo { margin-top: 56px; }
  .slide-box { grid-template-columns: 1fr 96px; gap: 12px; min-height: 0; padding: 34px 16px 22px 20px; }
  .slide-tag { left: 16px; }
  .slide h3 { font-size: 18px; }
  .slide p { font-size: 14px; }
  .slide-art { height: auto; }
  .slide-art img { max-height: 92px; }

  .sec { padding-top: 72px; }
  .sec-title { font-size: 22px; margin-bottom: 20px; }
  .sec-title small { font-size: 15px; }

  .cards { grid-template-columns: 1fr; gap: 28px; }
  .slots { gap: 12px; }
  .slot h3 { font-size: 15px; margin-top: 12px; }
  .slot p { font-size: 13px; }

  .report { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
  .report h2 { font-size: 22px; }
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding: 16px; }
  .steps li::before { margin: 0; grid-row: span 2; }

  .inq { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
  .inq-side h2 { font-size: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }

  .ft { margin-top: 80px; }

  .sp-head { padding-top: 48px; }
  .sp-head h1 { font-size: 32px; }
  .sp-head p { font-size: 16px; }
  .sp-toc { gap: 20px; margin: 28px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 12px; }
  .sp-toc a { min-height: 44px; }
  .sp-sec { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
  .sp-lead { font-size: 15px; margin-bottom: 28px; }
  .sp-shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding-left: var(--gutter); }
  .sp-shots li { scroll-snap-align: start; }
  .sp-shots li > div { height: 260px; }
  .sp-pair { grid-template-columns: 1fr; gap: 28px; }
  .sp-panel { height: 360px; }
  .sp-rows > div { grid-template-columns: 96px 1fr; }
  .sp-cols { grid-template-columns: 1fr; gap: 20px; }
  .sp-steps li { grid-template-columns: 36px 1fr; }
  .sp-steps span { grid-column: 2; }
  .sp-end { flex-direction: column; align-items: flex-start; padding-top: 48px; }
  .sp-end .actions { width: 100%; }
  .pill { flex: 1 1 auto; }
  .cta-band { grid-template-columns: 1fr; margin-top: 72px; padding: 28px 20px; }
  .cta-band .actions { justify-content: space-between; }
  .cta-band img { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 광고 문의 페이지 */
.sp-sec--top { margin-top: 40px; border-top: 1px solid var(--ink); }
.sp-contact { margin: 20px 0 24px; }
.sp-contact div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sp-contact dt { font-size: 13px; color: var(--ink-3); }
.sp-contact dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; }
.chips input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.sp-body.faq { border-top: 1px solid var(--ink); }
.sp-body.faq summary { font-size: 16px; }

/* =========================================================
   서브 페이지 — 움직임 (메인처럼 살아 있게)
   ========================================================= */
/* 스크롤하면 부드럽게 올라온다 (JS 가 있을 때만) */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.1,1), transform .7s cubic-bezier(.2,.7,.1,1); }
.js .rv.is-in { opacity: 1; transform: none; }

/* 머리 아래 큰 카드 (메인 주력 서비스 카드와 같은 방식) */
.sp-tiles { margin-top: 40px; }
.sp-tiles .tiles { height: 320px; }

/* 휴대폰 안 화면 + 덧씌우는 창 */
.screen { position: relative; height: 100%; overflow: hidden; border-radius: 26px; background: #fff; }
.screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* 화면 레일 (서브 페이지 안) — 메인 레일과 같은 JS */
.shot-rail { margin-right: 0; }
.shot-rail .rail-track { padding-top: 4px; }
.shot { margin: 0; width: 236px; }
.shot-panel { height: 330px; padding: 30px 0 0; overflow: hidden; border-radius: 14px; background: var(--p-bg, var(--bg-2)); transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.shot:hover .shot-panel { transform: translateY(-6px); }
.shot .phone { max-width: 186px; }
.shot figcaption { margin-top: 14px; }
.shot b { display: block; font-size: 15px; font-weight: 700; }
.shot span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.web-shot { width: 560px; }
.web-shot .browser > div { transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.web-shot:hover .browser > div { transform: translateY(-6px); }
.shot-rail .rail-bar { margin: 18px 0 0; }

/* 노선색 판 + 기울어진 휴대폰 */
.sp-panel--color { position: relative; background: var(--p-bg); }
.sp-panel--color .phone { transform: rotate(-5deg) translateY(10px); transition: transform .45s cubic-bezier(.2,.7,.1,1); box-shadow: 0 30px 50px -24px rgba(0,0,0,.45); }
.sp-panel--color:hover .phone { transform: rotate(0) translateY(0); }

/* 광고 무대: 휴대폰 속 배너가 번갈아 바뀐다 */
.ad-stage { display: grid; grid-template-columns: 1fr 300px; align-items: center; gap: 48px; margin-top: 40px; padding: 48px 64px 0; border-radius: 20px; background: #191F28; color: #fff; overflow: hidden; }
.ad-stage h2 { margin: 0 0 14px; font-size: 32px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.3; }
.ad-stage p { margin: 0 0 28px; font-size: 16px; color: rgba(255,255,255,.72); max-width: 26em; }
.ad-stage-txt { padding-bottom: 48px; }
.ad-count { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; font-size: 14px; color: rgba(255,255,255,.72); }
.ad-count i { display: block; width: 120px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.ad-count i::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: #fff; transition: width .4s; }
.pill--white { background: #fff; color: var(--ink); }
.pill--white:hover { background: #E9ECEF; }
.ad-stage .phone { max-width: 270px; margin-bottom: -60px; }
.bwin { position: absolute; left: 4%; top: 53%; width: 92%; height: 13.2%; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255,255,255,.25); }
.bwin span { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateX(14%); transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.1,1); }
.bwin span.is-on { opacity: 1; transform: none; }
.bwin span.is-out { opacity: 0; transform: translateX(-14%); }
.phone .bwin img { display: block; max-width: none; height: auto; object-fit: initial; border-radius: 0; background: none; }
.bwin .b-dg img, .bwin .b-dh img { width: 108.7%; margin: -97.3% 0 0 -4.35%; }
.bwin .b-ad img { width: 111.4%; margin: -187.7% 0 0 -5.7%; }

/* 숫자가 올라가는 지표 */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 32px; border-top: 1px solid var(--ink); }
.kpis div { padding: 18px 0 0; }
.kpis div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.kpis dt { font-size: 13px; color: var(--ink-3); }
.kpis dd { margin: 4px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .sp-tiles { margin-top: 28px; }
  .sp-tiles .tiles { height: 240px; }
  .shot { width: 200px; }
  .shot-panel { height: 290px; }
  .shot .phone { max-width: 160px; }
  .web-shot { width: 300px; }
  .shot-rail .rail-track { margin-right: calc(var(--gutter) * -1); }
  .ad-stage { grid-template-columns: 1fr; gap: 8px; padding: 32px 20px 0; margin-top: 28px; }
  .ad-stage h2 { font-size: 24px; }
  .ad-stage-txt { padding-bottom: 0; }
  .ad-stage .phone { max-width: 220px; margin-bottom: -48px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kpis dd { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
}

/* =========================================================
   서비스 · 광고 — 설명서가 아니라 홍보 페이지 (mk-*)
   큰 문장, 노선색 띠, 목업은 섹션당 한 장, 움직임
   ========================================================= */
.mk-hero { padding: 88px 0 56px; }
.mk-hero h1 { margin: 0 0 20px; font-size: 60px; font-weight: 800; letter-spacing: -0.055em; line-height: 1.15; }
.mk-hero p { margin: 0 0 32px; max-width: 30em; font-size: 19px; color: var(--ink-2); }
.mk-hero .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-offer { display: inline-block; margin: 0 0 20px; font-size: 15px; font-weight: 700; color: #17A35B; }

/* 노선색 띠: 큰 문장 + 휴대폰 한 장 + 내려받기 */
.mk-band { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; margin-top: 24px; padding: 64px 64px 0; border-radius: 24px; background: var(--b-bg); color: #fff; overflow: hidden; }
.mk-band h2 { margin: 0 0 16px; font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.2; }
.mk-band p { margin: 0 0 28px; max-width: 26em; font-size: 17px; color: rgba(255,255,255,.82); }
.mk-band-txt { padding-bottom: 64px; }
.mk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.mk-tags li { padding: 6px 12px; border-radius: 16px; background: rgba(255,255,255,.16); font-size: 14px; font-weight: 600; }
.stores { display: flex; flex-wrap: wrap; gap: 8px; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 14px; background: #fff; color: var(--ink); transition: transform .2s; }
.store:hover { transform: translateY(-2px); }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: 11px; color: var(--ink-3); }
.store b { font-size: 15px; font-weight: 700; }
.store--dark { background: var(--ink); color: #fff; }
.store--dark small { color: rgba(255,255,255,.6); }
.mk-band .phone { max-width: 290px; margin-bottom: -90px; transform: rotate(-7deg); box-shadow: 0 40px 60px -30px rgba(0,0,0,.5); transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.mk-band:hover .phone { transform: rotate(-2deg) translateY(-12px); }
.mk-band--rev { grid-template-columns: .9fr 1.1fr; }
.mk-band--rev .mk-band-txt { order: 2; }

/* 섹션 머리 */
.mk-sec { padding-top: 120px; }
.mk-h { margin: 0 0 12px; font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.25; }
.mk-sub { margin: 0 0 40px; max-width: 34em; font-size: 17px; color: var(--ink-2); }

/* 글 위주 카드 레일 */
.mk-rail .rail-track { padding-top: 6px; }
.mk-card { display: flex; flex-direction: column; justify-content: space-between; width: 300px; height: 340px; padding: 28px; border-radius: 20px; background: var(--k-bg, var(--bg-2)); color: var(--k-fg, var(--ink)); transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.mk-card:hover { transform: translateY(-8px); }
.mk-card > i { font-style: normal; font-size: 14px; font-weight: 700; opacity: .55; font-variant-numeric: tabular-nums; }
.mk-card div > b { display: block; margin-bottom: 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.3; }
.mk-card div > span { display: block; font-size: 15px; line-height: 1.6; opacity: .78; }
.mk-rail .rail-bar { margin: 20px 64px 0 0; }

/* 대화가 저절로 흘러간다 */
.mk-chat { display: grid; grid-template-columns: 1fr 380px; align-items: center; gap: 56px; padding: 64px; border-radius: 24px; background: #191F28; color: #fff; overflow: hidden; }
.mk-chat h2 { margin: 0 0 16px; font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.25; }
.mk-chat p { margin: 0 0 32px; color: rgba(255,255,255,.72); font-size: 17px; max-width: 26em; }
.mk-chat .meta { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: rgba(255,255,255,.6); }
.mk-chat .meta b { display: block; font-size: 28px; color: #fff; letter-spacing: -0.04em; }
.chat { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; background: #fff; color: var(--ink); min-height: 360px; }
.chat-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.chat-top img { width: 32px; height: 32px; }
.chat-top small { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--sky); padding: 3px 8px; border-radius: 10px; }
.bub { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s cubic-bezier(.2,.7,.1,1); }
.bub--me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--brand); color: #fff; }
.bub--ai { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--bg-2); }
.chat.is-in .bub { opacity: 1; transform: none; }
.chat.is-in .bub:nth-of-type(1) { transition-delay: .2s; }
.chat.is-in .bub:nth-of-type(2) { transition-delay: 1.1s; }
.chat.is-in .bub:nth-of-type(3) { transition-delay: 2.2s; }
.chat.is-in .bub:nth-of-type(4) { transition-delay: 3.1s; }
.js .chat.rv { opacity: 1; transform: none; }

/* 비회원 / 회원 두 장 */
.mk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-duo > div { padding: 36px; border-radius: 20px; background: var(--bg-2); }
.mk-duo > div:last-child { background: var(--brand); color: #fff; }
.mk-duo h3 { margin: 0 0 20px; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
.mk-duo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; }

/* 업종 흐르는 띠 */
.marquee { margin-top: 64px; overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; }
.marquee-track { display: flex; width: max-content; animation: mq 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; gap: 48px; margin: 0; padding: 0 24px; list-style: none; }
.marquee li { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: #C5CBD3; white-space: nowrap; }
.marquee li:nth-child(3n+1) { color: var(--ink); }
@keyframes mq { to { transform: translateX(-50%); } }

/* 큰 문장 세 줄 */
.mk-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.mk-points li { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.mk-points b { font-size: 30px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.3; }
.mk-points span { align-self: end; font-size: 16px; color: var(--ink-2); }
.js .mk-points.rv { opacity: 1; transform: none; }
.js .mk-points.rv li { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.1,1); }
.js .mk-points.rv.is-in li { opacity: 1; transform: none; }
.js .mk-points.rv.is-in li:nth-child(2) { transition-delay: .15s; }
.js .mk-points.rv.is-in li:nth-child(3) { transition-delay: .3s; }

/* 성과 숫자 (어두운 띠) */
.mk-kpi { padding: 64px; border-radius: 24px; background: #191F28; color: #fff; }
.mk-kpi h2 { margin: 0 0 12px; font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.25; }
.mk-kpi > p { margin: 0 0 48px; color: rgba(255,255,255,.72); font-size: 17px; max-width: 34em; }
.mk-kpi .kpis { border-top-color: rgba(255,255,255,.3); margin: 0; }
.mk-kpi .kpis div + div { border-left-color: rgba(255,255,255,.15); }
.mk-kpi .kpis dt { color: rgba(255,255,255,.6); }
.mk-kpi .kpis dd { font-size: 48px; color: #fff; }
.mk-kpi small { display: block; margin-top: 24px; font-size: 13px; color: rgba(255,255,255,.5); }

/* 진행 순서: 선이 차오른다 */
.mk-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0; padding: 32px 0 0; list-style: none; }
.mk-steps::before, .mk-steps::after { content: ""; position: absolute; left: 0; top: 7px; height: 2px; width: 100%; background: var(--line); }
.mk-steps::after { width: 0; background: var(--ink); transition: width 1.6s cubic-bezier(.2,.7,.1,1); }
.mk-steps.is-in::after { width: 100%; }
.js .mk-steps.rv { opacity: 1; transform: none; }
.mk-steps li { position: relative; }
.mk-steps li::before { content: ""; position: absolute; top: -32px; left: 0; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.mk-steps li.is-free::before { background: #17A35B; box-shadow: none; }
.mk-steps small { display: block; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mk-steps b { display: block; margin: 2px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.035em; }
.mk-steps span { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.mk-steps .is-free b { color: #17A35B; }

.mk-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px; font-size: 15px; color: var(--ink-2); }
.mk-soon b { margin-right: 6px; color: var(--ink); }
.mk-soon span { padding: 6px 12px; border-radius: 16px; background: var(--bg-2); }

.mk-end { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 120px; padding: 56px 64px; border-radius: 24px; background: var(--mint); }
.mk-end h2 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.045em; }
.mk-end p { margin: 0; color: var(--ink-2); }
.mk-end .actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 768px) {
  .mk-hero { padding: 48px 0 32px; }
  .mk-hero h1 { font-size: 36px; }
  .mk-hero p { font-size: 16px; }
  .mk-band, .mk-band--rev { grid-template-columns: 1fr; gap: 12px; padding: 36px 24px 0; border-radius: 20px; }
  .mk-band--rev .mk-band-txt { order: 0; }
  .mk-band h2 { font-size: 30px; }
  .mk-band p { font-size: 15px; }
  .mk-band-txt { padding-bottom: 0; }
  .mk-band .phone { max-width: 220px; margin-bottom: -70px; }
  .store { flex: 1 1 140px; justify-content: center; }
  .mk-sec { padding-top: 80px; }
  .mk-h { font-size: 28px; }
  .mk-sub { font-size: 15px; margin-bottom: 28px; }
  .mk-card { width: 250px; height: 290px; padding: 22px; }
  .mk-card div > b { font-size: 22px; }
  .mk-rail .rail-track { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scroll-snap-type: x mandatory; }
  .mk-rail .rail-track li { scroll-snap-align: start; }
  .mk-rail .rail-bar { margin-right: 0; }
  .mk-chat { grid-template-columns: 1fr; gap: 32px; padding: 36px 20px 20px; }
  .mk-chat h2 { font-size: 28px; }
  .chat { min-height: 0; padding: 18px; }
  .mk-duo { grid-template-columns: 1fr; }
  .mk-duo > div { padding: 28px 24px; }
  .marquee { margin-top: 40px; padding: 16px 0; }
  .marquee li { font-size: 22px; }
  .mk-points li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .mk-points b { font-size: 23px; }
  .mk-kpi { padding: 36px 20px; }
  .mk-kpi h2 { font-size: 28px; }
  .mk-kpi .kpis dd { font-size: 32px; }
  .mk-steps { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 36px; }
  .mk-steps::before { left: 7px; top: 0; width: 2px; height: 100%; }
  .mk-steps::after { left: 7px; top: 0; width: 2px; height: 0; transition: height 1.6s cubic-bezier(.2,.7,.1,1); }
  .mk-steps.is-in::after { width: 2px; height: 100%; }
  .mk-steps li { padding-bottom: 24px; }
  .mk-steps li::before { top: 2px; left: -36px; }
  .mk-end { flex-direction: column; align-items: flex-start; margin-top: 80px; padding: 32px 24px; }
  .mk-end h2 { font-size: 24px; }
  .mk-end .actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .bub { opacity: 1; transform: none; }
  .js .mk-points.rv li { opacity: 1; transform: none; }
  .mk-steps::after { width: 100%; }
}
.chat .bub { margin: 0; max-width: 84%; font-size: 15px; }
.chat .bub--ai { color: var(--ink); }
.chat .bub--me { color: #fff; }
.store b, .store small { white-space: nowrap; }
@media (max-width: 768px) { .store { padding: 0 12px; gap: 8px; } .store b { font-size: 14px; } }

/* =========================================================
   보완: 히어로 오른쪽 그림, 휴대폰 둥실, 헤더 그림자
   ========================================================= */
/* 헤더: 조금 내려가면 그림자 */
.hd { transition: box-shadow .25s; }
.hd.is-scrolled { box-shadow: 0 6px 20px -12px rgba(25,31,40,.25); }


/* 히어로: 왼쪽 글, 오른쪽 그림 */
.mk-hero--art { display: grid; grid-template-columns: 1fr 380px; align-items: center; gap: 40px; }
.mk-art { position: relative; height: 340px; }

/* 서비스: 캐릭터 + 떠다니는 노선 칩 */
.mk-art .mascot-big { position: absolute; left: 50%; top: 50%; width: 190px; height: auto; margin: -95px 0 0 -95px; animation: bob 4s ease-in-out infinite; }
.chip-float { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 12px 28px -14px rgba(25,31,40,.35), 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; white-space: nowrap; animation: bob 5s ease-in-out infinite; }
.chip-float i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chip-float em { font-style: normal; color: var(--c); }
.chip-float:nth-of-type(1) { left: 0; top: 34px; animation-delay: -1s; }
.chip-float:nth-of-type(2) { right: -24px; top: 132px; animation-delay: -2.5s; }
.chip-float:nth-of-type(3) { left: 24px; bottom: 30px; animation-delay: -3.5s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* 광고: 돌아가는 동그라미 배지 */
.rot-badge { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; background: #E6F6EE; }
.rot-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.rot-badge text { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; fill: #17A35B; }
.rot-badge div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rot-badge small { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.rot-badge b { font-size: 76px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--ink); }
.rot-badge img { position: absolute; right: -18px; bottom: -6px; width: 92px; height: auto; animation: bob 4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 노선색 띠의 휴대폰: 가만히 있어도 살짝 둥실 */
.mk-band .phone { animation: band-bob 6s ease-in-out infinite; }
.mk-band:hover .phone { animation-play-state: paused; }
@keyframes band-bob { 50% { translate: 0 -10px; } }

@media (max-width: 768px) {
  .mk-hero--art { grid-template-columns: 1fr; gap: 8px; }
  .mk-art { height: 250px; }
  .mk-art .mascot-big { left: 34%; width: 140px; margin: -70px 0 0 -70px; }
  .chip-float { padding: 8px 12px; font-size: 13px; }
  .chip-float:nth-of-type(1) { top: 10px; }
  .chip-float:nth-of-type(2) { top: 100px; right: 0; }
  .chip-float:nth-of-type(3) { bottom: 10px; }
  .rot-badge { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .rot-badge b { font-size: 60px; }
  .rot-badge img { width: 72px; right: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-art .mascot-big, .chip-float, .rot-badge svg, .rot-badge img, .mk-band .phone { animation: none; }
}

/* 메인 카드 줄: 좁은 카드에서도 제목이 잘리지 않게 (두 줄 허용, 최소 폭) */
.tiles .tile { min-width: 128px; }
.tiles .tile.is-on { flex-grow: 2.4; }
.tiles .tile--app { flex-grow: 1.35; }
.tile-txt { left: 16px; right: 16px; bottom: 18px; }
.tile-txt b { white-space: normal; font-size: 18px; line-height: 1.3; word-break: keep-all; }
.tile-txt small { white-space: normal; line-height: 1.4; margin-bottom: 4px; }
.tile.is-on .tile-txt { left: 22px; right: 46%; bottom: 22px; }
.tile.is-on .tile-txt b { font-size: 30px; line-height: 1.2; }
@media (max-width: 768px) { .tiles .tile { min-width: 0; } .tile.is-on .tile-txt { right: 44%; } .tile.is-on .tile-txt b { font-size: 24px; } }

/* =========================================================
   소식 (news.html)
   ========================================================= */
.nw-feature { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 48px 56px; border-radius: 24px; background: var(--mint); transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.nw-feature:hover { transform: translateY(-4px); }
.nw-feature h2 { margin: 14px 0 12px; font-size: 34px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.25; }
.nw-feature p { margin: 0 0 20px; max-width: 34em; color: var(--ink-2); }
.nw-feature img { width: 160px; height: auto; animation: bob 4s ease-in-out infinite; }
.nw-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.nw-more::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.nw-feature:hover .nw-more::after { transform: translateX(3px) rotate(45deg); }

.nw-cat { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--bg-2); font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.nw-cat--ad { background: #17A35B; color: #fff; }
.nw-cat--update { background: var(--sky); color: var(--brand); }

.nw-filter { display: flex; gap: 8px; margin: 64px 0 0; padding: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
.nw-filter::-webkit-scrollbar { display: none; }
.nw-filter button { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 20px; background: var(--bg-2); font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.nw-filter button:hover { color: var(--ink); }
.nw-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.nw-list { border-top: 1px solid var(--ink); }
.nw-list details { border-bottom: 1px solid var(--line); }
.nw-list summary { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px; padding: 22px 4px; list-style: none; cursor: pointer; transition: background-color .2s; }
.nw-list summary::-webkit-details-marker { display: none; }
.nw-list summary:hover { background: #FAFBFC; }
.nw-list summary b { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.nw-list time { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nw-list details[open] summary b { color: var(--brand); }
.nw-body { padding: 0 4px 28px 116px; max-width: 760px; color: var(--ink-2); animation: nw-open .35s ease-out; }
.nw-body p { margin: 0 0 12px; }
@keyframes nw-open { from { opacity: 0; transform: translateY(-6px); } }
.nw-empty { padding: 40px 0; text-align: center; color: var(--ink-3); }

@media (max-width: 768px) {
  .nw-feature { grid-template-columns: 1fr; padding: 32px 24px; gap: 8px; }
  .nw-feature h2 { font-size: 24px; }
  .nw-feature img { width: 96px; justify-self: end; margin-top: -40px; }
  .nw-filter { margin: 40px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 16px; }
  .nw-filter button { height: 44px; }
  .nw-list summary { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 0; }
  .nw-list summary .nw-cat { grid-column: 1; justify-self: start; }
  .nw-list summary b { grid-column: 1 / -1; grid-row: 2; font-size: 16px; }
  .nw-list time { grid-column: 2; grid-row: 1; }
  .nw-body { padding: 0 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-feature img, .nw-body { animation: none; }
}
.nw-list summary .nw-cat { justify-self: start; }

/* =========================================================
   디테일 다듬기
   ========================================================= */
/* 자주 묻는 질문 · 광고 문의 제목을 다른 페이지(mk-hero)와 같은 크기로 */
.sp-head { padding: 88px 0 0; }
.sp-head h1 { font-size: 60px; letter-spacing: -0.055em; line-height: 1.15; margin-bottom: 20px; }
.sp-head p { font-size: 19px; max-width: 30em; }

/* 푸터: 사이트 메뉴 줄 */
.ft-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.ft-nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ft-nav a:hover { color: var(--brand); }
.ft-brand { gap: 8px; margin-right: 12px; font-weight: 800 !important; letter-spacing: -0.03em; }
.ft-brand img { width: 24px; height: 24px; }
.ft-links a { font-weight: 500; color: var(--ink-3); }
.ft-links a b { color: var(--ink-2); }

/* 레일: 키보드로 들어오면 테두리 */
.rail-track:focus-visible { outline-offset: 6px; border-radius: 16px; }

/* 링크 카드들: 누를 때 살짝 눌림 */
.tile:active, .rail-card:active, .nw-feature:active, .store:active, .pill:active { transform: scale(.985); }

@media (max-width: 768px) {
  .sp-head { padding-top: 48px; }
  .sp-head h1 { font-size: 36px; }
  .sp-head p { font-size: 16px; }
  .ft-nav { gap: 0 18px; }
  .ft-brand { width: 100%; margin: 0 0 4px; }
}

/* =========================================================
   v1.2 — 화면 밀도 · 완성도 보강
   메인 소식 · 앱 내려받기, 기능 카드 속 실제 화면, 광고 조건 그림,
   소식 요약, 질문 검색, 문의 진행 순서, 푸터 3단
   ========================================================= */
/* 섹션 사이를 조금 좁혀 한 화면에 더 담는다 */
.sec { padding-top: 96px; }
.mk-sec { padding-top: 104px; }

/* 파스텔 배너: 오른쪽 끝 화살표 */
.slide-box { padding-right: 104px; }
.slide-box::after { content: ""; position: absolute; right: 32px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23191F28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; box-shadow: 0 6px 16px -10px rgba(25,31,40,.4); transition: transform .2s; }
.slide-box:hover::after { transform: translateX(3px); }

/* 메인: 소식 + 앱 내려받기 */
.hm-info { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 96px; }
.hm-box { padding: 24px 32px 28px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.hm-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.035em; }
.hm-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.hm-more::after { content: ""; width: 6px; height: 6px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); }
.hm-more:hover { color: var(--ink); }
.hm-news, .hm-apps { margin: 0; padding: 0; list-style: none; }
.hm-news li + li, .hm-apps li + li { border-top: 1px solid var(--line); }
.hm-news a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; }
.hm-news .nw-cat { justify-self: start; }
.hm-news b { overflow: hidden; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; transition: color .15s; }
.hm-news a:hover b { color: var(--brand); }
.hm-news time { font-size: 13px; color: var(--ink-3); }
.hm-apps li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 13px 0; }
.hm-apps img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.hm-apps b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.hm-apps span { display: block; font-size: 13px; color: var(--ink-2); }
.hm-stores { display: flex; gap: 6px; margin: 0; }
.hm-stores a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); transition: background-color .15s; }
.hm-stores a:hover { background: #E9ECEF; }
.hm-note { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.hm-info + .cta-band { margin-top: 16px; }

/* 서비스: 기능 카드 속 실제 앱 화면 조각 */
.mk-card--shot, .mk-card--viz { justify-content: flex-start; height: 400px; }
.mk-card--shot > div, .mk-card--viz > div { margin-top: auto; }
.mk-shot { display: block; height: 150px; margin: 16px -6px 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px -16px rgba(25,31,40,.45), 0 0 0 1px rgba(25,31,40,.06); }
.mk-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 0%); transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.mk-card:hover .mk-shot img { transform: scale(1.04); }

/* 서비스: 비회원 · 회원 목록 체크 */
.mk-duo li { display: flex; gap: 10px; align-items: flex-start; }
.mk-duo li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.mk-duo > div:last-child li::before { background-color: rgba(255,255,255,.22); }

/* 광고: 조건 카드 속 작은 그림 */
.mk-viz { display: block; margin-top: 22px; }
.viz-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 48px; }
.viz-hours i { border-radius: 2px; background: currentColor; opacity: .14; }
.viz-hours i.on { opacity: 1; background: #6EA8FF; }
.viz-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; opacity: .55; }
.viz-ticks em { font-style: normal; }
.viz-area { display: grid; gap: 6px; }
.viz-area > span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; }
.viz-area i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.viz-area em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.viz-days { display: flex; gap: 5px; }
.viz-days i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.viz-days i.on { background: var(--ink); color: #fff; }
.viz-link { display: flex; flex-wrap: wrap; gap: 6px; }
.viz-link > span { padding: 7px 12px; border-radius: 16px; background: rgba(255,255,255,.2); font-size: 13px; font-weight: 600; }
.viz-period { display: flex; align-items: center; gap: 8px; }
.viz-period > span { padding: 8px 10px; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 700; }
.viz-period i { flex: 1; height: 4px; border-radius: 2px; background: var(--ink); }
.viz-label > span { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #7B3FE4, #E0367A); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.viz-label em { padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.32); font-style: normal; font-size: 11px; }

/* 광고: 성과 띠 아래 실제 관리자 화면 */
.mk-kpi { overflow: hidden; }
.mk-kpi-shot { margin: 40px 0 -64px; }
.mk-kpi-shot > div { height: 400px; box-shadow: 0 -20px 50px -30px rgba(0,0,0,.6); }
.mk-kpi-shot img { width: 100%; height: calc(100% - 24px); object-fit: cover; object-position: top; }

/* 소식: 제목 아래 한 줄 요약 */
.nw-t { display: grid; gap: 2px; min-width: 0; }
.nw-t small { overflow: hidden; font-size: 14px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.nw-list details[open] .nw-t small { display: none; }

/* 자주 묻는 질문: 머리 오른쪽 문의 카드, 묶음 + 검색 줄 */
.sp-head--aside { display: grid; grid-template-columns: 1fr 340px; align-items: end; gap: 40px; }
.help-card { display: grid; padding: 20px 24px 8px; border-radius: 20px; background: var(--bg-2); }
.help-card b { margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.help-card a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; border-top: 1px solid var(--line); font-size: 14px; }
.help-card span { color: var(--ink-2); }
.help-card em { font-style: normal; font-weight: 700; transition: color .15s; }
.help-card a:hover em { color: var(--brand); }
.faq-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 40px; border-bottom: 1px solid var(--ink); }
.faq-bar .sp-toc { margin: 0; padding-bottom: 12px; border: 0; }
.sp-toc small { margin-left: 4px; font-size: 12px; color: var(--ink-3); }
.faq-search { display: flex; align-items: center; gap: 8px; width: 320px; height: 44px; margin-bottom: 12px; padding: 0 16px; border-radius: 22px; background: var(--bg-2); color: var(--ink-3); transition: box-shadow .15s; }
.faq-search:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.faq-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; color: var(--ink); }
.faq-none { margin: 0; padding: 56px 0; text-align: center; color: var(--ink-2); }
.sp-sec > header { align-self: start; position: sticky; top: calc(var(--hd-h) + 24px); }

/* 광고 문의: 왼쪽에 무료 안내 + 진행 순서 */
.sp-sec--top { grid-template-columns: 280px 1fr; }
.ct-free { display: grid; gap: 2px; margin: 0 0 28px; padding: 16px 18px; border-radius: 14px; background: var(--mint); }
.ct-free b { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.ct-free span { font-size: 13px; color: var(--ink-2); }
.ct-h { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.ct-steps { position: relative; margin: 0 0 24px; padding: 0 0 0 24px; list-style: none; }
.ct-steps::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 22px; width: 2px; background: var(--line); }
.ct-steps li { position: relative; padding-bottom: 14px; }
.ct-steps li::before { content: ""; position: absolute; left: -24px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.ct-steps li.is-free::before { background: #17A35B; box-shadow: none; }
.ct-steps b { display: block; font-size: 15px; }
.ct-steps span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* 푸터: 회사 소개 + 메뉴 3단 */
.ft { padding: 56px 0 40px; }
.ft-top { display: grid; grid-template-columns: 1fr auto; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.ft-about .ft-brand { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-size: 18px; color: var(--ink); }
.ft-about > p { margin: 8px 0 20px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.ft-cs { display: flex; gap: 32px; margin: 0; }
.ft-cs dt { font-size: 12px; color: var(--ink-3); }
.ft-cs dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.ft-cols { display: grid; grid-template-columns: repeat(3, 140px); gap: 24px; }
.ft-cols h2 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.ft-cols ul { margin: 0; padding: 0; list-style: none; }
.ft-cols a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.ft-cols a:hover { color: var(--ink); }
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 16px; }
.ft-bottom .ft-links { margin: 0; }
.ft-bottom p { margin: 0; }
.ft .ft-note { margin: 6px 0 0; font-size: 12px; }

@media (max-width: 768px) {
  .sec { padding-top: 72px; }
  .mk-sec { padding-top: 80px; }
  .slide-box { padding-right: 16px; }
  .slide-box::after { display: none; }

  .hm-info { grid-template-columns: 1fr; gap: 12px; margin-top: 64px; }
  .hm-box { padding: 16px 20px 20px; }
  .hm-news a { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; }
  .hm-news b { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .hm-apps li { grid-template-columns: 44px 1fr auto; gap: 12px; }
  .hm-apps img { width: 44px; height: 44px; border-radius: 12px; }
  .hm-info + .cta-band { margin-top: 12px; }

  .mk-card--shot, .mk-card--viz { height: 350px; }
  .mk-shot { height: 124px; margin: 12px -4px 0; }
  .viz-days i { width: 28px; height: 28px; font-size: 12px; }

  .mk-kpi-shot { margin: 28px -8px -36px; }
  .mk-kpi-shot > div { height: 240px; }

  .nw-list summary .nw-t { grid-column: 1 / -1; grid-row: 2; }
  .nw-t small { white-space: normal; font-size: 13px; }

  .sp-head--aside { grid-template-columns: 1fr; gap: 24px; }
  .faq-bar { flex-direction: column-reverse; align-items: stretch; gap: 8px; margin-top: 28px; }
  .faq-bar .sp-toc { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .faq-search { width: 100%; margin: 0; }
  .sp-sec > header { position: static; }

  .sp-sec--top { grid-template-columns: 1fr; }
  .ct-h, .ct-steps { display: none; }
  .ct-free { margin-bottom: 16px; }

  .ft { padding: 40px 0 32px; }
  .ft-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 24px; }
  .ft-cs { flex-wrap: wrap; gap: 0 28px; }
  .ft-cols { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ft-cols a, .ft-bottom .ft-links a, .ft-cs a { min-height: 44px; display: inline-flex; align-items: center; }
  .ft-cs dd { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-card:hover .mk-shot img { transform: none; }
}

/* =========================================================
   좌우 여백 말랑한 도형 — 1280px 이상에서만, 연한 파스텔
   본문 뒤(z-index -1)에 깔려 카드가 덮는다. 바깥 끝으로 조금 잘려 나가도 된다
   ========================================================= */
.side-deco { display: none; position: absolute; left: 0; right: 0; top: var(--hd-h); z-index: -1; overflow: hidden; pointer-events: none; }
.side-deco i { position: absolute; width: var(--s); height: var(--s); background: var(--c); transform: translate(-50%, 0) rotate(var(--r)); }
.side-deco .sd-l { left: calc((100% - var(--wrap) - var(--gutter) * 2) / 2 * var(--x)); }
.side-deco .sd-r { left: calc(100% - (100% - var(--wrap) - var(--gutter) * 2) / 2 * var(--x)); }
.sd-blob { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; }
.sd-blob2 { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; }
.sd-soft { border-radius: 34%; }
.side-deco .sd-pill { height: calc(var(--s) * .46); border-radius: 999px; }
.side-deco .sd-ring { background: none; box-shadow: inset 0 0 0 calc(var(--s) * .16) var(--c); border-radius: 50%; }
@media (min-width: 1280px) { .side-deco { display: block; } }
@media print { .side-deco { display: none !important; } }

/* =========================================================
   커뮤니티 게시판 (community · community-post · community-write)
   전통적인 표 목록 · 글 보기 · 댓글 · 글쓰기. 모바일에서는 표가 한 줄 목록이 된다
   ========================================================= */
.pill svg { margin-right: 6px; }
.bd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bd-tabs { display: flex; gap: 8px; margin: 40px 0 0; overflow-x: auto; scrollbar-width: none; }
.bd-tabs::-webkit-scrollbar { display: none; }
.bd-tabs button { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 20px; background: var(--bg-2); font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.bd-tabs button:hover { color: var(--ink); }
.bd-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bd-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-bottom: 14px; }
.bd-total { margin: 0; font-size: 14px; color: var(--ink-2); }
.bd-total b { color: var(--ink); }
.bd-search { display: flex; gap: 6px; }
.bd-search select, .bd-search input { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 15px; }
.bd-search input { width: 220px; }
.bd-search select:focus, .bd-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,100,218,.12); }

.bd-table { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 2px solid var(--ink); }
.bd-table th { height: 48px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-3); text-align: center; }
.bd-table td { height: 58px; padding: 0 6px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); text-align: center; }
.bd-table .bd-no { width: 72px; }
.bd-table .bd-cat { width: 84px; }
.bd-table .bd-who { width: 124px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bd-table .bd-date { width: 108px; }
.bd-table .bd-view { width: 72px; }
.bd-table .bd-up { width: 64px; }
.bd-table th.bd-title { text-align: left; padding-left: 12px; }
.bd-table td.bd-title { overflow: hidden; padding-left: 12px; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.bd-title a { font-size: 15px; font-weight: 600; color: var(--ink); }
.bd-title a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.bd-table tbody tr { transition: background-color .15s; }
.bd-rows tr:hover { background: #FAFBFC; }
.bd-notice tr { background: #F8F9FB; }
.bd-notice .bd-title a { font-weight: 700; }
.bd-cm { margin-left: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--brand); }
.bd-new { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 4px; background: #F04452; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; vertical-align: 1px; }
.bd-pic { margin-left: 6px; vertical-align: -2px; color: var(--ink-3); }
.bd-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--bg-2); font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.bd-tag--qna { background: var(--sky); color: var(--brand); }
.bd-tag--commute { background: #FFF0E6; color: #B4450C; }
.bd-tag--trip { background: var(--mint); color: #0F7F47; }
.bd-tag--notice { background: var(--ink); color: #fff; }
.bd-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bd-empty { margin: 0; padding: 56px 0; border-bottom: 1px solid var(--line); text-align: center; color: var(--ink-2); }

.bd-foot { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; }
.bd-foot > .pill { position: absolute; right: 0; }
.bd-pages { display: flex; gap: 4px; }
.bd-pages a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: background-color .15s; }
.bd-pages a:hover { background: var(--bg-2); color: var(--ink); }
.bd-pages a[aria-current="page"] { background: var(--ink); color: #fff; }
.bd-pg-arrow { font-size: 20px !important; }
.bd-fab { display: none; }

/* 글 보기 */
.bd-crumb { display: flex; align-items: center; gap: 8px; padding-top: 40px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.bd-crumb a { display: inline-flex; align-items: center; min-height: 32px; }
.bd-crumb a:hover { color: var(--ink); }
.bd-crumb + .sp-head { padding-top: 16px; }
.bd-post { margin-top: 16px; border-top: 2px solid var(--ink); }
.bd-post-head { padding: 28px 0 20px; border-bottom: 1px solid var(--line); }
.bd-post-head h1 { margin: 12px 0; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.35; }
.bd-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 14px; color: var(--ink-3); }
.bd-meta b { color: var(--ink-2); }
.bd-meta > b:first-child { color: var(--ink); }
.bd-post-body { max-width: 44em; padding: 36px 0 28px; font-size: 17px; line-height: 1.85; }
.bd-post-body p { margin: 0 0 16px; }
.bd-post-act { display: flex; justify-content: center; gap: 8px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.bd-like, .bd-share { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 22px; border: 0; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px #D1D6DB; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.bd-like:hover, .bd-share:hover { background: var(--bg-2); }
.bd-like[aria-pressed="true"] { background: #FFEFF1; color: #D63345; box-shadow: inset 0 0 0 1.5px #F04452; }
.bd-like[aria-pressed="true"] path { fill: currentColor; }

.bd-comments { padding-top: 40px; }
.bd-comments h2 { margin: 0 0 16px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.bd-comments h2 b { color: var(--brand); }
.bd-cm-form { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--bg-2); }
.bd-cm-who { display: flex; gap: 8px; }
.bd-cm-form input, .bd-cm-form textarea { width: 100%; min-width: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 15px; }
.bd-cm-form input { height: 44px; }
.bd-cm-form textarea { min-height: 88px; padding: 12px; resize: vertical; line-height: 1.6; }
.bd-cm-form input:focus, .bd-cm-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,100,218,.12); }
.bd-cm-send { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bd-cm-send .field-err { display: block; margin: 0; }
.bd-cm-list, .bd-cm-list ol { margin: 0; padding: 0; list-style: none; }
.bd-cm-list > li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.bd-cm-list p { margin: 0; font-size: 15px; }
.bd-cm-list .bd-cm-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--ink-3); }
.bd-cm-meta b { font-size: 14px; color: var(--ink); }
.bd-cm-list ol { margin: 14px 0 0 24px; }
.bd-cm-list ol li { padding: 14px 16px; border-radius: 12px; background: var(--bg-2); }
.bd-cm-list li.is-new { animation: nw-open .35s ease-out; }
.bd-me { padding: 2px 6px; border-radius: 4px; background: var(--sky); font-style: normal; font-size: 11px; font-weight: 700; color: var(--brand); }
.bd-cm-more { margin: 12px 0 0; text-align: center; }
.bd-cm-more a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.bd-nearby { margin-top: 40px; border-top: 1px solid var(--ink); }
.bd-nearby a { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); }
.bd-nearby span { font-size: 13px; color: var(--ink-3); }
.bd-nearby b { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bd-nearby a:hover b { color: var(--brand); }
.bd-foot--post { justify-content: space-between; }
.bd-foot--post > .pill, .bd-foot--write > .pill { position: static; }

/* 글쓰기 */
.bd-form { display: grid; gap: 24px; max-width: 760px; margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--ink); }
.bd-form .field textarea { min-height: 280px; }
.field.is-error textarea { border-color: #F04452; }
.bd-count { justify-self: end; font-size: 12px; color: var(--ink-3); }
.bd-file-label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.bd-file { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.bd-file input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bd-file span { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; }
.bd-file:hover span { background: var(--bg-2); }
.bd-file:focus-within span { outline: 2px solid var(--brand); outline-offset: 2px; }
.bd-file small { font-size: 13px; color: var(--ink-3); }
.bd-rules { padding: 18px 20px; border-radius: 14px; background: var(--bg-2); font-size: 14px; color: var(--ink-2); }
.bd-rules b { display: block; margin-bottom: 6px; color: var(--ink); }
.bd-rules ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.bd-foot--write { justify-content: flex-end; margin-top: 0; }

@media (max-width: 768px) {
  .bd-head .bd-write { display: none; }
  .bd-tabs { margin: 28px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); }
  .bd-tabs button { height: 44px; }
  .bd-bar { flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-top: 16px; padding-bottom: 10px; }
  .bd-search select, .bd-search input { height: 44px; font-size: 16px; }
  .bd-search #bd-field { flex: none; width: 92px; padding: 0 8px; }
  .bd-search input { flex: 1; width: auto; min-width: 0; }
  .bd-search #bd-sort { flex: none; width: 92px; padding: 0 8px; }

  .bd-table thead { display: none; }
  .bd-table, .bd-table tbody { display: block; }
  .bd-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .bd-table td, .bd-table .bd-no, .bd-table .bd-cat, .bd-table .bd-who, .bd-table .bd-date, .bd-table .bd-view, .bd-table .bd-up { width: auto; height: auto; padding: 0; border: 0; font-size: 13px; color: var(--ink-3); text-align: left; }
  .bd-table td.bd-title { order: -1; flex: 1 1 100%; padding: 0; white-space: normal; }
  .bd-title a { font-size: 16px; }
  .bd-rows .bd-no, .bd-notice .bd-cat, .bd-notice .bd-up { display: none; }
  .bd-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .bd-up:empty { display: none; }

  .bd-foot > .pill { display: none; }
  .bd-pages a { min-width: 44px; height: 44px; }
  .bd-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 10px 24px -8px rgba(25,31,40,.5); }
  .bd-fab svg { width: 22px; height: 22px; }

  .bd-crumb { padding-top: 24px; }
  .bd-crumb a { min-height: 44px; }
  .bd-post-head h1 { font-size: 23px; }
  .bd-post-body { padding: 28px 0 20px; font-size: 16px; }
  .bd-cm-form input, .bd-cm-form textarea { font-size: 16px; }
  .bd-cm-send { flex-direction: column; align-items: stretch; }
  .bd-cm-send .pill { width: 100%; }
  .bd-cm-list ol { margin-left: 12px; }
  .bd-nearby a { grid-template-columns: 56px minmax(0, 1fr); min-height: 56px; }
  .bd-foot--post .pill, .bd-foot--write .pill { flex: 1; }
  .bd-foot--post > .pill, .bd-foot--write > .pill { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-cm-list li.is-new { animation: none; }
}

/* =========================================================
   메인 배너 (.mv) — 왼쪽 큰 문구 · 버튼 · 줄 페이지 표시, 오른쪽 연한 노선 색 덩어리 위에 웹에서 직접 그린 화면 카드
   다섯 장: 모두의철도 소개 · 서비스 · 광고 · 성과 측정 · AI 대화친구. 덩어리는 장마다 색과 모양이 부드럽게 바뀐다
   ========================================================= */
.mv { position: relative; display: grid; grid-template-columns: 1fr 520px; align-items: center; gap: 24px; min-height: 540px; padding: 24px 0 8px; }
.mv-text { position: relative; min-height: 340px; }
.mv-copy { position: absolute; left: 0; top: 0; right: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.mv-copy.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .1s, transform .5s ease .1s, visibility 0s; }
.mv-sub { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--ink-2); }
.mv-sub i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mv-h { margin: 0 0 36px; font-size: 58px; font-weight: 800; letter-spacing: -0.055em; line-height: 1.17; color: var(--ink); }
.mv-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-btns .pill { height: 52px; padding: 0 26px; font-size: 16px; }
.mv-ad { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: var(--bg-2); font-size: 12px; font-weight: 700; color: var(--ink-2); vertical-align: 2px; }
.mv-dots { display: flex; align-items: center; gap: 6px; margin-top: 48px; }
.mv-dots button[data-go] { position: relative; width: 28px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .3s; }
.mv-dots button[data-go]::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #D1D6DB; transition: background-color .3s; }
.mv-dots button[data-go][aria-current="true"] { width: 56px; }
.mv-dots button[data-go][aria-current="true"]::before { background: var(--ink); }
.mv-play { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px #D1D6DB; color: var(--ink-2); cursor: pointer; }
.mv-play .i-play, .mv-play[aria-pressed="true"] .i-pause { display: none; }
.mv-play[aria-pressed="true"] .i-play { display: inline; }

.mv-art { position: relative; height: 500px; }
.mv-blob { position: absolute; left: 50%; top: 50%; width: 480px; height: 450px; margin: -225px 0 0 -240px; border-radius: var(--shape); background: var(--t); transition: background-color .7s ease, border-radius 1s cubic-bezier(.4,0,.2,1); }
.mv-pics { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.1,1); }
.mv-pics.is-on { opacity: 1; transform: none; transition-delay: .1s; }

/* 직접 그린 화면 카드 */
.mvc { width: 330px; padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(25,31,40,.06), 0 24px 48px -28px rgba(25,31,40,.35); text-align: left; }
.mvc p { margin: 0; }
.mvc-top { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; margin-bottom: 14px !important; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink); }
.mvc-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mvc-top span { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--bg-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.mvc-top img { width: 26px; height: 26px; }
.mvc-route { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.mvc-route em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.mvc-label { margin-top: 14px !important; font-size: 13px; color: var(--ink-3); }
.mvc-big { font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.05; color: #1B64DA; }
.mvc-big small { margin-left: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.mvc-time { margin-top: 6px !important; font-size: 15px; font-weight: 700; color: var(--ink); }
.mvc-time span { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.mvc-list { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mvc-list li { display: flex; align-items: baseline; gap: 6px; padding: 10px 0 0; font-size: 15px; color: var(--ink-3); }
.mvc-list b { font-weight: 700; color: var(--ink); }
.mvc-list span { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* 광고: 다음 열차 카드 바로 아래에 배너 */
.mvc-stack { display: grid; justify-items: center; gap: 10px; width: 340px; }
.mvc--dim { width: 100%; padding: 18px 22px; opacity: .55; }
.mvc--dim .mvc-label { margin-top: 0 !important; }
.mvc--dim .mvc-big { font-size: 44px; }
.mvc-ad { position: relative; display: grid; gap: 2px; width: 100%; padding: 18px 110px 18px 20px; border-radius: 18px; background: linear-gradient(110deg, #7B3FE4, #E0367A); color: #fff; box-shadow: 0 0 0 4px #fff, 0 24px 44px -22px rgba(80,30,140,.5); }
.mvc-ad-tag { justify-self: start; padding: 1px 6px; margin-bottom: 4px; border-radius: 4px; background: rgba(0,0,0,.28); font-size: 11px; font-weight: 700; }
.mvc-ad b { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.mvc-ad b em { font-style: normal; color: #FFE45C; }
.mvc-ad small { font-size: 12px; opacity: .88; }
.mvc-ad-btn { position: absolute; right: 16px; top: 50%; padding: 8px 14px; margin-top: -18px; border-radius: 18px; background: #fff; color: #5B2BB8; font-size: 13px; font-weight: 700; }
.mvc-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px !important; padding: 6px 12px; border-radius: 16px; background: #fff; font-size: 13px; font-weight: 700; color: #5B2BB8; box-shadow: 0 0 0 1px rgba(91,43,184,.15); }
.mvc-note::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid currentColor; }

/* 성과 리포트 */
.mvc-kpi { width: 360px; }
.mvc-kpi dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 16px; }
.mvc-kpi dl div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.mvc-kpi dt { font-size: 12px; color: var(--ink-3); }
.mvc-kpi dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.mvc-kpi dd small { margin-left: 1px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mvc-chart { display: block; width: 100%; height: 98px; }
.mvc-foot { margin-top: 10px !important; font-size: 12px; color: var(--ink-3); }

/* 모두의철도 한눈에 */
.mvc-all ul { margin: 0; padding: 0; list-style: none; }
.mvc-all li { display: grid; grid-template-columns: 10px auto 1fr; align-items: center; gap: 10px; padding: 11px 0; font-size: 15px; }
.mvc-all li + li { border-top: 1px solid var(--line); }
.mvc-all li i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mvc-all li b { font-weight: 700; color: var(--ink); }
.mvc-all li span { justify-self: end; font-size: 13px; color: var(--ink-2); }

/* AI 대화 */
.mvc-chat { display: flex; flex-direction: column; gap: 8px; }
.mvc-chat .mvc-top { margin-bottom: 6px !important; }
.mvc-chat .me, .mvc-chat .ai { max-width: 84%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.mvc-chat .me { align-self: flex-end; border-bottom-right-radius: 4px; background: #0E8F7B; color: #fff; }
.mvc-chat .ai { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--bg-2); color: var(--ink); }

.mv + .tiles { margin-top: 24px; }

@media (max-width: 1024px) {
  .mv { grid-template-columns: 1fr 420px; min-height: 460px; }
  .mv-h { font-size: 44px; }
  .mv-art { height: 430px; }
  .mv-blob { width: 400px; height: 380px; margin: -190px 0 0 -200px; }
  .mvc { width: 300px; }
  .mvc-stack { width: 310px; }
  .mvc-kpi { width: 330px; }
}
@media (max-width: 768px) {
  .mv { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 28px 0 0; }
  .mv-text { min-height: 0; }
  .mv-sub { margin-bottom: 10px; font-size: 15px; }
  .mv-h { margin-bottom: 24px; font-size: 34px; }
  .mv-btns .pill { flex: 1; height: 50px; padding: 0 16px; font-size: 15px; }
  .mv-dots { margin-top: 24px; }
  .mv-dots button[data-go] { height: 44px; }
  .mv-play { width: 36px; height: 36px; }
  .mv-art { height: 380px; }
  .mv-blob { width: 340px; height: 330px; margin: -165px 0 0 -170px; }
  .mvc { width: 288px; padding: 18px 18px; }
  .mvc-big { font-size: 52px; }
  .mvc-stack { width: 300px; }
  .mvc-ad { padding-right: 96px; }
  .mvc-ad b { font-size: 16px; }
  .mvc-kpi { width: 300px; }
  .mvc-kpi dd { font-size: 20px; }
  .mvc-chat .me, .mvc-chat .ai { font-size: 13px; }
  .mv + .tiles { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-copy, .mv-copy.is-on, .mv-pics, .mv-pics.is-on, .mv-blob { transition: none; }
}

/* =========================================================
   로그인 · 회원가입 — 상단바 링크, 로그인 · 가입 페이지(가운데 좁은 단)
   계정은 동해선 · 대경선 앱 계정을 그대로 쓴다
   ========================================================= */
.hd-auth { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hd-auth a, .hd-auth button { display: inline-flex; align-items: center; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.hd-auth a:hover, .hd-auth button:hover { background: var(--bg-2); color: var(--ink); }
.hd-auth a[aria-current="page"] { color: var(--brand); }
.hd-auth .hd-user { gap: 6px; color: var(--ink); cursor: default; }
.hd-auth .hd-user:hover { background: none; }
.hd-user i { padding: 2px 7px; border-radius: 6px; background: var(--sky); font-style: normal; font-size: 11px; font-weight: 700; color: var(--brand); }
.hd-user i.is-dg { background: #FFF0E6; color: #B4450C; }
.hd-auth ~ .hd-cta { margin-left: 8px; }
.hd-me { display: none; }
.gnb .gnb-auth { display: none; }

.bd-tag--idea { background: var(--lilac); color: #6234C9; }
.bd-member { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--sky); font-size: 14px; font-weight: 600; color: var(--brand); }

.au { max-width: 440px; margin: 0 auto; padding-top: 72px; }
.au--wide { max-width: 560px; }
.au h1 { margin: 0 0 10px; font-size: 36px; font-weight: 800; letter-spacing: -0.05em; }
.au-lead { margin: 0 0 32px; font-size: 16px; color: var(--ink-2); }
.au-form { display: grid; gap: 18px; }
.au-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.au-apps legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.au-app { position: relative; cursor: pointer; }
.au-app input { position: absolute; opacity: 0; pointer-events: none; }
.au-app > span { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 72px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background-color .15s; }
.au-app img { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.au-app b { align-self: end; font-size: 16px; font-weight: 700; }
.au-app small { align-self: start; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.au-app:hover > span { background: #FAFBFC; }
.au-app input:checked + span { background: var(--sky); box-shadow: inset 0 0 0 2px var(--brand); }
.au-app input[value="daegyeong"]:checked + span { background: #FFF5EE; box-shadow: inset 0 0 0 2px var(--dg); }
.au-app input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.au-apps--big .au-app > span { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 4px; min-height: 0; padding: 20px; }
.au-apps--big .au-app img { grid-row: auto; width: 52px; height: 52px; margin-bottom: 8px; }
.au-apps--big .au-app b { font-size: 18px; }
.au-pw, .au-timer { position: relative; }
.au-pw input { padding-right: 52px; }
.au-eye { position: absolute; right: 4px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: pointer; }
.au-eye[aria-pressed="true"] { color: var(--brand); }
.au-err { display: block; margin: -6px 0 0; }
.au-err:empty, .su-err:empty { display: none; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.au-chk input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.au-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-2); }
.au-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.au-submit { width: 100%; height: 54px; font-size: 16px; }
.au-foot { margin: 24px 0 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.au-note { margin: 28px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); font-size: 14px; color: var(--ink-2); text-align: center; }
.au-inline { display: flex; gap: 8px; }
.au-inline > input, .au-inline > .au-timer { flex: 1; min-width: 0; }
.au-inline .pill { flex: none; height: 50px; border-radius: 10px; }
.au-timer b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #D63345; }
.au-ok { margin: 0; font-size: 13px; font-weight: 600; color: #0F7F47; }

/* 회원가입 단계 */
.su-steps { display: flex; gap: 6px; margin: 0 0 32px; padding: 0; list-style: none; counter-reset: su; }
.su-steps li { counter-increment: su; flex: 1; padding-top: 10px; border-top: 3px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.su-steps li::before { content: counter(su) " "; font-variant-numeric: tabular-nums; }
.su-steps li.is-done { border-top-color: var(--ink-3); color: var(--ink-2); }
.su-steps li.is-on { border-top-color: var(--brand); color: var(--brand); }
.js .su-step { display: none; }
.js .su-step.is-on { display: grid; }
.su-step { gap: 18px; }
.su-step h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.035em; }
.su-pick { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0 0 -6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.su-pick img { border-radius: 6px; }
.su-pick span { color: var(--ink); font-weight: 700; }
.su-help { margin: -8px 0 0; font-size: 14px; color: var(--ink-2); }
.su-opt { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.su-already { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--bg-2); }
.su-already b { display: block; font-size: 15px; }
.su-already span { display: block; font-size: 14px; color: var(--ink-2); }
.su-already .pill { flex: none; height: 44px; background: #fff; }
.su-agree { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.su-agree .au-chk--all { display: flex; padding: 6px 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
.su-agree ul { margin: 0; padding: 6px 16px 10px; list-style: none; }
.su-agree li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.su-agree li a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.su-agree em { font-style: normal; font-weight: 700; color: var(--brand); }
.su-agree em.opt { color: var(--ink-3); }
.su-nav { display: flex; gap: 8px; margin-top: 6px; }
.su-nav .pill { flex: 1; height: 54px; }
.su-nav--center { justify-content: center; }
.su-nav--center .pill { flex: 0 1 200px; }
.su-done { justify-items: center; text-align: center; }
.su-done h2 { font-size: 26px; }
.su-done p { margin: 0; color: var(--ink-2); }
.su-done:focus { outline: none; }

@media (max-width: 768px) {
  .hd-auth { display: none; }
  .hd-me { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; color: var(--ink); }
  .hd-me.is-in { color: var(--brand); }
  .hd-me ~ .hd-cta { margin-left: 0; }
  .hd.is-open .gnb .gnb-auth { display: flex; color: var(--ink-2); }
  .hd.is-open .gnb a:not(.gnb-auth) + .gnb-auth { margin-top: 8px; border-top: 1px solid var(--line); }
  .au { padding-top: 40px; }
  .au h1 { font-size: 30px; }
  .au-apps--big { grid-template-columns: 1fr 1fr; }
  .au-apps--big .au-app > span { padding: 16px; }
  .au-inline .pill { padding: 0 14px; font-size: 14px; }
  .su-already { flex-direction: column; align-items: stretch; }
  .su-steps li { font-size: 12px; }
}
@media (max-width: 380px) {
  .au-apps:not(.au-apps--big) { grid-template-columns: 1fr; }
}
.hd-auth ~ .hd-cta { margin-left: -28px; }
@media (max-width: 1024px) {
  .hd .wrap { gap: 20px; }
  .hd-auth a[href$="signup.html"], .hd-auth a[href$="signup"] { display: none; }
  .hd-auth ~ .hd-cta { margin-left: -12px; }
}
@media (max-width: 768px) { .hd-auth ~ .hd-cta { margin-left: 0; } }
button.pill { border: 0; cursor: pointer; }
button.pill--line { background: #fff; }
button.pill--line:hover { background: var(--bg-2); }
.su-step h2:focus { outline: none; }
.hd-cta { white-space: nowrap; }
@media (max-width: 768px) {
  .hd .wrap { gap: 8px; }
  .hd-cta::after { display: none; }
}




/* 앱 선택 — 그림 없이. 로그인은 세그먼트, 가입은 글 카드(고르면 노선 색 테두리 + 체크) */
.au-apps--seg { display: block; }
.au-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg-2); }
.au-seg label { position: relative; cursor: pointer; }
.au-seg input { position: absolute; opacity: 0; pointer-events: none; }
.au-seg span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--ink-3); transition: background-color .15s, color .15s, box-shadow .15s; }
.au-seg label:hover span { color: var(--ink-2); }
.au-seg input:checked + span { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(25,31,40,.12), 0 0 0 1px rgba(25,31,40,.04); }
.au-seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

.au-apps--big .au-app > span { position: relative; display: block; min-height: 0; padding: 20px 20px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.au-apps--big .au-app b { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.au-apps--big .au-app small { display: block; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.au-apps--big .au-app small + small { color: var(--ink-3); }
.au-apps--big .au-app > span::after { content: ""; position: absolute; right: 16px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #D1D6DB; }
.au-apps--big .au-app:hover > span { box-shadow: inset 0 0 0 1px #C5CBD3; }
.au-apps--big .au-app input:checked + span { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.au-apps--big .au-app input:checked + span::after { box-shadow: none; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.su-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.su-dot.is-dg { background: var(--dg); }
.su-step > .su-nav + .su-already { margin-top: -2px; }

/* 앱 선택 — 노선 색은 이름 앞 점과 고른 쪽 테두리에만 */
.au-seg { gap: 8px; padding: 0; background: none; }
.au-seg span { gap: 8px; height: 52px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; color: var(--ink-2); }
.au-seg span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.au-seg input[value='donghae'] + span { --c: #1B64DA; }
.au-seg input[value='daegyeong'] + span { --c: #F26B1D; }
.au-seg label:hover span { box-shadow: inset 0 0 0 1px #C5CBD3; }
.au-seg input:checked + span { background: #fff; color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 2px var(--c); }

.au-apps--big .au-app input[value='donghae'] + span { --c: #1B64DA; }
.au-apps--big .au-app input[value='daegyeong'] + span { --c: #F26B1D; }
.au-apps--big .au-app b { display: flex; align-items: center; gap: 8px; }
.au-apps--big .au-app b::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.au-apps--big .au-app input:checked + span { box-shadow: inset 0 0 0 2px var(--c); }
.au-apps--big .au-app input:checked + span::after { background-color: var(--c); }

/* 회원가입 첫 화면 — 여백 넓게, 단계 표시는 가늘게, 「이미 가입」은 한 줄 글 */
.au--wide { max-width: 520px; padding-top: 88px; }
.au--wide .au-lead { margin-bottom: 48px; }
.su-steps { gap: 4px; margin-bottom: 56px; }
.su-steps li { padding-top: 10px; border-top-width: 2px; font-size: 12px; font-weight: 500; }
.su-steps li.is-on { font-weight: 700; }
.su-step { gap: 24px; }
.su-step h2 { font-size: 24px; }
.au-apps--big { gap: 12px; }
.au-apps--big .au-app > span { padding: 28px 24px 26px; }
.au-apps--big .au-app b { margin-bottom: 14px; }
.au-apps--big .au-app > span::after { right: 20px; top: 26px; }
.su-step[data-step="1"] .su-nav { margin-top: 16px; }
.su-step > .su-nav + .su-already { margin-top: 0; }
p.su-already { display: block; margin: 0; padding: 0; background: none; text-align: center; font-size: 14px; color: var(--ink-3); }
p.su-already a { margin-left: 4px; font-size: 14px; }
@media (max-width: 768px) {
  .au--wide { padding-top: 48px; }
  .au--wide .au-lead { margin-bottom: 36px; }
  .su-steps { margin-bottom: 40px; }
  .au-apps--big .au-app > span { padding: 22px 18px 20px; }
  .au-apps--big .au-app > span::after { right: 14px; top: 20px; }
  p.su-already { flex-direction: row; }
}

/* 회원가입 안내 강조 — 고른 앱으로 가입 · 위치 동의는 앱에서 언제든 바꿈 */
.su-note { margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 3px 0 0 var(--ink); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.su-note b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--ink); }

/* 약관 목록 안 보조 설명 한 줄 (위치기반서비스) · 1단계 안내는 테두리 선 없이 */
.su-agree li { flex-wrap: wrap; }
.su-agree-sub { flex: 1 1 100%; margin: -8px 0 6px 28px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.su-note { box-shadow: none; }

/* 약관 아래 위치기반서비스 안내 — 빨간 글씨로 따로 */
.su-loc { margin: -8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.55; color: #D63345; }

/* =========================================================
   반응형 보강 — 태블릿(769~1180px)은 손가락으로 쓰므로 누르는 영역을 모바일처럼 44px 이상
   ========================================================= */
.brand { min-height: 44px; }
.faq-search input { align-self: stretch; }
.sp-contact a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1180px), (pointer: coarse) {
  .hd-cta { height: 44px; border-radius: 22px; }
  .hd-auth a, .hd-auth button { min-height: 44px; }
  .ft-cols a, .ft-bottom .ft-links a, .ft-cs a { min-height: 44px; display: inline-flex; align-items: center; }
  .sp-toc a { min-height: 44px; }
  .mv-dots button[data-go] { height: 44px; }
  .mv-play { width: 44px; height: 44px; }
  .hm-more { min-height: 44px; }
  .bd-crumb a { min-height: 44px; }
}

/* ---------- 태블릿 (769~1024px): PC 배치를 쓰되 좁아지는 곳만 정리 ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 푸터: 소개와 메뉴를 위아래로, 전화번호는 한 줄 */
  .ft-top { grid-template-columns: 1fr; gap: 32px; }
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 200px)); }
  .ft-cs dd, .ft-cs a { white-space: nowrap; }

  /* 커뮤니티 표: 추천 칸을 빼고 제목 칸을 넓게 */
  .bd-table .bd-up { display: none; }
  .bd-table .bd-no { width: 56px; }
  .bd-table .bd-who { width: 104px; }
  .bd-table .bd-date { width: 100px; }

  /* 서비스 · 광고 첫 화면 */
  .mk-hero--art { grid-template-columns: 1fr 300px; gap: 24px; }
  .mk-hero h1, .sp-head h1 { font-size: 48px; }
  .mk-art { height: 300px; }
  .mk-art .mascot-big { width: 150px; margin: -75px 0 0 -75px; }
  .chip-float:nth-of-type(2) { right: 0; }
  .rot-badge { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .rot-badge b { font-size: 64px; }
  .mk-band h2 { font-size: 36px; }
  .mk-chat { grid-template-columns: 1fr 340px; gap: 32px; padding: 48px; }
  .mk-chat h2, .mk-h, .mk-kpi h2 { font-size: 34px; }
  .mk-points b { font-size: 26px; }
  .mk-kpi .kpis dd { font-size: 38px; }
  .ad-stage { padding: 40px 40px 0; gap: 32px; grid-template-columns: 1fr 260px; }
}

/* ---------- 세로 태블릿 (769~900px): 두 칸이 비좁은 곳은 위아래로 ---------- */
@media (min-width: 769px) and (max-width: 900px) {
  .mv { grid-template-columns: 1fr; gap: 0; min-height: 0; padding-top: 40px; }
  .mv-text { min-height: 0; }
  .mv-h { font-size: 48px; }
  .mv-dots { margin-top: 32px; }
  .mv-art { height: 440px; }
  .mv-blob { width: 460px; height: 420px; margin: -210px 0 0 -230px; }
  .mvc { width: 340px; }
  .mvc-stack { width: 350px; }
  .mvc-kpi { width: 380px; }

  .hm-info { grid-template-columns: 1fr; }
  .mk-chat { grid-template-columns: 1fr; padding: 48px 48px 40px; }
  .mk-chat .chat { max-width: 460px; }
  .mk-end { flex-direction: column; align-items: flex-start; }
  .cta-band { grid-template-columns: 1fr; }
  .mk-hero--art { grid-template-columns: 1fr 260px; }
  .mk-hero h1, .sp-head h1 { font-size: 44px; }
  .mk-band h2 { font-size: 32px; }
  .sp-head--aside { grid-template-columns: 1fr; gap: 28px; }
  .help-card { max-width: 440px; }
}

/* =========================================================
   휴대폰 · 태블릿: 옆 카드가 반쯤 걸쳐 잘려 보이지 않게
   - 메인 카드 줄은 격자로 모두 보이게
   - 옆으로 넘기는 줄은 한 번에 꽉 찬 장 수(휴대폰 1장, 태블릿 2장)만 보이고 밀면 딱 넘어간다
   ========================================================= */
@media (max-width: 1024px) {
  /* 메인 카드 줄 → 격자. 카드는 넓어지지 않는 기본 모양(그림 위 · 제목 아래)으로 고정 */
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; height: auto; margin: 24px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .tiles .tile, .tiles .tile--app, .tiles .tile.is-on { flex: none; min-width: 0; height: 170px; }
  .tiles .tile--app, .tiles .tile--app.is-on { grid-column: span 2; height: 250px; }
  .tiles .tile .tile-media, .tiles .tile.is-on .tile-media { left: 50%; top: 18px; width: min(64%, 150px); transform: translateX(-50%); }
  .tiles .tile--app .tile-media, .tiles .tile--app.is-on .tile-media { left: auto; right: 18px; top: 24px; width: 150px; transform: rotate(-6deg); }
  .tiles .tile .tile-media--wide, .tiles .tile.is-on .tile-media--wide { left: 12%; width: 170%; transform: none; }
  .tiles .tile .tile-media--icon, .tiles .tile.is-on .tile-media--icon { top: 22px; width: 84px; transform: translateX(-50%); }
  .tiles .tile::after, .tiles .tile.is-on::after { background: linear-gradient(180deg, transparent 35%, var(--tile-bg) 72%); }
  .tiles .tile--app::after, .tiles .tile--app.is-on::after { background: linear-gradient(90deg, var(--tile-bg) 34%, transparent 70%); }
  .tiles .tile .tile-txt, .tiles .tile.is-on .tile-txt { left: 16px; right: 16px; bottom: 16px; }
  .tiles .tile--app .tile-txt, .tiles .tile--app.is-on .tile-txt { right: 45%; bottom: 22px; }
  .tiles .tile .tile-txt b, .tiles .tile.is-on .tile-txt b { font-size: 17px; }
  .tiles .tile--app .tile-txt b, .tiles .tile--app.is-on .tile-txt b { font-size: 28px; }
  .tiles .tile .tile-txt small { display: none; }
  .tiles .tile--app .tile-txt small { display: block; opacity: 1; transform: none; font-size: 14px; }
  .tiles .tile .tile-arrow { display: none; }

  /* 서비스 소개 줄 · 기능 카드 줄 · 광고 조건 줄: 한 번에 꽉 찬 장 수만 */
  .rail, .shot-rail { margin-right: 0; }
  .rail .rail-track, .mk-rail .rail-track { gap: 12px; margin-right: 0; padding-right: 0; scroll-snap-type: x mandatory; }
  .rail .rail-track > li { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; }
  .rail-card, .mk-card { width: 100%; }
  .rail-card { height: 300px; }
  .rail-bar, .mk-rail .rail-bar { margin: 18px 0 0; }
}
@media (max-width: 768px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  .tiles .tile, .tiles .tile--app, .tiles .tile.is-on { height: 132px; }
  .tiles .tile--app, .tiles .tile--app.is-on { grid-column: auto; height: 210px; }
  .tiles .tile .tile-media, .tiles .tile.is-on .tile-media { top: 14px; width: 56%; }
  .tiles .tile--app .tile-media, .tiles .tile--app.is-on .tile-media { left: 50%; right: auto; top: 16px; width: 62%; transform: translateX(-50%) rotate(-5deg); }
  .tiles .tile--app::after, .tiles .tile--app.is-on::after { background: linear-gradient(180deg, transparent 38%, var(--tile-bg) 70%); }
  .tiles .tile--app .tile-txt, .tiles .tile--app.is-on .tile-txt { right: 14px; left: 14px; bottom: 14px; }
  .tiles .tile--app .tile-txt b, .tiles .tile--app.is-on .tile-txt b { font-size: 21px; }
  .tiles .tile--app .tile-txt small { font-size: 12px; }
  .tiles .tile .tile-txt b, .tiles .tile.is-on .tile-txt b { font-size: 15px; }
  .tiles .tile .tile-media--icon, .tiles .tile.is-on .tile-media--icon { width: 64px; top: 16px; }

  .rail .rail-track > li { flex: 0 0 100%; }
  .rail-card { height: 260px; }
  .mk-card--shot, .mk-card--viz { height: 330px; }
}
@media (max-width: 768px) {
  /* 소식: 제목 다음에 요약 (모바일 줄 배치 규칙이 제목 안까지 들어가지 않게) */
  .nw-list summary .nw-t b { grid-column: auto; grid-row: auto; }
}

/* 휴대폰: 메인 배너는 그림 없이 문구만. 연한 노선 색 판을 화면 폭 가득 쓰고 글을 크게 */
@media (max-width: 768px) {
  .mv { display: block; margin: 16px 0 0; padding: 36px 24px 22px; border-radius: 24px; background: var(--t, #E9EEF6); transition: background-color .6s ease; }
  .mv-art { display: none; }
  .mv-text { min-height: 0; }
  .mv-sub { margin-bottom: 14px; font-size: 15px; }
  .mv-h { margin-bottom: 32px; font-size: clamp(32px, 9.4vw, 40px); line-height: 1.2; }
  .mv-btns { flex-direction: column; gap: 8px; }
  .mv-btns .pill { width: 100%; height: 52px; }
  .mv-btns .pill--line { background: rgba(255,255,255,.7); box-shadow: none; }
  .mv-dots { margin-top: 20px; }
  .mv-play { background: rgba(255,255,255,.6); box-shadow: none; }
  .mv-dots button[data-go]::before { background: rgba(25,31,40,.15); }
}
@media (max-width: 768px) {
  .mv { display: flex; flex-direction: column; min-height: 420px; padding: 44px 24px 22px; }
  .mv-text { flex: 1; display: flex; flex-direction: column; }
  .mv-copy.is-on { flex: 1; display: flex; flex-direction: column; }
  .mv-h { flex: 1; margin-bottom: 36px; }
  .mv-btns .pill { flex: none; }
}

/* =========================================================
   휴대폰 첫 화면: 노선 색으로 화면 끝까지 꽉 채운 판 + 흰 큰 제목 + 아래 구석에서 고개를 내민 캐릭터
   (앞의 연한 판 규칙을 덮는다)
   ========================================================= */
.mv-num { display: none; }
@media (max-width: 768px) {
  .mv { position: relative; overflow: hidden; min-height: 470px; margin: 0 calc(var(--gutter) * -1); padding: 52px 24px 28px; border-radius: 0; background: var(--c, #16357A); color: #fff; }
  .mv-sub { color: rgba(255,255,255,.75); font-weight: 600; }
  .mv-sub i { background: #fff; }
  .mv-h { color: #fff; font-size: clamp(34px, 10vw, 42px); letter-spacing: -0.055em; }
  .mv-btns { flex-direction: row; align-items: center; gap: 18px; }
  .mv-btns .pill { width: auto; height: 50px; padding: 0 24px; }
  .mv-btns .pill--ink { background: #fff; color: var(--ink); }
  .mv-btns .pill--line { padding: 0; background: none; box-shadow: none; color: #fff; }
  .mv-btns .pill--line::after { content: ""; width: 7px; height: 7px; margin-left: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
  .mv-dots { position: relative; z-index: 1; margin-top: 28px; }
  .mv-dots button[data-go]::before { background: rgba(255,255,255,.3); }
  .mv-dots button[data-go][aria-current="true"]::before { background: #fff; }
  .mv-play { background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); color: #fff; }
  .mv-peek { display: block; position: absolute; right: -18px; bottom: -34px; width: 168px; height: auto; transform: rotate(-12deg); pointer-events: none; }
  .mv + .tiles { margin-top: 16px; }
}
@media (max-width: 360px) { .mv-peek { width: 140px; right: -22px; } }
@media (max-width: 768px) {
  .mv { overflow: clip; min-height: 440px; }
  .mv-peek { right: -30px; bottom: 112px; width: 150px; transform: rotate(-14deg); }
  .mv-h { position: relative; z-index: 1; }
}
@media (max-width: 360px) { .mv-peek { width: 124px; right: -32px; } }
@media (max-width: 768px) { .mv { align-items: stretch; } }

/* 휴대폰 첫 화면 다듬기: 캐릭터 없이 글 · 버튼 · 진행 막대만.
   위 오른쪽 01 / 05, 아래는 화면 폭 가득 칸 나뉜 막대(지금 장 칸이 넘김 시간 동안 차오름) */
@media (max-width: 768px) {
  .mv-peek { display: none; }
  .mv { min-height: 0; padding: 30px 24px 18px; }
  .mv-num { display: block; position: absolute; right: 24px; top: 32px; margin: 0; font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.55); }
  .mv-num b { font-weight: 700; color: #fff; }
  .mv-sub { margin-bottom: 52px; font-size: 14px; letter-spacing: -0.01em; }
  .mv-sub i { width: 6px; height: 6px; }
  .mv-h { flex: none; margin-bottom: 56px; font-size: clamp(34px, 10.4vw, 44px); line-height: 1.16; letter-spacing: -0.06em; }
  .mv-btns { gap: 20px; }
  .mv-btns .pill--ink { height: 48px; padding: 0 22px; font-size: 15px; }
  .mv-btns .pill--line { font-size: 15px; opacity: .92; }
  .mv-dots { display: flex; gap: 4px; margin: 36px 0 0; }
  .mv-dots button[data-go], .mv-dots button[data-go][aria-current="true"] { flex: 1; width: auto; height: 32px; }
  .mv-dots button[data-go]::before { height: 2px; margin-top: -1px; border-radius: 0; background: rgba(255,255,255,.25); }
  .mv-dots button[data-go][aria-current="true"]::before { background: rgba(255,255,255,.25); }
  .mv-dots button[data-go]::after { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; margin-top: -1px; background: #fff; }
  .mv-dots button[data-go][aria-current="true"]::after { width: 100%; }
  .mv.is-run .mv-dots button[data-go][aria-current="true"]::after { animation: mv-fill 3.5s linear; }
  @keyframes mv-fill { from { width: 0; } to { width: 100%; } }
  .mv-play { flex: none; width: 32px; height: 32px; margin-left: 10px; box-shadow: none; background: rgba(255,255,255,.14); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mv.is-run .mv-dots button[data-go][aria-current="true"]::after { animation: none; }
}
@media (max-width: 768px) {
  .mv-dots { margin-top: 30px; }
  .mv-dots button[data-go], .mv-dots button[data-go][aria-current="true"] { height: 44px; }
  .mv-play { width: 44px; height: 44px; margin-right: -6px; background: none; }
  .mv-play svg { padding: 0; }
  .mv-play::after { content: ""; position: absolute; }
}

/* ===== 개인정보 처리방침 (privacy.html) — 왼쪽 목차 고정, 오른쪽 본문 ===== */
.pv .sp-head p.pv-ver { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.pv-grid { display: grid; grid-template-columns: 220px minmax(0, 46em); gap: 64px; margin: 48px 0 96px; padding-top: 40px; border-top: 1px solid var(--ink); }
.pv-toc details { position: sticky; top: calc(var(--hd-h) + 24px); }
.pv-toc summary { display: none; }
.pv-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: pv; }
.pv-toc li { counter-increment: pv; }
.pv-toc a { display: flex; gap: 8px; padding: 6px 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pv-toc a::before { content: counter(pv) "."; min-width: 1.6em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pv-toc a:hover { color: var(--ink); }
.pv-doc section { padding: 0 0 48px; scroll-margin-top: calc(var(--hd-h) + 24px); }
.pv-doc h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; }
.pv-doc p, .pv-doc li { margin: 0 0 10px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.pv-doc ul { margin: 0; padding-left: 1.2em; }
.pv-doc .pv-note { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.pv-doc [data-todo] { color: var(--ink-3); }
.pv-doc .sp-rows dt { font-size: 14px; }
.pv-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 15px; line-height: 1.6; }
.pv-tbl th, .pv-tbl td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pv-tbl thead th { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pv-tbl tbody th { width: 9.5em; font-weight: 600; color: var(--ink); }
.pv-tbl td { color: var(--ink-2); }
.pv-tbl td:last-child { width: 30%; }
.pv-tbl--2 td:last-child { width: auto; }
.pv-tbl--2 tbody th { width: 14em; }

@media (max-width: 1024px) {
  .pv-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 768px) {
  .pv-grid { display: block; margin: 32px 0 64px; padding-top: 0; border-top: 0; }
  /* 목차는 접히는 칸으로 */
  .pv-toc { margin-bottom: 32px; border: 1px solid var(--line); border-radius: 12px; }
  .pv-toc details { position: static; }
  .pv-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
  .pv-toc summary::-webkit-details-marker { display: none; }
  .pv-toc summary::after { content: ""; width: 8px; height: 8px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; }
  .pv-toc details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .pv-toc ol { padding: 0 16px 8px; }
  .pv-toc a { min-height: 44px; align-items: center; padding: 0; font-size: 15px; }
  .pv-doc section { padding-bottom: 40px; }
  .pv-doc h2 { font-size: 19px; }
  /* 표는 한 줄씩 쌓는다: 구분이 제목, 아래로 항목 · 목적 */
  .pv-tbl thead { display: none; }
  .pv-tbl, .pv-tbl tbody, .pv-tbl tr, .pv-tbl th, .pv-tbl td { display: block; width: auto !important; }
  .pv-tbl tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .pv-tbl th, .pv-tbl td { padding: 0; border: 0; }
  .pv-tbl tbody th { margin-bottom: 4px; }
  .pv-tbl:not(.pv-tbl--2) td:last-child { margin-top: 4px; font-size: 14px; color: var(--ink-3); }
  .pv-tbl:not(.pv-tbl--2) td:last-child::before { content: "목적 · "; }
  .pv-doc .sp-rows > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 1180px) {
  .pv-toc a { min-height: 44px; align-items: center; padding: 0; }
  .pv-doc .sp-rows > div { padding: 4px 0; align-items: center; }
  .pv-doc .sp-rows dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 글쓰기 말머리 칩 간격 · 서비스 머리 제목 줄 간격 */
.bd-form .chips { gap: 8px 12px; }
#svc-title { line-height: 1.22; }

/* 푸터 회원탈퇴 — 눈에 띄지 않게 작고 옅게 */
.ft-links a.ft-quiet { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.ft-links a.ft-quiet:hover { color: var(--ink-2); }

/* 회원 탈퇴 안내 (withdraw.html) */
.wd-steps { margin: 28px 0 24px; padding: 0; list-style: none; counter-reset: wd; border-top: 1px solid var(--line); }
.wd-steps li { counter-increment: wd; display: flex; align-items: center; gap: 14px; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.wd-steps li::before { content: counter(wd); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 13px; font-weight: 700; color: var(--ink); }
.wd-steps b { color: var(--ink); font-weight: 700; }
.wd-note { text-align: left; }
.wd-note b { display: block; margin-bottom: 6px; color: var(--ink); }
.wd-note ul { margin: 0; padding-left: 1.1em; }
.wd-note li { margin: 2px 0; }

/* 약관 본문 속 소제목 (통합 이용약관 제7조 등) */
.pv-doc h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); }

/* ===== 광고 문의: 동의 칸 오른쪽 「처리방침 보기」 ===== */
.agree-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 20px; }
.agree-row .agree { margin-top: 0; }
.agree-link { flex: none; display: inline-flex; align-items: center; min-height: 24px; font-size: 13px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.agree-link:hover { color: var(--ink); }

/* ===== 커뮤니티 글 · 댓글 관리 버튼 (수정 · 삭제 · 신고) — 작은 회색 글자 ===== */
.bd-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.bd-tools, .bd-cm-tools { display: flex; align-items: center; }
.bd-cm-tools { margin-left: auto; }
.bd-tools button, .bd-cm-tools button { position: relative; height: 32px; padding: 0 10px; border: 0; background: none; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.bd-tools button:last-child, .bd-cm-tools button:last-child { padding-right: 0; }
.bd-tools button + button::before, .bd-cm-tools button + button::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 11px; margin-top: -5.5px; background: var(--line); }
.bd-tools button:hover, .bd-cm-tools button:hover { color: var(--ink); }
.bd-tools button:disabled, .bd-cm-tools button:disabled { cursor: default; color: var(--ink-3); opacity: .7; }
.bd-cm-tools button { height: 28px; font-size: 12px; }

/* 확인 창 — PC 가운데, 모바일 아래 시트 */
.bd-dlg { width: min(420px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35); }
.bd-dlg::backdrop { background: rgba(25, 31, 40, .45); }
.bd-dlg-in { margin: 0; padding: 28px 24px 24px; }
.bd-dlg h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.bd-dlg-desc { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.bd-dlg-desc:empty { display: none; }
.bd-dlg-body:not(:empty) { margin-top: 18px; }
.bd-dlg-body input[type="password"] { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.bd-dlg-body input[type="password"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 100, 218, .12); }
.bd-reasons { display: grid; border-top: 1px solid var(--line); }
.bd-reasons label { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.bd-reasons input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.bd-dlg-err { display: block; min-height: 0; margin: 10px 0 0; }
.bd-dlg-err:empty { display: none; }
.bd-dlg-btns { display: flex; gap: 8px; margin-top: 22px; }
.bd-dlg-btns .pill { flex: 1; justify-content: center; height: 48px; }
.bd-dlg-btns [hidden] { display: none; }
.bd-dlg-btns .is-danger { background: #D63345; border-color: #D63345; color: #fff; }

@media (max-width: 1180px) {
  .bd-tools button, .bd-cm-tools button { height: 44px; }
  .bd-cm-tools { margin-top: -8px; margin-bottom: -8px; }
  .agree-link { min-height: 44px; margin-top: -10px; }
}
@media (max-width: 768px) {
  .bd-meta-row { display: block; }
  .bd-tools { margin: 4px 0 -10px -10px; }
  .agree-row { display: block; }
  .agree-link { margin: 0 0 0 30px; }
  .bd-dlg { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .bd-dlg-in { padding: 24px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* ===== 404 ===== */
.nf { max-width: 560px; margin: 0 auto; padding: 120px 0 140px; text-align: center; }
.nf-code { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.nf h1 { margin: 0 0 14px; font-size: 36px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.3; }
.nf > p { margin: 0; font-size: 17px; color: var(--ink-2); }
.nf .actions { justify-content: center; margin-top: 32px; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 40px 0 0; padding: 24px 0 0; list-style: none; border-top: 1px solid var(--line); }
.nf-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; color: var(--ink-2); }
.nf-links a:hover { color: var(--ink); }
@media (max-width: 1180px) { .nf-links a { min-height: 44px; } }
@media (max-width: 768px) { .nf { padding: 72px 0 96px; } .nf h1 { font-size: 28px; } }
.nf .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 광고 문의 — 필수 3칸 다음 「선택 입력」 구분 */
.form-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--ink); }
.form-sub span { font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* 로그인 — 「어느 앱 계정인지 모르겠어요」 접힘 안내 · 실패 때 다른 앱으로 다시 시도 */
.au-help { margin: -4px 0 4px; font-size: 14px; color: var(--ink-2); }
.au-help summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-3); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.au-help summary::-webkit-details-marker { display: none; }
.au-help summary:hover { color: var(--ink); }
.au-help p { margin: 0 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); line-height: 1.6; }
.au-switch { display: inline-flex; align-items: center; min-height: 32px; margin-left: 2px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 1180px) { .au-switch { min-height: 44px; } }