/* CQCQ 디자인 (확정 시안): 진그레이 바탕, 아이콘 중심, 색은 역할별로 — 활성·수락 시안 / 알림·새 것 핑크 / 진행 보라. 색 칸 안쪽은 흰색. */
:root { --bg: #262624; --s1: #2b2b29; --s2: #30302e; --art: #1f1f1d; --ln: #3d3d3a; --fg: #faf9f5; --mut: #8f8d89; --dim: #8a8880;
  --c: #3fdcf5; --p: #ff4fd0; --v: #9b7bff; --type: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif; --mono: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg) url(/bg-tex.webp) 0 0 / 512px 512px; color: var(--fg); font: 15px/1.5 system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
#app { max-width: 560px; margin: 0 auto; height: 100svh; display: flex; flex-direction: column; }
@media (display-mode: standalone) { #app { height: 100dvh; } } /* 홈 화면 앱은 주소창·도구 모음이 없어 dvh 가 안정적이고, svh 로 하면 하단 메뉴가 내려간다 */
main { --gx: 16px; overscroll-behavior-y: contain; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; /* .ctl 의 음수 여백이 좌우 스크롤을 만들지 않게 */ padding: 0 16px 16px; display: flex; flex-direction: column; }
html { overscroll-behavior-y: none; } /* 안드로이드 크롬의 당겨서 새로고침(페이지 통째 리로드)이 저절로 작동하지 않게 */
[hidden] { display: none !important; }
a { color: var(--c); }
h3 { font-size: 15px; margin: 14px 0 6px; }

/* 아이콘·단추 */
.ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: var(--fg); cursor: pointer; }
.ib { width: 48px; height: 48px; border-radius: 50%; background: var(--s2); border: 1px solid var(--ln); display: inline-grid; place-items: center; padding: 0; position: relative; }
.ib.sm { width: 36px; height: 36px; } .ib.sm .ic { width: 18px; height: 18px; }
.ib.ghost { background: none; border: 0; color: #bdb8aa; }
.ib.ok { background: color-mix(in srgb, var(--c) 24%, var(--bg)); border: 1.5px solid var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.ib.danger { color: var(--p); border-color: var(--p); }
.ib.pri { width: 64px; height: 64px; background: var(--p); border: 0; color: #fff; isolation: isolate; box-shadow: 0 0 18px color-mix(in srgb, var(--p) 40%, transparent); }
.ib.pri .ic { width: 26px; height: 26px; }
.ib.pri.sm2 { width: 44px; height: 44px; } .ib.pri.sm2 .ic { width: 20px; height: 20px; }
.ib.pri.sm2 { background: var(--bg); border: 1.5px solid var(--c); color: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); } .ib.pri.sm2 .a { animation: wv 1.2s infinite; } .ib.pri.sm2 .a2 { animation-delay: .2s; } .ib.pri.sm2 .a3 { animation-delay: .4s; } /* 송신 단추도 테두리만, 전파 호가 차례로 깜빡임 */
/* 송신 파문: 정적 번짐 없이, 같은 색 번짐이 2겹으로 계속 퍼진다(크기·투명도만 바꿔 가볍다) */
.ib.tx::before, .ib.tx::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--p); z-index: -1; opacity: 0; pointer-events: none; animation: rip 2.8s cubic-bezier(.2, .6, .4, 1) infinite; }
.ib.tx::after { animation-delay: 1.4s; }
@keyframes rip { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.1); opacity: 0; } }
button[disabled] { opacity: .5; }
button:not(.ib), .btn { min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--s2); border: 1px solid var(--ln); display: inline-grid; place-items: center; text-decoration: none; color: var(--fg); }
button.primary { border-color: var(--c); }
button.danger { border-color: var(--p); color: var(--p); }

/* 입력 */
input, textarea, select { width: 100%; min-height: 44px; padding: 8px 14px; background: var(--s1); color: var(--fg); border: 1px solid var(--ln); border-radius: 14px; font: inherit; margin: 4px 0; }
textarea { font-family: var(--type); resize: none; line-height: 1.6; }
input[type=checkbox] { width: auto; min-height: 0; margin: 0 8px 0 0; accent-color: var(--c); }
.fld { display: flex; align-items: center; gap: 10px; background: var(--s1); border: 1px solid var(--ln); border-radius: 26px; padding: 0 6px 0 16px; color: var(--mut); }
.fld input { border: 0; background: none; margin: 0; padding: 0; min-height: 46px; flex: 1; }
.fld input:focus, textarea:focus, select:focus { outline: 0; }
input { color-scheme: dark; } /* 어두운 화면이라고 알려 주면 Chrome이 자동 채우기 미리보기 글자도 밝게 그린다 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--fg); caret-color: var(--fg); transition: background-color 600000s 0s; -webkit-background-clip: text; background-clip: text; } /* 브라우저 자동 채우기의 흰·파란 배경을 글자 모양으로만 남겨 안 보이게 한다(크롬은 transition 만으로는 어두운 화면에서 파랗게 남는다) */
.fld:focus-within, textarea:focus, select:focus { border-color: var(--c); }
.dock { margin-top: auto; width: 100%; } .ask { margin: 0; padding-top: 12px; text-align: center; } .home .dock .code { margin: 0 auto; padding-top: 8px; } .ask b { display: block; font-size: 17px; font-weight: 600; color: var(--p); animation: askb 2.2s ease-in-out infinite; }
@keyframes askb { 0%, 60%, 100% { opacity: 1; } 80% { opacity: .35; } } /* 완전히 켜진 상태를 주기의 60% 동안 유지 */
.home .code .fld { width: 312px; max-width: 100%; height: 42px; margin: 0 auto; padding: 0 8px 0 16px; gap: 12px; border-radius: 12px; background: none; } /* 교신국 박스와 같은 모양 */
.home .code .fld > .ic { color: #5b5b57; }
.home .code input { min-height: 0; height: 100%; font: 600 14px var(--mono); letter-spacing: .14em; text-transform: lowercase; } /* 대문자로 쳐도 소문자로 보인다(전달값은 home.js가 대문자로 바꿔 비교) */
.home .code input::placeholder { text-transform: none; letter-spacing: 0; font: 400 13px system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
.fld button.cgo { width: 28px; min-height: 0; height: 28px; border-radius: 8px; display: grid; place-items: center; padding: 0; color: var(--p); background: none; border: 0; flex: none; }
.code[hidden] { display: none; }
.code input { font-family: var(--mono); letter-spacing: .4px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.bar { display: flex; align-items: center; gap: 10px; padding: 10px 0 4px; }
.sp { flex: 1; }
.check { display: flex; align-items: center; margin: 8px 0; color: #bdb8aa; }
.hint { color: var(--mut); margin: 8px 0; font-size: 13.5px; }
.hint.uhint, .card .hint.uhint { color: #faf9f5; font-size: 15px; letter-spacing: -.3px; text-align: center; } .uhint b { color: var(--p); font: 800 12px var(--type); letter-spacing: .5px; margin-right: 8px; } /* 공유 카드의 UNLOCK HINT 모양 */
.home .sbox .code { margin: 0 auto; } /* 비밀 전보 답 입력: PC 에서도 그림·힌트 바로 아래(메인처럼 맨 아래로 밀지 않음) */
.msg { color: var(--p); min-height: 1.4em; margin: 4px 0; }
.dock .msg, .sbox .msg { text-align: center; } /* 비밀 전보 답 입력의 "틀렸어요" 안내도 가운데 */
.ok { color: var(--c); }
.empty { color: var(--dim); text-align: center; padding: 32px 0; }
.meter { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--dim); font: 12px var(--mono); margin: 2px 0 6px; }
.meter[hidden], .rig[hidden] { display: none; } .meter { flex-wrap: wrap; justify-content: flex-start; } .meter > .mside { order: -1; flex: 0 0 100%; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 10px; } /* 배지·단어 수는 입력칸 바로 아래 오른쪽 줄, 게이지·미리보기는 그 아래 왼쪽 줄 */
.meter.low { color: var(--v); } .meter.over { color: var(--p); }
.meta { display: inline-flex; align-items: center; gap: 6px; color: #bdb8aa; font: 12px var(--mono); background: var(--s2); border-radius: 14px; padding: 5px 10px; }
.meta .ic { width: 15px; height: 15px; }
.badge { background: var(--s2); color: var(--c); border-radius: 4px; font-size: 11px; padding: 1px 6px; margin-left: 6px; }
.box { background: var(--s1); border-radius: 16px; padding: 4px 14px 12px; margin: 12px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--ln); border-radius: 16px; padding: 4px 12px; display: inline-flex; align-items: center; }

/* 윗줄·아랫줄(탭) */
.top { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
@media (display-mode: standalone) { .top { padding-top: 32px; } } /* 홈 화면 앱: iOS 가 상단바 아래 약 33pt 를 위에서부터 흐리게 덮는다(캡처 밝기 분석). 높이는 56px 그대로 두고 로고·종만 16px 내려 그 구간을 벗어나게 한다 */ /* .top 기본 규칙보다 뒤에 둬야 적용된다 */
.logo { display: inline-flex; } .logo img { height: 26px; width: auto; display: block; }
.hcs { margin-left: auto; margin-right: 4px; position: relative; top: -3px; font: 600 12.5px var(--mono); letter-spacing: .4px; color: var(--mut); white-space: nowrap; text-decoration: none; } /* 로그인 중 내 호출부호(종 왼쪽), 누르면 나의 전신소 */
.bell { position: relative; top: -3px; /* 로고 글자 높이에 맞춤 */  color: #bdb8aa; width: 40px; height: 40px; display: grid; place-items: center; text-decoration: none; }
u, .bell b { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; border-radius: 8px; background: var(--p); color: #fff; font: 700 10px/16px system-ui; text-align: center; text-decoration: none; padding: 0 4px; }
.bell b { right: auto; left: 25px; top: -1px; } /* 원형 종 테두리와 겹치지 않게 대각선 바깥에 바짝 */
nav { height: calc(62px + env(safe-area-inset-bottom)); flex: none; display: flex; border-top: 1px solid #383836; padding-bottom: env(safe-area-inset-bottom); }
nav a, header a { -webkit-touch-callout: none; } /* 길게 눌러 '새 탭에서 열기' 메뉴가 뜨지 않게 */
nav a { flex: 1; display: grid; place-items: center; color: var(--dim); position: relative; text-decoration: none; }
nav a.on { color: var(--fg); }
nav a.on::after { content: ''; position: absolute; bottom: 8px; width: 18px; height: 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 6px var(--c); }

/* 그림 */
.stage { display: grid; place-items: center; margin-top: 6px; }
.stage svg { width: min(270px, 70vw); height: auto; }
svg.wire { display: block; overflow: visible; }
svg.play [style] { opacity: 0; animation: pop 90ms ease-out var(--s) forwards; }
svg.play .w { opacity: 1; stroke-dasharray: 1 2; stroke-dashoffset: 1.05; /* 끝점에 0길이 점선이 걸려 사파리가 둥근 끝 점을 미리 찍던 것을 막는다 */ animation: draw var(--d, 150ms) linear var(--s) forwards; }
@keyframes pop { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { svg.play [style], svg.play .w { animation-duration: 1ms !important; } .ib.tx::before, .ib.tx::after { animation: none; } }
.medal { border-radius: 50%; background: var(--art); border: 1.5px solid var(--ln); display: grid; place-items: center; overflow: hidden; flex: none; }
.medal svg { width: 86%; height: 86%; }
.md { width: 124px; height: 124px; } .av { width: 46px; height: 46px; } .av.s { width: 36px; height: 36px; }

/* 램프·계기판 (사진 위에 바늘만 SVG) */
/* 크기는 보이는 높이에 맞춰 줄고 늘어난다: 램프·계기판·그림이 위에서 아래로 한 화면에 들어오게(남는 높이 = 100svh - 304px). 어떤 폰에서도 배치는 같다. */
/* 큰 램프: 원본이 645px라 PC에서는 280px까지(너무 크면 분위기를 망쳐 2/3로 줄임)(코드 입력칸 위 안내 글 자리 = 100svh - 400px) */
:root { --rest: 304px; } /* 보이는 높이에서 화면 고정 부분(머리글·탭·글·단추·간격)을 뺀 값 */
.card { --art: min(clamp(80px, calc((100svh - var(--rest)) * .47), 230px), 58vw); } /* 램프·계기판·그림이 위에서 아래로 한 화면에 들어오게 보이는 높이에 맞춰 줄고 는다(남는 높이 = 100svh - 304px) */
.lamp { position: relative; display: inline-block; aspect-ratio: 1; }
.lamp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lamp .on { opacity: 0; }
.lamp.lit .on { opacity: 1; }
.lamp.sm { width: clamp(36px, calc((100svh - var(--rest)) / 4.7), 96px); }
.rig .gauge { width: clamp(100px, calc((100svh - var(--rest)) * .58), 300px); }

.lamp.blink .on { animation: lampb 2.6s ease-in-out infinite; }
@keyframes lampb { 0%, 100% { opacity: .06; } 45%, 55% { opacity: 1; } }
.gauge { position: relative; display: inline-block; flex: none; aspect-ratio: 1018 / 560; } /* 이미지가 늦게 떠도 자리를 미리 잡아 글이 밀리지 않게 */
.gauge img { width: 100%; display: block; } .gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nd { transform-origin: 442px 654px; transform: rotate(-35deg); transition: transform .16s cubic-bezier(.3,1.5,.5,1); }
.rig { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 2px; }
.rig + .stage svg, .ph { width: var(--art); }
.ph { aspect-ratio: 1; display: grid; place-items: center; }
.stage.idle, .lamp.blink, .rig .lamp { cursor: pointer; }
.card .hint { text-align: center; color: var(--mut); margin: 0; font-size: 14px; letter-spacing: .04em; }
.ph { position: relative; }
.ph .hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vw; max-width: 300px; } /* 그림 자리보다 넓어도 가운데 */
.card .hint .hl { display: block; font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: .01em; color: var(--fg); }
.card .hint small { display: block; font-size: 12px; opacity: .7; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ask b, .wd { animation: none; } .lamp.blink .on { animation: none; opacity: .7; } .nd { transition: none; } }

/* 수신(첫 화면)·공유 카드 */
.card { display: flex; flex-direction: column; align-items: center; }
.who { display: flex; gap: 10px; margin: 6px 0 0; font: 12.5px var(--mono); color: var(--mut); letter-spacing: .4px; }
.who span + span { color: var(--dim); }
/* 상대 교신국 알약: 폭 312px 고정(글자 타일이 남는 자리를 나눠 채움, 상태 칸 70px 고정)이라 호출부호 길이·굴러가는 중·SCAN↔TUNED 때도 크기가 안 변한다. */
.who2 { display: flex; flex-direction: column; align-items: center; width: 100%; }
.stn { position: relative; --lh: 26px; display: flex; align-items: center; gap: 12px; width: 312px; max-width: calc(100vw - 32px); height: 42px; padding: 0 16px; margin-top: 8px; border: 1px solid var(--ln); border-radius: 12px; font: 500 12px ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; color: var(--mut); transition: border-color .4s, box-shadow .4s; }
.stn.on { border-color: #5b5b57; }
.stn .cs { display: flex; flex: 1; min-width: 0; gap: 2px; height: var(--lh); overflow: hidden; font-size: 12.5px; font-weight: 700; color: var(--fg); }
.stn .cs > span { position: relative; display: block; flex: 1 1 0; min-width: 0; max-width: 20px; height: var(--lh); overflow: hidden; background: #1d1d1b; border: 1px solid #3a3a37; border-radius: 4px; }
.stn .cs > span.d { flex: .5 1 0; max-width: 8px; background: none; border: 0; }
.stn .cs b { display: block; height: var(--lh); line-height: var(--lh); text-align: center; font-weight: inherit; }
.stn .side { display: flex; flex-direction: column; gap: 1px; min-width: 70px; line-height: 1.35; }
.stn .mt { white-space: nowrap; color: var(--fg); font-size: 11.5px; opacity: 0; transition: opacity .4s; } .stn.on .mt { opacity: 1; }
.stn .st { display: flex; gap: 5px; white-space: nowrap; font-size: 9.5px; letter-spacing: .1em; }
.who2 .hero-logo { height: 44px; margin: 4px 0 4px; } .who2 .ttl { margin: 0 0 10px; font: 600 20px/1.3 system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; text-align: center; }
.stn .tg { font-style: normal; font-size: 11px; letter-spacing: .04em; color: var(--p); }
.stn .st em { font-style: normal; color: var(--dim); opacity: .5; transition: color .3s, opacity .3s; }
.stn:not(.on) .s1, .stn.on .s2 { color: var(--p); opacity: 1; } /* SCAN과 TUNED를 둘 다 보여 주고 지금 상태만 켠다 */
.stn .lead { display: flex; align-items: center; flex: none; color: var(--p); margin: 0 -2px 0 8px; } /* 전역 .lead 의 위아래 여백을 지워 위아래 가운데로 */ .stn .lead .ic { width: 20px; height: 20px; }
.stn .lead .a { opacity: .25; } .stn.on .lead .a { opacity: 1; }
.stn:not(.on) .lead .a { animation: stna 1.1s infinite; } .stn:not(.on) .lead .a2 { animation-delay: .2s; } .stn:not(.on) .lead .a3 { animation-delay: .4s; } /* 수신 아이콘의 전파 호가 안쪽부터 차례로 */
@keyframes stna { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (max-width: 340px) { .stn { gap: 8px; padding: 0 10px; } .stn .lead { display: none; } .stn .cs { font-size: 11px; } .stn .side { min-width: 0; } } /* 좁은 창: 아이콘을 빼 호출부호 칸이 글자보다 좁아져 겹치지 않게 */
@media (prefers-reduced-motion: reduce) { .stn .lead .a { animation: none !important; } }
.decoded { font-family: var(--type); text-align: center; font-size: 16px; line-height: 1.55; margin: 8px 8px 0; min-height: 50px; }
.decoded.wait { opacity: .5; } .wd { text-align: center; color: var(--c); margin: 6px 0 0; animation: askb 1.6s ease-in-out infinite; } /* 내 언어로 해독 중: 원문을 흐리게 */
.decoded i { font-style: normal; color: var(--fg); } .decoded.on::after { content: ''; }
.home .decoded:empty { min-height: 12px; margin-top: 0; } /* 재생 전엔 해독문 자리를 줄여 낮은 화면에서도 코드 입력창이 보이게(재생하면 입력창은 숨는다) */
.caret { display: inline-block; width: 2px; height: 1em; background: var(--p); vertical-align: -2px; margin-left: 2px; }
/* 송신 단추의 파문(2.1배로 퍼짐)이 화면 밖으로 번져 스크롤바를 만들지 않게, 파문이 들어갈 여백(36px)을 안에 두고 잘라 낸다. 바깥 여백은 음수로 되돌려 자리는 그대로. */
.ctl { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 36px; margin: -22px -36px -36px; overflow: hidden; pointer-events: none; }
.ctl > * { pointer-events: auto; }
.home { align-items: center; }

.first { flex: none; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 100%; position: relative; }
.first > .col { flex: 1; justify-content: flex-start; padding-top: 2svh; } /* 재생 중·후에는 위에서부터 쌓는다: 글이 늘거나 단추가 나타나도 그림 위치가 안 움직임 */
/* 램프를 기다리는 첫 화면: 램프를 머리글~탭바 사이 정중앙에(코드 입력칸 높이만큼 영역을 넓힘). 안내 글은 램프 아래에 따로 얹어 중앙 계산에 안 낀다. */
.home .code, .code.lk { margin-top: auto; padding-top: 12px; width: 100%; max-width: 320px; }
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 28px; }
.hero img { width: min(300px, 80%); height: auto; }

/* 교신함: 교신 자리 */
.strip.inb, .hint.inb { width: 100%; max-width: 440px; margin-inline: auto; } /* PC에서 목록을 가운데에 */
.slots { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; width: 100%; max-width: 440px; margin: 0 auto; } /* PC에서 창을 늘려도 박스가 따라 늘어나지 않게 */
.slot { cursor: pointer; }
.slot .stn { width: 100%; max-width: 334px; margin: 0 auto; height: 46px; padding-right: 8px; } /* 호출부호 박스는 예전 폭(360 목록 기준 334px) 그대로, 묶음 박스(440) 안 가운데 */
.slot .stn .lead { color: var(--dim); } .slot.active .stn .lead, .slot.queue .stn .lead { color: var(--p); }
.slot .stn .side { flex: none; } .slot .stn .st em { font-style: normal; opacity: 1; color: var(--dim); }
.slot.active .stn, .slot.queue .stn { border-color: #5b5b57; }
.slot.waiting .stn, .slot.dormant .stn, .slot.ended .stn, .slot.unreached .stn, .slot.empty .stn { border-style: dashed; }
.slot.cut { opacity: .5; cursor: default; } .slot.empty { cursor: default; opacity: .5; padding: 0; text-align: left; } /* 전역 .empty(빈 목록 문구)의 위아래 여백이 새어 들어오지 않게 */
.slot .stn .cs > span:not(.d) { max-width: 22px; }
.slot .fav { flex: none; min-height: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dim); display: grid; place-items: center; }
.slot .fav .ic { width: 20px; height: 20px; } .slot .fav.on { color: #ffc828; } .slot .fav.on svg { fill: currentColor; }
.strip .sortb { border: 0; min-height: 0; border-radius: 14px; display: inline-flex; color: var(--mut); } .strip .sortb.fst { margin-left: auto; } .strip .sortb.on { color: var(--fg); background: color-mix(in srgb, var(--c) 24%, var(--s2)); }
.strip { display: flex; gap: 8px; padding: 4px 0 8px; flex-wrap: wrap; }

/* 교신 화면: 재생 타임라인 */
.peerbar { display: flex; align-items: center; gap: 6px; height: 56px; flex: none; padding: 0 6px; }
.peerbar > .ib:first-child { margin-left: -18px; } /* 뒤로가기(<)의 왼쪽 끝을 아래 전보 줄의 시작선(16px)에 맞춘다 */
.peerbar .ib.bad { color: #b3453f; } /* 차단·신고 */
.peerbar .ib { flex: none; width: 32px; height: 32px; } /* 위쪽 단추(뒤로·끝내기·차단·신고)는 좁은 폰에서도 이름을 가리지 않게 32px */
.peerbar .cs { font: 600 14px var(--mono); letter-spacing: .4px; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tl { flex: 1; display: flex; flex-direction: column; overflow-y: auto; margin-inline: calc(-1 * var(--gx)); padding: 4px var(--gx); gap: 10px; } /* 스크롤바를 창 오른쪽 끝으로 */
.ex .ctl { flex-wrap: wrap; gap: 8px 14px; text-align: center; }
.dir { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12px; } .dir svg { width: 18px; height: 18px; } .dir.out { color: var(--p); } .dir.in { color: var(--c); }
/* 교신 화면의 전보: 받은 것은 왼쪽(청록 띠), 보낸 것은 오른쪽(분홍 띠). 위 줄에 방향(송신/수신)과 날짜·시각 */
.wr { width: 84%; padding: 6px 0 6px 12px; border-left: 3px solid var(--c); cursor: pointer; } .wr.me { margin-left: auto; padding: 6px 12px 6px 0; border-left: 0; border-right: 3px solid var(--p); text-align: right; }
.wr .lab { display: flex; align-items: center; gap: 6px; } .wr.me .lab { justify-content: flex-end; } .lab em { font: 11px var(--mono); font-style: normal; color: var(--dim); }
.wr p { margin: 2px 0 0; font: 14px/1.5 var(--type); color: var(--fg); overflow-wrap: anywhere; } .wr:not(.open) p { color: var(--mut); } .wr:hover p { color: var(--fg); }
.wr.sending { opacity: .6; } .wr.open { width: 100%; cursor: default; }
.ex { margin-top: 6px; border: 1px dashed var(--dash); border-radius: 20px; padding: 14px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ex .stage { margin: 0; } .ex .stage svg { width: 150px; }
.ex .rig { gap: 6px; margin: 2px 0; } .ex .rig .lamp.sm { width: 34px; } .ex .rig .gauge, .ex .rig + .stage svg { width: 110px; } /* 교신 화면 속 다시 수신: 램프·게이지·그림을 작게 */
.seal .ex { flex-direction: row; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-top: 4px; text-align: left; } .seal .tap { margin: 0; font: 13px var(--type); color: var(--fg); } .seal .newl { font: 700 12px var(--type); color: #ffc828; margin-right: 8px; } /* 안 받은 전보: NEW + 도착 안내 + 수신하기(점선) */
.seal.locked { opacity: .45; }
.ex .decoded { font-size: 17px; min-height: 0; margin: 2px 0; }
.dl { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font: 12px var(--mono); } .dl .ic { width: 15px; height: 15px; }
.jw { position: sticky; bottom: 0; height: 0; margin-top: -10px; align-self: flex-end; width: 0; } /* 목록 끝에 높이 0 으로 붙어 보이는 영역 맨 아래에 떠 있다 */
.jw button { position: absolute; right: 0; bottom: 8px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ln); background: var(--s2); color: var(--fg); box-shadow: 0 2px 10px #0006; }
.compose { flex: none; padding: 6px 16px 10px; border-top: 1px solid #383836; }
.compose { display: flex; flex-direction: column; align-items: center; gap: 6px; } .compose .note { margin: 0; font-size: 12.5px; color: var(--mut); } .compose .wb:disabled { opacity: .4; cursor: default; } /* 교신 화면 아래: 답신 타전하기 */

/* 칸·목록 */
/* 알림함: 안 읽은 것은 흰색, 읽은 것은 회색. 안내 한 줄, 오늘/어제/이전 묶음, 20개 뒤 더 보기 */
.ld > :not(.pt) { visibility: hidden; } /* 교신함: 준비되기 전까지 제목 아래를 가림(자리는 그대로) */
.nt-keep { display: flex; align-items: flex-start; gap: 8px; margin: 2px 4px 4px; color: var(--mut); font-size: 12.5px; line-height: 1.5; word-break: keep-all; } .nt-keep .ic { width: 16px; height: 16px; flex: none; margin-top: 1.5px; } /* 아이콘은 첫 줄 높이에 */
.nt-g { display: flex; align-items: center; gap: 10px; margin: 16px 4px 8px; font: 700 11px var(--mono); letter-spacing: .14em; color: var(--dim); } .nt-g::after { content: ''; flex: 1; border-top: 1px dashed var(--dash); }
.nt-l { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.nt-i { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--ln); border-radius: 16px; color: var(--fg); text-decoration: none; } .nt-i.un { border-color: #77756f; }
.nt-i .ico { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1.5px solid var(--mut); display: grid; place-items: center; color: var(--mut); } .nt-i.un .ico { border-color: var(--fg); color: var(--fg); } .nt-i .ico .ic { width: 20px; height: 20px; }
.nt-i .tx { flex: 1; min-width: 0; } .nt-i .tx b { display: block; font-size: 14.5px; font-weight: 600; color: var(--fg); } .nt-i:not(.un) .tx b { font-weight: 500; color: var(--mut); }
.nt-i .tx small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font: 11px var(--mono); color: var(--dim); } .nt-i .tx small .ic { width: 13px; height: 13px; }
.nt-i.w .ico { color: #b3453f; border-color: #b3453f; } .nt-i .tx small.wn { display: block; margin-top: 3px; font: 12px var(--type); color: #b8b5ad; } /* 경고 알림: 검붉은 금지 아이콘 + "경고 n/3" 줄 */
.nt-i .go { display: inline-grid; color: var(--dim); } .nt-i .go .ic { width: 18px; height: 18px; }
.nt-more { display: flex; justify-content: center; margin: 14px 0 6px; } .nt-more button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 22px; border: 1px dashed var(--dash); border-radius: 999px; background: none; color: var(--mut); font-size: 13.5px; } .nt-more .ic { width: 16px; height: 16px; }
.nt-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 22px 0 0; padding: 34px 16px; border: 1px dashed var(--dash); border-radius: 20px; color: var(--mut); font-size: 14px; } .nt-empty .ic { width: 34px; height: 34px; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 12px 4px; border-bottom: 1px solid #383836; }
.list li.unread a { font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.pick { aspect-ratio: 1; background: var(--art); border: 1px solid var(--ln); border-radius: 16px; display: grid; place-items: center; padding: 8px; position: relative; }
.pick.on { border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.pick svg { width: 100%; height: auto; }
.pick small { position: absolute; bottom: 4px; color: var(--mut); font-size: 11px; }
.quote { background: var(--s1); border-radius: 14px; padding: 10px; margin: 8px 0; }

/* 알림·대화상자 */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--s2); border: 1px solid var(--ln); padding: 10px 16px; border-radius: 14px; z-index: 40; } /* 팝업(30) 위에 보여야 팝업 안에서 누른 결과(복사 등)가 가려지지 않는다 */
.dialog { position: fixed; inset: 0; background: #000a; display: grid; place-items: end center; z-index: 30; }
.sheet { background: #222220 url(/bg-tex.webp) 0 0 / 512px 512px; border: 1px solid var(--dash); border-bottom: 0; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); width: 100%; max-width: 560px; }
.sheet h3 { margin: 0 0 10px; color: var(--p); display: flex; align-items: center; gap: 8px; } .sheet h3 .ic { width: 22px; height: 22px; }
.sheet p { margin: 0 0 2px; line-height: 1.25; color: var(--mut); }
.sheet .row button, .wait button { min-height: 36px; padding: 0 14px; font-size: 14px; background: none; border: 1px dashed var(--dash); border-radius: 12px; }
.sheet .row button.primary { border: 1px solid #fff; color: #fff; } .sheet .row button.danger { border: 1px solid var(--p); color: var(--p); }
.sheet .row button:disabled { opacity: .35; cursor: default; }
.sheet input { background: none; border: 1px dashed var(--dash); border-radius: 12px; } .sheet input:focus { outline: 0; border: 1px solid #fff; }
.sheet .want { margin: 12px 0 6px; color: var(--fg); font: 600 15px var(--mono); letter-spacing: .08em; }
.sheet .col button { min-height: 48px; border-radius: 14px; background: var(--s2); border: 0; padding: 0 16px; display: flex; align-items: center; gap: 12px; }

/* 전파 지도 */
.map svg { width: 100%; height: auto; display: block; }
.radiomap .land { stroke: #4b4b47; stroke-width: 1.3; stroke-linecap: round; fill: none; }
.radiomap .tw { stroke: var(--c); stroke-width: 1.9; animation: twk 3.2s ease-in-out infinite; } .radiomap .tw1 { animation-delay: 1.1s; } .radiomap .tw2 { animation-delay: 2.1s; }
@keyframes twk { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.radiomap .sig { stroke: var(--p); stroke-width: .5; fill: none; stroke-dasharray: 3 3; animation: flow 3s linear infinite; opacity: .7; }
.radiomap .spark { fill: #fff; } .radiomap .from { fill: var(--p); } .radiomap .to { fill: var(--c); }
.radiomap .rip { fill: none; stroke: var(--p); stroke-width: .6; transform-box: fill-box; transform-origin: center; animation: rps 3s ease-out infinite; }
@keyframes rps { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .radiomap .tw, .radiomap .sig, .radiomap .rip { animation: none; } }
@keyframes flow { to { stroke-dashoffset: -12; } }

/* 넓은 화면(PC): 탭이 왼쪽 레일로 */
@media (min-width: 900px) {
  #app { max-width: none; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: 56px 1fr; }
  nav { grid-column: 1; grid-row: 1 / 3; height: auto; flex-direction: column; justify-content: flex-start; gap: 22px; padding-top: 70px; border-top: 0; border-right: 1px solid #383836; }
  nav a { flex: none; height: 44px; } nav a.on::after { bottom: auto; left: 6px; width: 3px; height: 18px; }
  .top { grid-column: 2; } main { grid-column: 2; width: 100%; --gx: max(16px, calc((100vw - 72px - 640px) / 2)); padding-inline: var(--gx); } /* 스크롤바는 창 오른쪽 끝, 내용은 640px 중앙 */
  main.me, main:has(.tl) { --gx: max(16px, calc((100vw - 72px - 440px) / 2)); } /* 메인처럼 슬림하게(내용 440px) */
  .stage svg { width: 340px; }
  .toast { left: calc(50% + 36px); } /* 왼쪽 레일(72px)을 뺀 내용 영역의 가운데 */
  body:has(.dialog) .toast { left: 50%; } /* 팝업이 떠 있을 때의 알림(링크 복사 등)은 팝업(화면 전체의 가운데)의 좌우 가운데 */
}

/* 스크롤바: 어두운 화면에 어울리는 가늘고 낮은 대비 */
* { scrollbar-width: thin; scrollbar-color: #4a4a46 transparent; }
/* 첫 화면 위쪽의 큰 로고: 보이는 높이에 맞춰 줄고 늘 뿐 사라지지 않는다. --rest 는 나머지 고정 높이(350px) + 로고 */
.hero-logo { height: var(--logo); max-width: 80vw; width: auto; display: block; margin: 6px 0 4px; flex: none; object-fit: contain; }
.home { scrollbar-gutter: stable; /* 메인은 아래 소개글 때문에 스크롤바가 있다: 없는 화면(인사 주소·수신)도 같은 폭을 비워 가운데를 맞춘다 */ --logo: clamp(36px, 12svh, 100px); --rest: calc(460px + var(--logo)); padding-bottom: 36px; } /* 아래 36px: 송신 단추 파문이 번질 자리 */


/* 첫 화면 맛보기 안내: 수신 전 칩, 수신 후 답신 유도 */
.taste { font: 11px var(--mono); letter-spacing: .14em; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 999px; padding: 3px calc(10px - .14em) 3px 10px; margin: 2px 0 6px; }
.after { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; width: 100%; }
.reply { display: contents; } .reply[hidden] { display: none; }
.reply .ok, .reply .msg { text-align: center; } .reply .code { margin-left: auto; margin-right: auto; } /* 비밀 전보 화면 안의 답신: 안내 글과 코드 입력창을 가운데로 */
.lead { margin: 6px 8px 2px; text-align: center; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.note { margin: 2px 0 0; text-align: center; color: var(--mut); font-size: 12px; }
.wait { display: grid; justify-items: center; gap: 8px; flex: 1; }
button.wb:not(.ib) { width: 312px; max-width: 100%; min-height: 46px; padding: 8px 16px; line-height: 1.35; text-align: center; border-radius: 12px; background: none; border: 1px solid var(--p); color: var(--p); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 12px; } /* 교신국 박스와 같은 모양, 전파 호가 차례로 깜빡임 */
.sbox { display: flex; flex-direction: column; flex: 1; } /* 짧은 화면에선 내용 바로 아래, 긴 화면에선 행동 단추가 화면 아래로 내려간다(메인의 .dock 처럼) */
.act { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: auto; padding-top: 8px; }
.act .row { display: flex; align-items: flex-start; justify-content: center; gap: 6px; position: relative; }
.act .row::before, .act .row::after { content: ''; position: absolute; top: 21.5px; width: 28px; height: 9px; background: linear-gradient(90deg, var(--c), var(--v) 50%, var(--p)) 0 0 / 312px 100% no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12'%3E%3Cpath d='M7 1L2 6l5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12'%3E%3Cpath d='M7 1L2 6l5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x; -webkit-mask-size: 7px 100%; mask-size: 7px 100%; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--v) 70%, transparent)); } /* 가운데(시크릿 만들기)에서 양쪽으로 신호가 퍼져 나가는 화살표 */
.act .row::before { left: 89px; background-position: -89px 0; animation: arl 3.2s infinite; }
.act .row::after { left: 195px; background-position: -195px 0; animation: arr 3.2s infinite; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12'%3E%3Cpath d='M2 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12'%3E%3Cpath d='M2 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@keyframes arl { 0% { clip-path: inset(-8px 0 -8px 100%); animation-timing-function: steps(4, end); } 35%, 50% { clip-path: inset(-8px 0 -8px 0); animation-timing-function: steps(4, end); } 85%, 100% { clip-path: inset(-8px 100% -8px 0); } } /* 화살표가 가운데에서 바깥으로 한 개씩 생겼다가, 다시 가운데부터 한 개씩 사라진다 */
@keyframes arr { 0% { clip-path: inset(-8px 100% -8px 0); animation-timing-function: steps(4, end); } 35%, 50% { clip-path: inset(-8px 0 -8px 0); animation-timing-function: steps(4, end); } 85%, 100% { clip-path: inset(-8px 0 -8px 100%); } }
.act .ac:not(.ib) { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--fg); font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: center; white-space: pre-line; }
.act .ac .ib { position: relative; z-index: 1; width: 52px; height: 52px; flex: none; background: var(--bg); color: var(--c); border: 1.5px solid var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); } /* 얇은 원 테두리 + 빛 번짐(소개 화면의 단계 아이콘과 같은 방식) */
.act .ac:nth-child(2) .ib { color: var(--v); border-color: var(--v); box-shadow: 0 0 12px color-mix(in srgb, var(--v) 40%, transparent); }
.act .ac:nth-child(3) .ib { color: var(--p); border-color: var(--p); box-shadow: 0 0 12px color-mix(in srgb, var(--p) 40%, transparent); } /* 하늘색·보라·핑크 */ .act[hidden] { display: none; }
.act .ac .ib::before, .ib.pri.sm2::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: repeating-conic-gradient(currentColor 0 2.5deg, transparent 2.5deg 10deg); -webkit-mask: radial-gradient(circle, transparent calc(var(--r) - 3.5px), #000 calc(var(--r) - 3px), #000 calc(var(--r) - .5px), transparent var(--r)); mask: radial-gradient(circle, transparent calc(var(--r) - 3.5px), #000 calc(var(--r) - 3px), #000 calc(var(--r) - .5px), transparent var(--r)); opacity: .85; filter: drop-shadow(0 0 3px currentColor); pointer-events: none; } /* 라디오 다이얼 같은 눈금 링(--r: 링 바깥 반지름) */
.act .ac .ib { --r: 32px; } .ib.pri.sm2 { --r: 28px; }
.act .sub { display: flex; gap: 22px; margin-top: 2px; }
.act .lk.rp .ic { color: #b3453f; } /* 신고 아이콘: 금지 표현 아이콘과 같은 검붉은색 */
.act .lk:not(.ib) { min-height: 36px; padding: 0 6px; background: none; border: 0; border-radius: 0; color: var(--mut); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .act .lk .ic { width: 20px; height: 20px; }
button.wb.rv:not(.ib) { width: 100%; max-width: 360px; padding: 8px 12px; gap: 10px; font-size: 13px; } /* 소개글 하단: 수신 아이콘, 한 줄 */
.wb .a { animation: wv 1.2s infinite; } .wb .a2 { animation-delay: .2s; } .wb .a3 { animation-delay: .4s; }
@keyframes wv { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
button.cta { min-height: 50px; padding: 0 34px; border-radius: 26px; border: 0; background: var(--p); color: #fff; font-weight: 600; font-size: 15.5px; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
.sub { display: flex; gap: 22px; justify-content: center; margin-top: 8px; }
button.lnk { background: none; border: 0; min-height: 0; padding: 6px 4px; color: var(--dim); font-size: 12.5px; }
.first.done { --rest: calc(570px + var(--logo)); }
@media (prefers-reduced-motion: reduce) { .act .row::before, .act .row::after { animation: none; } button.cta { animation: none; } .wb .a, .ib.pri.sm2 .a { animation: none; } }

/* 첫 화면 아래 앱 소개: 단추는 코드 칸 아래 제 자리에 두고(겹치지 않게), 소개는 스크롤하면 차례로 펼쳐진다 */
.intro { width: 100%; max-width: 440px; padding: 48px 4px 28px; display: grid; gap: 18px; justify-items: center; text-align: left; }
.sig { font: 700 13px var(--mono); letter-spacing: .3em; color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); white-space: nowrap; }
.intro h2 { margin: 6px 0 0; text-align: center; font: 700 24px/1.3 var(--type); letter-spacing: .01em; }
.lead2 { margin: 0 4px; text-align: center; color: var(--mut); font-size: 14.5px; line-height: 1.8; }
.intro h2.sec { justify-self: stretch; display: flex; align-items: center; gap: 12px; margin: 26px 0 0; text-align: left; font: 600 12.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.intro h2.sec::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--c) 35%, var(--ln)); }
.cards { display: grid; gap: 12px; width: 100%; }
.ic3 { position: relative; padding: 16px 16px 16px 18px; background: none; border: 1px solid var(--ln); border-radius: 16px; }
.ic3 h3 { margin: 0 0 4px; font: 600 15px/1.4 var(--type); }
.ic3 p { margin: 0; color: var(--mut); font-size: 13.5px; line-height: 1.75; }
/* 이용 방법: 신호가 이어지는 선 위의 3단계 */
.steps { gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; left: 25px; top: 28px; bottom: 76px; width: 2px; background: color-mix(in srgb, var(--v) 45%, var(--ln)); }
.steps .ic3 { display: grid; grid-template-columns: 50px 1fr; column-gap: 10px; align-items: start; background: none; border: 0; padding: 10px 0; }
.steps .ic3 .bub { grid-row: 1 / 3; width: 40px; height: 40px; margin-left: 5px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--c); color: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); position: relative; }
.steps .ic3:nth-child(2) .bub { border-color: var(--v); color: var(--v); box-shadow: 0 0 12px color-mix(in srgb, var(--v) 40%, transparent); }
.steps .ic3:nth-child(3) .bub { border-color: var(--p); color: var(--p); box-shadow: 0 0 12px color-mix(in srgb, var(--p) 40%, transparent); }
.steps .ic3 .bub .ic { width: 20px; height: 20px; }
.steps .ic3 h3 { align-self: end; } .steps .ic3 p { grid-column: 2; }
/* 특징: 번호표와 역할색 윗선 */
.feat { grid-template-columns: 1fr 1fr; }
.feat .ic3 { padding-top: 22px; border-top: 2px solid var(--c); }
.feat .ic3:nth-child(3n+2) { border-top-color: var(--v); } .feat .ic3:nth-child(3n) { border-top-color: var(--p); }
.feat .ic3 .no { position: absolute; top: 6px; right: 12px; font: 11px var(--mono); letter-spacing: .12em; color: var(--dim); }
.feat .ic3 h3 { font-size: 14px; } .feat .ic3 p { font-size: 12.5px; line-height: 1.7; }
@media (max-width: 380px) { .feat { grid-template-columns: 1fr; } }
/* 대상: 인용 */
.who .ic3 { background: none; border: 0; border-left: 2px solid var(--p); border-radius: 0; padding: 4px 4px 4px 16px; }
.who .ic3 p { font-size: 14px; color: var(--fg); opacity: .85; }
/* 자주 묻는 질문 */
.faq { display: grid; gap: 8px; width: 100%; }
.faq details { background: none; border: 1px solid var(--ln); border-radius: 12px; padding: 0 14px; transition: border-color .2s; }
.faq details[open] { border-color: color-mix(in srgb, var(--c) 55%, var(--ln)); }
.faq summary { cursor: pointer; padding: 13px 0; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 20px/1 var(--mono); color: var(--c); flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 14px; color: var(--mut); font-size: 13.5px; line-height: 1.75; }
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
.cards .rv:nth-child(2) { transition-delay: .08s; } .cards .rv:nth-child(3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
.foot { width: 100%; padding: 18px 0 26px; display: grid; gap: 8px; justify-items: center; border-top: 1px solid var(--ln); margin-top: 24px; }
.foot .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.foot a { color: var(--dim); font-size: 12.5px; text-decoration: none; letter-spacing: .03em; } .foot a:hover { color: var(--fg); }
.foot small { color: var(--dim); font-size: 11.5px; }
.foot small.mail { font-size: 12.5px; } .foot small.mail span { user-select: all; color: var(--fg); }

/* 탭 화면 공통 꾸밈(교신함·비밀·나): 제목 줄, 구역 라벨, 상자, 선택 줄, 칩 */
.pt { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; font: 700 19px var(--mono); letter-spacing: .04em; }
.pt .ic { color: var(--c); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)); }
.pt::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--c) 35%, var(--ln)); }
.box { border: 1px solid var(--ln); border-radius: 18px; padding: 4px 16px 14px; background: var(--s1); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c) 14%, transparent); }
.box h3 { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; font: 600 12.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.box h3::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--c) 35%, var(--ln)); }
/* 나의 전신소: 메인 설명란 스타일 — 교신함 빈자리의 점선 박스 느낌. 박스·구분줄·버튼 테두리는 모두 같은 점선(--dash), 제목은 핑크, 주파수는 누르면 흰색으로 켜지는 칩, 체크는 토글 스위치 */
:root { --dash: #55554f; }
.me .box { background: none; border: 0; box-shadow: none; padding: 0; margin: 30px 0 0; } .me .box h3 { margin: 0 0 12px; color: var(--p); }
.me .box h3 { display: flex; align-items: center; gap: 8px; } .me .box h3 .ic { width: 22px; height: 22px; }
.me p.cs { display: flex; align-items: center; margin: 4px 0 12px; color: var(--fg); font: 600 15px var(--mono); letter-spacing: .08em; } .me p.cs .sep { color: #77776f; margin: 0 10px; } .me p.cs .free { color: var(--mut); } .me p.cs .tags { position: static; filter: none; display: inline-flex; }
.me .pt .ic { color: #fff; filter: none; }
.me .box h3::after { display: none; }
.me .pt::after { background: none; height: 0; border-top: 1px dashed var(--dash); }
.me .box select, .me .box input:not([type=checkbox]), .me .box .fld, .me .box button:not(.ib), .me .box .btn, .me .box label.check { background: none; border: 1px dashed var(--dash); border-radius: 12px; }
.me .box .qbox { border: 1px solid var(--ln); border-top: 2px solid var(--p); border-radius: 16px; padding: 18px 16px 16px 18px; margin: 16px 0 14px; } /* 랜딩 '이래서 좋아요' 카드와 같은 모양(실선 + 위쪽 색선) */ .me .box .qbox p { margin: 0; } .me .box .ql { color: var(--p); font-size: 12.5px; margin-bottom: 4px; } .me .box .q { font-size: 16px; } .me .box .qbox .hint { margin-top: 6px; font-size: 13px; }
.me .box .ql, .me .box .qbox .hint { display: flex; align-items: center; gap: 6px; } .me .box .qbox .ic { width: 15px; height: 15px; }
.tw { position: relative; } .ph2 { position: absolute; inset: 13px 15px auto; pointer-events: none; color: var(--mut); font-family: var(--type); font-size: 13px; line-height: 1.7; opacity: .8; } /* 안내 글자: 오늘의 질문 설명과 같은 13px. 입력창 자체는 아이폰 자동 확대 때문에 16px 유지 */ .ph2 p { margin: 0 0 12px; display: flex; gap: 6px; } .ph2 .ic { width: 14px; height: 14px; margin-top: 4px; }
.row.end { justify-content: flex-end; }
.me .box button.primary { border: 1px solid #fff; color: #fff; }
.me textarea { background: none; border: 1px dashed var(--dash); border-radius: 12px; } .me textarea:focus { outline: 0; border: 1px solid #fff; box-shadow: none; }
.me .box div.dd > button { min-height: 44px; padding: 8px 14px; font-size: inherit; background: none; border: 1px dashed var(--dash); border-radius: 12px; }
.me label.check { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
.me input[type=checkbox], .sheet input[type=checkbox] { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: #3a3a37; border: 1px solid #77776f; cursor: pointer; transition: background .2s, border-color .2s; }
.me input[type=checkbox]::before, .sheet input[type=checkbox]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #bdb8aa; transition: left .2s, background .2s; }
.me input[type=checkbox]:checked, .sheet input[type=checkbox]:checked { background: var(--p); border-color: var(--p); } .me input[type=checkbox]:checked::before, .sheet input[type=checkbox]:checked::before { left: 20px; background: #fff; }
.me .box button:not(.ib), .me .box .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
.me .box input:not([type=checkbox]):focus { outline: 0; border: 1px solid #fff; } .me input[type=checkbox]:focus, .me input[type=checkbox]:focus-visible { outline: 0; }
.sg { position: relative; } .sg input { padding-right: 52px; } .sg .ib { width: 32px; height: 32px; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border-radius: 9px; background: none; border: 1px solid var(--dash); } .sg .ib .ic { width: 16px; height: 16px; } .sg .ic svg { stroke-width: 2.8; }
.me .chips.fold { max-height: var(--fold, 78px); overflow: hidden; } /* 칩 2줄(실제 높이는 me.js 가 잰다) */
.me .picked { margin: 0 0 10px; font-size: 13px; color: var(--fg); }
.me .box button.more { min-height: 28px; padding: 0; border: 0; background: none; color: var(--mut); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; } .more .ic { width: 14px; height: 14px; transition: transform .2s; } .more.open .ic { transform: rotate(180deg); }
.me .chips { gap: 8px; margin: 8px 0; }
.me .box .chip { background: none; border: 1px dashed var(--dash); border-radius: 12px; padding: 7px 14px; box-shadow: none; color: var(--mut); font: 12.5px var(--mono); letter-spacing: .06em; }
.me .chip input[type=checkbox] { display: none; }
.me .box .chip:has(input:checked) { border: 1px solid #fff; color: #fff; box-shadow: none; }
.box > label:not(.check) { display: grid; gap: 4px; margin: 10px 0; font: 11.5px var(--mono); letter-spacing: .1em; color: var(--dim); }
.box select, .box input:not([type=checkbox]), textarea { transition: border-color .2s, box-shadow .2s; }
select { color-scheme: dark; } option { background: #222220; color: #faf9f5; line-height: normal; min-height: 0; padding: 2px 8px; font-size: 14px; } /* 펼친 목록도 어두운 화면에 맞춘다 */
.dd { position: relative; margin: 4px 0; }
.dd > button { width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 14px; background: var(--s1); border: 1px solid var(--ln); display: flex; justify-content: space-between; align-items: center; text-align: left; font-size: inherit; } .dd > button .ic { width: 16px; height: 16px; color: #bdb8aa; }
.dd ul { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 196px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #55554f transparent; background: #222220; border: 1px solid var(--dash); border-radius: 12px; box-shadow: 0 8px 24px #000a; }
.dd li { padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: inherit; } .dd li:hover { background: #2e2e2b; } .dd li.on { color: var(--p); }
.dd > button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
select:focus, textarea:focus, .fld:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.home .code .fld:focus-within { box-shadow: none; }
label.check { padding: 10px 14px; background: var(--s1); border: 1px solid var(--ln); border-radius: 12px; cursor: pointer; }
.box label.check { background: var(--bg); }
label.check:has(input:checked) { border-color: color-mix(in srgb, var(--c) 55%, var(--ln)); color: var(--fg); }
.chip { background: var(--bg); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.chip:has(input:checked) { border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 35%, transparent); color: var(--fg); }
.box button:not(.ib) { border-color: color-mix(in srgb, var(--c) 40%, var(--ln)); }
.list li { transition: background .2s; } .list:not(.board) li:hover { background: color-mix(in srgb, var(--c) 6%, transparent); }
@media (pointer: coarse) { input, textarea, select, .home .code input { font-size: 16px; } } /* 아이폰은 16px 미만 입력창에 포커스하면 화면을 자동 확대한다(확대 기능은 그대로 둔다) */

/* 호출부호 박스 왼쪽 위에 걸치는 배지(Plus·운영자) */
.slot .badge { display: inline-block; margin: 4px 0 0 4px; }
.slot.tg { margin-top: 10px; }
.tags { position: absolute; left: 12px; top: -17px; z-index: 2; display: flex; align-items: center; gap: 4px; pointer-events: none; filter: drop-shadow(0 1px 3px #000b); }
.tags .pl { display: block; width: 77px; height: 13px; } .tags .pl svg { display: block; width: 100%; height: 100%; }
.peerbar .cs { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; } .peerbar .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; white-space: nowrap; }
.box.plan h3 .tags { margin-left: 0; } .plan h3 .tags .pl { width: 116px; height: 20px; } /* PLUS 화면의 큰 배지 */
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 8px; } .plan .price b { font: 700 30px/1.1 system-ui, sans-serif; color: var(--fg); } .plan .price small { font: 600 12px system-ui, sans-serif; color: var(--dim); }
.plan.hot { border-color: #a8801c; } .plan.hot .price b { color: #ffc828; } .plan.hot .price small { color: #b89a4a; }
.plist { margin: 6px 0 0; padding-left: 18px; color: var(--mut); font-size: 13.5px; line-height: 1.9; } /* 다른 설명글(.hint)과 같은 크기 */
.peerbar .tags, .box h3 .tags { position: static; filter: none; flex: none; } .box h3 .tags { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.stn .tags { opacity: 0; transition: opacity .3s; } .stn.on .tags { opacity: 1; }
nav a .ic.pl { width: 42px; height: 20px; } nav a:not(.on) .ic.pl { opacity: .72; } /* 메뉴의 Plus 아이콘은 가로로 넓고, 지금 탭이 아닐 땐 살짝 어둡게 */
.me .box .qbox .hint { align-items: flex-start; } .me .box .qbox .hint .ic { margin-top: 2px; }

/* 만 19세 확인: 토글 대신 사각 체크박스(체크하면 흰색으로 채워짐) */
.me .box label.check.sq { flex-direction: row; justify-content: flex-start; border: 0; padding: 0; font-size: 13px; }
.me label.sq input[type=checkbox] { width: 20px; height: 20px; border-radius: 5px; background: none; border: 1px solid #77776f; margin-right: 10px; padding: 0; box-sizing: border-box; }
.me label.sq input[type=checkbox]::before { content: ''; inset: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; background: none; opacity: 0; clip-path: none; border: solid #111; border-width: 0 0 2px 2px; width: 10px; height: 5px; top: 5px; left: 4px; transform: rotate(-45deg); transition: opacity .15s; }
.me label.sq input[type=checkbox]:checked { background: #fff; border-color: #fff; } .me label.sq input[type=checkbox]:checked::before { opacity: 1; left: 4px; background: none; }
.me .box .qbox .ql { width: fit-content; padding: 2px 9px; margin-bottom: 8px; border: 1px dashed var(--p); border-radius: 8px; } /* '오늘의 질문' 문구만 점선 태그로 */
.ph2 .ic { color: #b3453f; opacity: 1; } /* 금지 안내 아이콘: 어두운 빨강 */
.me p > .st { display: inline-block; padding: 1px 8px; margin-right: 4px; border: 1px dashed var(--dash); border-radius: 4px; font-size: 12.5px; color: var(--mut); } .me p > .st.active { color: var(--fg); } .me p > .st.rejected { color: #b3453f; border-color: #b3453f; } /* 인사 전보 상태 태그 */
.me .box { padding-left: 10px; padding-right: 10px; } /* 나의 전신소와 그 하위 화면(인사 전보 쓰기): 제목 줄은 그대로 두고 안쪽 내용만 좌우로 들임 */
.me p.cs .tags .pl { width: 98px; height: 17px; } .me p.cs .tags { align-self: center; line-height: 0; } /* FREE·PLUS 배지: 호출부호 옆에서 조금 크게, 상하 가운데 */
.me p.cs .tags { position: relative; left: 0; top: 1.5px; } /* 글꼴에 따라 글자 중심이 줄 상자 중앙보다 아래라서 배지를 살짝 내림 */
.me p.cs .tags { margin-left: 12px; } /* '|' 구분기호를 없앤 자리 */
.mside { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .mside .tags { position: static; filter: none; } .mside .tags .pl { width: 90px; height: 15.6px; } /* 인사 전보 쓰기: 단어 수 위의 등급 배지 */
/* PLUS 화면(새 디자인): 제목의 PLUS 아이콘, 등급 칸은 투명 + 배지 제목, 안내글은 안쪽으로 */
.pt .ic.pl { width: 58px; height: 28px; } .me > .hint { padding: 0 10px; }
.me .plan.hot .price b { color: #ffc828; } .me .plan .plist { padding-left: 18px; } .me .plan .hint { margin: 10px 0 12px; }
.me .box h3 .tags { margin-left: 0; }
.me .box.plan { border: 1px dashed var(--dash); border-radius: 12px; padding: 14px 16px; margin: 20px 10px 0; } /* FREE·PLUS 칸은 점선 박스 */
.me .hint.fine { font-size: 12px; line-height: 1.6; padding-left: 1.1em; text-indent: -1.1em; margin: 6px 0; } /* 가격·결제 유의 문구: 작게, 앞에 * */
.me .box.plan.hot { border-color: #d9a21b; } /* PLUS 칸 점선은 상징색인 금색 */
.me .box.cta { margin-top: 16px; } /* 구독 단추는 PLUS 칸 밖 */
.me .box .fld input:not([type=checkbox]), .me .box .fld input:not([type=checkbox]):focus { border: 0; background: none; box-shadow: none; margin: 0; } .me .box .fld:focus-within { border: 1px solid #fff; box-shadow: none; } /* 아이콘 달린 입력칸: 바깥 점선 하나만 */
.me .list a { color: var(--fg); } .me .list { border: 0; } .me .list li { border-color: var(--dash); }
.pvthumb { flex: none; margin-left: -2px; box-sizing: border-box; width: 82.5px; height: 82.5px; padding: 6px; display: grid; place-items: center; border: 1px dashed var(--dash); border-radius: 12px; } .pvthumb svg { display: block; width: 100%; height: 100%; } .pvthumb small { color: var(--mut); font-size: 10.5px; } /* 게이지(150px 폭 = 높이 82.5px)와 같은 높이의 미리보기 칸 */

.utag, .uhint b { flex: none; padding: 0 6px; line-height: 16px; border: 1px dashed color-mix(in srgb, var(--p) 50%, transparent); border-radius: 8px; color: var(--p); font: 700 10.5px var(--mono); letter-spacing: .05em; white-space: nowrap; } /* 힌트 입력란 앞 'UNLOCK HINT' 표식(전 언어 공통) */
.uhint b { display: inline-block; margin-right: 8px; vertical-align: 1px; } /* 해독 화면 UNLOCK HINT: 비밀 전보 쓰기의 .utag 와 같은 규칙을 공유 */
.code.dashed .fld:focus-within { border: 1px solid #fff; } /* 답을 입력하려고 누르면 점선이 흰 실선으로(나의 전신소와 같은 활성 표시) */
.me .quote { background: none; padding: 0; margin: 4px 0 0; } /* 답신 화면: 받은 전보는 박스 없이 */
.box > label.fld { display: flex; margin: 10px 0; } /* 박스 바로 아래 입력칸(답신 이메일)도 아이콘과 입력이 한 줄 */
.fld .ib.nx { flex: none; width: 32px; height: 32px; border-radius: 9px; background: none; border: 1px solid var(--dash); box-shadow: none; } .fld .ib.nx .ic { width: 16px; height: 16px; } .fld .ib.nx .ic svg { stroke-width: 2.8; } /* 입력칸 안 > 확인 단추(주파수 제안 칸과 같은 모양) */
.hero .box { text-align: center; } .hero .box .msg { text-align: center; } /* 로그인 화면 안내·결과 문구는 가운데 정렬 */
.hero .box .hint { text-wrap: balance; word-break: keep-all; }
.box input:-webkit-autofill, .me .box .fld input:-webkit-autofill, .me .box .fld input:-webkit-autofill:focus { transition: border-color .2s, box-shadow .2s, background-color 600000s 0s; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--fg); } /* .box 입력칸의 transition 이 자동 채움 규칙을 덮어 파란 바탕이 남던 것(로그인 칸을 새 디자인으로 옮긴 뒤 재발) */
.hero .who2 .ttl { margin: 8px 0 0; } /* 로그인 화면: 로고 아래 제목 */

/* 교신함 설정 안내(나의 전신소 스타일) */
.me .box button.todo { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 14px; text-align: left; }
.gp .hint { margin: 0 0 4px; word-break: keep-all; }
.todo b { margin-left: auto; font: 700 10.5px var(--mono); letter-spacing: .05em; color: var(--dim); } .todo b.req { color: var(--p); } .todo .ic { width: 16px; height: 16px; }
.gpw { width: 100%; max-width: 440px; margin: 0 auto; } .me .box.gp { margin: 18px 0 30px; padding: 0; border: 0; background: none; box-shadow: none; } .gp .bd { padding: 6px 16px 16px; }.me .box button.prof { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 12px; padding: 8px 14px; text-align: left; }
.todo span { word-break: keep-all; }
div:has(> .box.gp) + .hint.inb { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--ln); }
.gp .lg { animation: askb 2.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .gp .lg { animation: none; } }
.strip.inb { display: grid; gap: 10px; } .strip.inb .sr { display: flex; align-items: center; gap: 8px; } .strip.inb .mside { margin-left: 0; } .strip.inb .sorts { margin-left: auto; display: flex; gap: 8px; } .strip.inb .sortb { padding: 5px 14px; font-size: 13px; } .strip.inb .sortb.fst { margin-left: 0; }
.strip.inb .sr { gap: 6px; } .strip.inb .meta { white-space: nowrap; flex-shrink: 0; }  .dd.srt { margin: 0; } .dd.srt > button { width: auto; min-height: 0; gap: 6px; padding: 5px 10px 5px 14px; font-size: 13px; border-radius: 14px; white-space: nowrap; } .dd.srt ul { left: auto; right: 0; min-width: 100%; }
.dd.srt li { white-space: nowrap; padding: 6px 14px; } .dd.srt ul { min-width: max-content; }
.slots .sec { margin: 4px 0 0; font: 600 12.5px var(--mono); letter-spacing: .1em; color: var(--p); } .slots .sdiv { height: 1px; margin: 10px 0; background: var(--ln); }
.tags .badge { margin: 0; padding: 0 6px; font-size: 10px; line-height: 13px; height: 13px; white-space: nowrap; } 
.slots .sech { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .slots .sech .sec { margin: 0; } .slots .sech + .slot.tg { margin-top: 26px; }
.slots { gap: 16px; } .slots .sbox { margin: 8px 0 0; } .slots .sbox .bd { display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 24px; } .slots .sech { padding-inline: 8px; }
/* 구역 박스: 제목 줄(.lg)은 윗선의 양쪽 모서리 조각(::before/::after)과 제목으로 이루어지고, 본문(.bd)은 나머지 테두리 */
.sbox .lg, .gp .lg { display: flex; align-items: center; height: 22px; margin-top: -11px; line-height: 22px; font: 600 12.5px var(--mono); color: var(--p); }
.sbox .lg::before, .gp .lg::before, .sbox .lg::after, .gp .lg::after { content: ''; box-sizing: border-box; align-self: flex-start; margin-top: 11px; height: 16px; border: 1px solid var(--ln); border-bottom: 0; }
.sbox .lg::before, .gp .lg::before { width: 16px; border-right: 0; border-radius: 16px 0 0 0; } .sbox .lg::after, .gp .lg::after { flex: 1; margin-left: 8px; border-left: 0; border-radius: 0 16px 0 0; }
.lg .ic { margin: 0 8px 0 8px; width: 22px; height: 22px; }
.sbox .bd, .gp .bd { box-sizing: border-box; border: 1px solid var(--ln); border-top: 0; border-radius: 0 0 16px 16px; margin-top: 5px; }
.slots .srow { display: flex; justify-content: flex-end; width: 100%; max-width: 334px; margin-inline: auto; } /* 정렬 선택은 호출부호 박스(334px) 오른쪽 끝에 맞춘다 */ .slots .srow + .slot.tg { margin-top: 13px; } /* 제목은 박스 윗선에 얹혀 선이 끊긴다(legend) */
.dd.srt > button { padding: 2px 8px 2px 10px; font-size: 11.5px; gap: 4px; border-radius: 12px; } .dd.srt > button .ic { width: 12px; height: 12px; } .dd.srt li { font-size: 12px; padding: 5px 12px; }
.opb { display: block; width: 29px; height: 13px; padding: 0; margin: 0; min-height: 0; border: 0; background: none; cursor: default; pointer-events: auto; line-height: 0; } .opb svg { display: block; width: 100%; height: 100%; }
span.opb, .tags span.opb { width: 29px; height: 13px; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: block; flex: none; }
.slot .stn .when { position: absolute; right: 10px; top: -17px; display: flex; align-items: center; gap: 4px; font: 500 10.5px/13px var(--mono); letter-spacing: .02em; color: var(--dim); white-space: nowrap; pointer-events: none; } .slot .stn .when .ic { width: 11px; height: 11px; }
.slots .sbox .slot + .slot { margin-top: 23px; } /* 줄 위 배지·시각(17px)을 채우고도 박스 사이가 같은 간격이 되게 */
.lg .ic svg { stroke-width: 1.45; } .lg .ic svg g { stroke-width: 2; } /* 흰색은 같은 굵기여도 더 굵어 보여 살짝 가늘게 */
/* 항목명(제목)은 메인 '비밀 전보를 받으셨나요?'와 같은 글꼴·굵기(600)·자간(기본)으로. 크기만 다르다 */
.box h3, .me .box h3, .intro h2.sec, .sbox .lg, .gp .lg { font-family: var(--type); font-weight: 600; letter-spacing: normal; }
.strip.inb .meta { background: none; border: 1px dashed var(--dash); }

.slot .stn .when .new { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; font-weight: 700; color: #ffc828; } /* 안 읽은 전보: 금색 NEW + 개수 */

.hint.inb { text-align: center; } .hint.inb .ic { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: #b3453f; } /* 교신함 사기 주의 글: 가운데 + 금지 아이콘(전보 쓰기 안내와 같은 어두운 빨강) */
.strip.inb .sr { justify-content: center; } /* 교신함 상단: 배지와 '오늘 남은·교신' 칸을 가운데로 */
.strip.inb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } /* 배지와 두 칸을 한 줄에(좁은 화면·긴 언어에서는 아래로 넘어간다) */
/* 타전 흐름(sendflow.js): 쓰기 칸 잠금 + 상태 한 줄 + 송신 장면 끝의 도장 */
.sendlock { opacity: .4; pointer-events: none; transition: opacity .15s .35s; } /* 바로 끝나는 응답에는 흐려지지 않는다 */
.sf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 12px 0 0; padding: 11px 14px; border: 1px dashed var(--dash); border-radius: 14px; color: #fff; scroll-margin-bottom: 28px; } /* 타전·만들기 단추 아래의 안내는 모두 점선 상자 하나 */
.sf[hidden] { display: none; }
.sf .ic { width: 20px; height: 20px; color: var(--p); } .sf .ic svg { stroke-width: 1.5; } .sf.ban .ic { color: #b3453f; }
.sf b { font: 500 14px var(--type); } .sf a { color: var(--p); text-decoration: none; font-size: 10.5px; font-weight: 600; padding: 6px 2px; } /* 링크는 옆 글자보다 작게(누르는 글자로 보이게) */
.sf p { flex-basis: 100%; margin: 0; padding: 0; text-align: center; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .72); white-space: pre-line; }
.sf.prep .ic svg g path { animation: stna 1.1s infinite; } .sf.prep .ic svg g path:nth-of-type(2) { animation-delay: .2s; } .sf.prep .ic svg g path:nth-of-type(3) { animation-delay: .4s; }
.stamp { display: flex; flex-direction: column; align-items: center; margin: 22px 0 0; text-align: center; } .stamp > .ic { width: 36px; height: 36px; color: var(--p); }
.stamp b { margin: 10px 0 4px; font: 600 19px var(--type); } .stamp p { margin: 0; color: var(--mut); font-size: 13.5px; } .stamp .row { margin-top: 14px; justify-content: center; }
.stamp .go, .seal .go { padding: 9px 20px; border: 1px dashed var(--ln); border-radius: 999px; background: none; color: var(--mut); font-size: 13.5px; } .seal .go { color: var(--fg); }
.stamp input { width: 100%; margin-top: 14px; text-align: center; } .stamp .sg { width: 100%; margin-top: 14px; } .stamp .sg input { display: block; margin: 0; padding-left: 52px; } /* 링크 입력칸 + 복사 아이콘: 위 여백은 바깥 상자에 둬야 아이콘이 입력칸 가운데에 선다(글은 좌우 같은 여백으로 가운데) */

/* 내 비밀 전보 게시판 */
.bh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13px; color: var(--mut); } .bh > span:last-child { display: flex; gap: 6px; }
.me .box .bh button { min-height: 30px; padding: 0 12px; font-size: 13px; color: var(--mut); } .me .box .bh button:disabled, .me .box .pager button:disabled { opacity: .35; }
.board li { display: flex; align-items: center; gap: 8px; padding: 7px 4px; font-size: 13.5px; } .board label.check { margin: 0; }
.board time { flex: none; width: 76px; font-size: 13px; white-space: nowrap; color: var(--mut); font-variant-numeric: tabular-nums; } .board a { flex: none; min-width: 44px; } .board .res { margin-left: auto; color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.pager { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.me .box .pager button { min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 8px; color: var(--mut); font-size: 14px; display: inline-grid; place-items: center; } .me .box .pager button.on { border: 1px solid var(--p); color: var(--p); opacity: 1; } .pager .ic { width: 16px; height: 16px; }
.board li.none { justify-content: center; padding: 22px 4px; color: var(--mut); }
.sheet .stamp { margin-top: 8px; } .board .ib.ghost { flex: none; width: 32px; height: 32px; }
/* 목록의 공유 창은 만든 직후 화면과 같은 링크 칸·원형 아이콘 버튼을 쓴다 */
.sheet .stamp input { background: var(--s1); border: 1px solid var(--ln); border-radius: 14px; }
.sheet .stamp .row button.ib { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; background: var(--s2); border: 1px solid var(--ln); }
.sheet p.dnote { color: var(--mut); font-size: 13.5px; word-break: keep-all; } /* 안내 문장: 공유 창의 안내와 같은 글자 */
.sheet p, .sheet .want, .sheet input { text-align: center; } /* 모든 팝업은 제목·문장·입력·단추 모두 가운데 정렬 */
.sheet .row { justify-content: center; } /* 팝업 제목(h3)은 왼쪽 정렬 */
.sheet div.dd > button { min-height: 44px; padding: 8px 14px; font-size: inherit; background: none; border: 1px dashed var(--dash); border-radius: 12px; }
.sheet label.check { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; background: none; border: 1px dashed var(--dash); border-radius: 12px; margin: 4px 0; } /* 켜고 끄는 줄: 앱 화면(.me)의 스위치 줄과 같게 */
.sheet .dd ul { top: auto; bottom: 100%; margin: 0 0 4px; } /* 팝업은 화면 맨 아래에 붙어 있어서 목록은 위로 펼친다(아래는 화면 밖) */
.sheet label.check:has(input:checked) { border-color: var(--dash); color: inherit; }

/* 끝난 교신 상태 안내 */
.lg .hlp { min-height: 0; width: 28px; height: 28px; padding: 0; margin-left: 2px; border: 0; border-radius: 0; background: none; color: var(--dim); display: inline-grid; place-items: center; } .lg .hlp .ic { width: 16px; height: 16px; margin: 0; } /* 제목 옆 ? : 항목 아이콘(20px)보다 작게 */
.sheet .hp { display: grid; gap: 10px; margin-top: 4px; }
.hpr { display: flex; align-items: flex-start; gap: 10px; color: var(--dim); } .hpr .ic { width: 22px; height: 22px; margin-top: 1px; } .hpr b { color: var(--fg); font-size: 14px; }
.sheet .hpr p { margin: 0; text-align: left; font-size: 13px; line-height: 1.35; word-break: keep-all; }
.hpn { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 10px 12px; border: 1px dashed var(--dash); border-radius: 12px; font-size: 13px; color: var(--fg); word-break: keep-all; } .hpn .ic { width: 18px; height: 18px; } /* 설명과 구분되는 별도 안내 상자 */
.note.sn { margin: 6px 16px; font-size: 13px; word-break: keep-all; } .note.sn .ic { width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; } /* 아이콘은 글줄 맨 앞에 붙어 두 줄이 되어도 글과 떨어지지 않는다 */
.peerbar .meta { background: none; padding: 0; font-size: 12px; color: var(--dim); } .peerbar .meta .ic { width: 14px; height: 14px; } /* 거리: 호출명 아래 작은 글자 */
.slot .stn .side { font-family: var(--mono); } .slot .stn .st { font-size: 10.5px; letter-spacing: .02em; } /* 교신함 오른쪽 글자(나라·시각·상태·빈 자리): 한글이 고정폭 글꼴로 어색하게 그려지지 않게, 위의 '오늘 18:44'와 같은 글자체·크기·자간 */
.wait .btns { display: flex; gap: 8px; } .wait button.pk { border: 1px solid var(--p); color: var(--p); } /* 수락/거절·거두기: 안내 문구 아래 점선 버튼(수락은 핑크) */
.slot .stn .when .new .nn { min-width: 13px; height: 13px; padding: 0 4px; border-radius: 7px; background: #ffc828; color: var(--bg); font: 700 9.5px/13px var(--mono); text-align: center; } /* NEW 옆 안 읽은 전보 수: 호출부호 박스 윗선과 겹치지 않게 글줄 높이(13px) 안에 */

/* 모바일 브라우저(사파리·크롬): 화면 전체(문서)가 스크롤돼야 주소창이 줄어든다. 그래서 안쪽 스크롤 대신 문서가 스크롤되고, 머리글은 위에, 탭은 아래에 붙여 둔다.
   교신 화면(.tl 은 안쪽에서 스크롤하는 채팅 모양)과 홈 화면 앱(주소창이 없음)은 예전 그대로 */
html { scroll-padding: 56px 0 calc(62px + env(safe-area-inset-bottom)); } /* 머리글·탭에 가려지지 않게 */
@media (max-width: 899px) {
  html { scrollbar-gutter: stable; } /* PC 에서 폭을 줄였을 때 긴 화면에만 스크롤바가 생겨 탭이 좌우로 밀리지 않게 자리를 늘 비워 둔다 */
  #app:not(:has(.tl)) { height: auto; min-height: 100svh; }
  #app:not(:has(.tl)) main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  #app:not(:has(.tl)) .top { position: sticky; top: 0; z-index: 20; background: var(--bg) url(/bg-tex.webp) 0 0 / 512px 512px; }
  #app:not(:has(.tl)) nav { position: fixed; bottom: 0; left: 50%; width: 100%; max-width: 560px; transform: translateX(-50%); z-index: 20; background: linear-gradient(rgba(38, 38, 36, 0), var(--bg)), var(--bg) url(/bg-tex.webp) 0 0 / 512px 512px; } /* 위는 본문 무늬, 아래는 무늬 없는 단색으로 서서히: 아래 브라우저 바 영역이 단색이라 */
}
@media (max-width: 899px) and (display-mode: standalone) {
  html { scroll-padding: 0; scrollbar-gutter: auto; }
  #app:not(:has(.tl)) { height: 100dvh; min-height: 0; }
  #app:not(:has(.tl)) main { padding-bottom: 16px; }
  #app:not(:has(.tl)) .top { position: static; }
  #app:not(:has(.tl)) nav { position: static; left: auto; width: auto; max-width: none; transform: none; }
}