/* 폴인러브 앱 공통(2026-11-12 개편): 남색 + 따뜻한 베이지. 노랑은 포린(별)에만 */
:root {
  --bg: #FFFFFF; --paper: #FFFCF7; --sand: #EDE3D3; --line: #E6DCCB;
  --navy: #2B3F86; --navy-d: #1F2E66; --navy-l: #E5E9F3;
  --ink: #1E2233; --muted: #7D7569; --sun: #FFE14D; --rose: #E9A8A0;
  --sans: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
  --dock: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); overflow-x: clip; }
/* 2026-11-12 5차(사용자: "앱 컨셉을 밤하늘로, 포린이가 별이니까"): 모든 화면 = 남색 밤하늘 + 반짝이는 작은 별(.sky, app.js 가 넣음).
   카드는 크림색 쪽지, 바깥 글자는 흰색·연한 남색, 강조는 포린의 노랑 */
html { background: #fff; }
body { background: transparent; }
.head h1 { color: var(--ink); }
.head .sub { color: var(--muted); }
.pill { color: var(--navy) !important; background: var(--navy-l) !important; }
.sec-t { color: var(--ink); }
.sec-t small { color: var(--muted) !important; }
/* 예전 종이 결(사용 안 함) */
.paper-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body { font-family: var(--sans); color: var(--ink); font-size: 16px; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 520px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px calc(var(--dock) + 34px + env(safe-area-inset-bottom)); }
.head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.head h1 { font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.head .sub { font-size: 13px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12.5px; font-weight: 800; color: var(--navy); background: var(--paper); border-radius: 999px; }

.card { margin-top: 12px; padding: 18px; background: #F6F3EE; border-radius: 22px; }
.card + .card { margin-top: 10px; }
.k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--navy); }
.k small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.t { margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.45; letter-spacing: -.02em; }
.muted { color: var(--muted); }
.sec-t { margin: 26px 4px 0; font-size: 15px; font-weight: 800; }
.sec-t small { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* 버튼 3종: 채움(남색) / 보조(연남색) / 글자 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 18px; font-size: 15.5px; font-weight: 800; border: 0; border-radius: 14px; text-decoration: none; }
.btn.pri { color: #fff; background: var(--navy); }
.btn.sec { color: var(--navy); background: var(--navy-l); }
.btn.txt { min-height: 40px; padding: 0 8px; color: var(--muted); background: none; font-weight: 700; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: 13.5px; border-radius: 11px; }

textarea.write, input.write { width: 100%; padding: 12px 14px; font-size: 15.5px; line-height: 1.7; background: var(--bg); border: 0; border-radius: 14px; resize: vertical; }
textarea.write { min-height: 110px; }
textarea.write::placeholder, input.write::placeholder { color: #A79F92; }

/* 마음 날씨 */
.weather { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.weather button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg); border: 0; border-radius: 14px; }
.weather button svg { width: 30px; height: 30px; }
.weather button[aria-pressed="true"] { color: var(--navy-d); background: var(--navy-l); box-shadow: inset 0 0 0 2px var(--navy); }
.wsay { margin-top: 10px; min-height: 1.6em; font-size: 14px; text-align: center; color: var(--muted); }
.wi { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; }

/* 친구 얼굴 */
.av { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; font-size: 15px; font-weight: 800; color: var(--ink); border-radius: 50%; }
.av.sm { width: 30px; height: 30px; font-size: 12.5px; }
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.row b { font-weight: 800; }
.row small { display: block; font-size: 12.5px; color: var(--muted); }

/* 친구 답 */
.ans { padding: 14px 0; border-top: 1px dashed var(--line); }
.ans:first-of-type { border-top: 0; }
.ans p { margin-top: 8px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; }
.blur { filter: blur(5px); user-select: none; pointer-events: none; }
.amen { margin-top: 8px; min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 800; color: var(--navy); background: var(--navy-l); border: 0; border-radius: 999px; }
.amen[aria-pressed="true"] { color: #fff; background: var(--navy); }

/* 잠금 */
.lock { margin-top: 12px; padding: 16px; text-align: center; background: var(--bg); border-radius: 16px; }
.lock b { display: block; font-size: 15px; font-weight: 800; }
.lock p { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.lock .btn { margin-top: 12px; }

/* 아래 탭 */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(255, 255, 255, .97); box-shadow: 0 -1px 0 #ECE8E1; padding-bottom: env(safe-area-inset-bottom); }
.dock nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 520px; height: var(--dock); margin: 0 auto; }
.dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: #A7A9B8; text-decoration: none; }
.dock a svg { width: 24px; height: 24px; }
.dock a[aria-current="page"] { color: var(--navy); }

.toast { position: fixed; left: 50%; bottom: calc(var(--dock) + 18px + env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; font-size: 14px; font-weight: 700; color: #fff; background: var(--ink); border-radius: 999px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.on { opacity: 1; }

/* 포린 */
.porin { position: relative; display: inline-grid; place-items: center; vertical-align: middle; }
.porin > * { grid-area: 1 / 1; }
.porin .pbody { height: auto; user-select: none; -webkit-user-drag: none; animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
.porin .glow { width: 115%; height: 115%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 228, 77, .55), rgba(255, 228, 77, .18) 55%, rgba(255, 228, 77, 0)); animation: glow 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes glow { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .porin .glow, .porin .pbody { animation: none; } .toast { transition: none; } }

/* 2026-11-12 9차(사용자: "우주선에서 밖을 보고 있는 포린" 컨셉, 흰 부분을 은색 우주선 내부로) */
html { min-height: 100%; background: linear-gradient(180deg, #ECEFF3 0%, #DADFE6 50%, #C9CFD9 100%) fixed, #DADFE6; }
body { min-height: 100vh; background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 211px, rgba(110, 122, 140, .35) 211px 212px, rgba(255, 255, 255, .85) 212px 213px),
              repeating-linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(110, 122, 140, .2) calc(50% - 1px) 50%, transparent 50% 100%); }
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 248, 251, .92)); border: 1px solid #D2D8E1; box-shadow: inset 0 1px 0 #fff, 0 2px 6px -3px rgba(50, 62, 84, .25); }
.dock { background: linear-gradient(180deg, #F6F7F9, #DDE2E9); box-shadow: 0 -1px 0 #C3CAD4, inset 0 1px 0 #fff; }
.dock a { color: #8A93A3; }
/* 창틀(현창): .port 안에 우주 창 */
.port { position: relative; padding: 10px; border-radius: 38px;
  background: radial-gradient(circle at 19px 19px, #7F8898 2.6px, #EEF1F5 3.4px, transparent 4.2px),
              radial-gradient(circle at calc(100% - 19px) 19px, #7F8898 2.6px, #EEF1F5 3.4px, transparent 4.2px),
              radial-gradient(circle at 19px calc(100% - 19px), #7F8898 2.6px, #EEF1F5 3.4px, transparent 4.2px),
              radial-gradient(circle at calc(100% - 19px) calc(100% - 19px), #7F8898 2.6px, #EEF1F5 3.4px, transparent 4.2px),
              linear-gradient(145deg, #FBFCFD 0%, #C9CFD8 38%, #EEF0F4 62%, #B4BCC8 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90, 100, 118, .25), 0 10px 22px -12px rgba(30, 40, 60, .45); }
.port > .space, .port > .win { position: relative; overflow: hidden; border-radius: 28px; box-shadow: inset 0 0 0 2px rgba(20, 26, 50, .55), inset 0 10px 24px rgba(0, 0, 0, .45); }
.port > .space::after, .port > .win::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, transparent 0 58%, rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, .02) 70%, transparent 72%),
              linear-gradient(118deg, transparent 0 74%, rgba(255, 255, 255, .05) 75%, transparent 79%); }
.leds { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: 1px; }
.leds i { width: 6px; height: 6px; border-radius: 50%; background: #9BE2B4; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 6px rgba(80, 220, 140, .7); }
.leds i:nth-child(2) { background: #FFE07A; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 6px rgba(255, 210, 60, .7); }
.leds i:nth-child(3) { background: #8FB3FF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 6px rgba(110, 150, 255, .7); }
/* ===== 2026-11-12 우주선 내부 다른 버전(사용자: "우주선 다른 버전도 보자"). html[data-ship] = a 은색(기본) / b 하얀 정거장 / c 레트로 / d 조종석 ===== */
/* B 하얀 우주정거장(2026-11-13 3차, 사용자: A4 용지 같음 → 진주빛 + 깊이): 은은한 진주색 벽, 양옆 하늘색 조명 기둥, 둥근 패널 홈 */
html[data-ship="b"] { background: radial-gradient(140% 70% at 50% 0%, #FFFFFF 0%, #F1F4F9 45%, #E2E8F1 100%) fixed, #EEF2F8; }
html[data-ship="b"] body::before { background:
  linear-gradient(90deg, rgba(120, 190, 255, .55) 0 3px, rgba(120, 190, 255, .18) 3px 14px, transparent 14px calc(100% - 14px), rgba(120, 190, 255, .18) calc(100% - 14px) calc(100% - 3px), rgba(120, 190, 255, .55) calc(100% - 3px)),
  repeating-linear-gradient(180deg, transparent 0 190px, rgba(160, 180, 210, .3) 190px 191px, rgba(255, 255, 255, .95) 191px 193px, transparent 193px 210px),
  radial-gradient(60% 40% at 20% 30%, rgba(180, 210, 255, .18), transparent 70%), radial-gradient(60% 40% at 85% 75%, rgba(200, 180, 255, .14), transparent 70%); }
html[data-ship="b"] .card { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(248, 250, 253, .95)); border: 1px solid #E1E8F2; border-radius: 24px; box-shadow: 0 1px 0 #fff inset, 0 12px 28px -18px rgba(60, 100, 160, .5); }
html[data-ship="b"] .dock { background: rgba(255, 255, 255, .92); box-shadow: 0 -1px 0 #E1E8F2, 0 -8px 24px -16px rgba(60, 100, 160, .4); }
html[data-ship="b"] .dock a[aria-current="page"] { color: #2F7FD8; }
html[data-ship="b"] .port { padding: 10px; border-radius: 150px 150px 34px 34px; background: linear-gradient(180deg, #FFFFFF, #E8EEF6); box-shadow: inset 0 0 0 1px #DCE5F0, 0 0 0 4px rgba(120, 190, 255, .22), 0 0 30px -4px rgba(120, 190, 255, .45), 0 18px 34px -18px rgba(60, 100, 160, .6); }
html[data-ship="b"] .port::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 56px; height: 4px; margin-left: -28px; border-radius: 4px; background: #7FC4FF; box-shadow: 0 0 10px rgba(110, 190, 255, .95); }
html[data-ship="b"] .port > .space, html[data-ship="b"] .port > .win { border-radius: 140px 140px 26px 26px; }
html[data-ship="b"] .home .stage { padding-top: 48px; }
html[data-ship="b"] .hero-port { border-radius: 38px; } html[data-ship="b"] .hero-port > .win { border-radius: 28px; }
html[data-ship="b"] .leds i { background: #7FC4FF; box-shadow: 0 0 6px rgba(120, 190, 255, .9); }

/* C 레트로 우주선(2026-11-13 3차, 사용자: 밤티 → 다시): 60년대 우주 시대 느낌을 차분하게. 세이지 민트 벽 + 크림 패널 + 크롬 테두리, 줄무늬·딱딱한 그림자 없음 */
html[data-ship="c"] { background: linear-gradient(180deg, #DCEBE4 0%, #CFE2D9 55%, #C2D8CE 100%) fixed, #D3E4DC; }
html[data-ship="c"] body::before { background:
  repeating-linear-gradient(180deg, transparent 0 158px, rgba(70, 110, 95, .18) 158px 159px, rgba(255, 255, 255, .55) 159px 160px),
  radial-gradient(circle at 12px 12px, rgba(70, 110, 95, .22) 1.6px, transparent 2.2px) 0 0 / 160px 160px; }
html[data-ship="c"] .card { background: #FBF8F1; border: 1px solid #E3DDCC; border-radius: 26px; box-shadow: 0 10px 24px -18px rgba(40, 70, 60, .55); }
html[data-ship="c"] .dock { background: #F7F3EA; box-shadow: 0 -1px 0 #DCD5C3; }
html[data-ship="c"] .dock a { color: #8C9A92; } html[data-ship="c"] .dock a[aria-current="page"] { color: #2E6E5E; }
html[data-ship="c"] .port { padding: 11px; border-radius: 46px; background: linear-gradient(145deg, #FFFFFF 0%, #D9DEE2 30%, #F6F7F8 55%, #B9C1C8 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 5px #FBF8F1, 0 0 0 6px #E3DDCC, 0 16px 30px -18px rgba(40, 70, 60, .6); }
html[data-ship="c"] .port::before { content: none; }
html[data-ship="c"] .port > .space, html[data-ship="c"] .port > .win { border-radius: 36px; }
html[data-ship="c"] .home .panel { background: #FBF8F1; border: 1px solid #E3DDCC; box-shadow: 0 10px 24px -18px rgba(40, 70, 60, .55); }
html[data-ship="c"] .home .days p b, html[data-ship="c"] .home .bar .brand { color: #2E6E5E; }
html[data-ship="c"] .leds i { background: #F2C36B; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
html[data-ship="c"] .leds i:nth-child(2) { background: #7FC3AE; } html[data-ship="c"] .leds i:nth-child(3) { background: #E99A84; }
html[data-ship="c"] .btn.pri { background: linear-gradient(180deg, #357D6B, #2E6E5E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px -6px rgba(46, 110, 94, .8); }
html[data-ship="c"] .sec-t::before { background: #2E6E5E; box-shadow: 0 0 0 3px rgba(46, 110, 94, .18); }

/* E 오렌지 우주선(2026-11-13 사용자 요청): 따뜻한 주황 벽 + 크림색 도자기 창틀, 남색 포인트 */
html[data-ship="e"] { background: linear-gradient(180deg, #F2711F 0%, #EC6516 100%) fixed, #EF6B1A; }
html[data-ship="e"] body::before { background:
  repeating-linear-gradient(180deg, transparent 0 170px, rgba(120, 40, 0, .3) 170px 171px, rgba(255, 190, 140, .45) 171px 172px),
  radial-gradient(circle at 14px 14px, rgba(150, 60, 10, .28) 1.8px, transparent 2.4px) 0 0 / 170px 170px,
  radial-gradient(70% 40% at 50% 0%, rgba(255, 200, 150, .18), transparent 70%); }
html[data-ship="e"] .card { background: #FFF8F0; border: 1px solid #FFD7B0; border-radius: 22px; box-shadow: 0 12px 26px -18px rgba(150, 60, 10, .7); }
html[data-ship="e"] .dock { background: #FFF6EC; box-shadow: 0 -1px 0 #FFD2A8; }
html[data-ship="e"] .dock a { color: #C08A62; } html[data-ship="e"] .dock a[aria-current="page"] { color: #D2571A; }
html[data-ship="e"] .port { padding: 11px; border-radius: 40px; background: linear-gradient(160deg, #FFFDF8 0%, #F6E9DA 55%, #EBD6BF 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(150, 90, 40, .2), 0 16px 30px -16px rgba(140, 50, 0, .65); }
html[data-ship="e"] .port > .space, html[data-ship="e"] .port > .win { border-radius: 30px; }
html[data-ship="e"] .home .panel { background: #FFF8F0; border: 1px solid #FFD7B0; }
html[data-ship="e"] .head h1, html[data-ship="e"] .sec-t, html[data-ship="e"] .home .days p { color: #2A1206; }
html[data-ship="e"] .home .days small, html[data-ship="e"] .head .sub, html[data-ship="e"] .sec-t small { color: #5A2608 !important; }
html[data-ship="e"] .home .days p b, html[data-ship="e"] .home .bar .brand { color: #2B3F86; }
html[data-ship="e"] .sec-t::before { background: #2B3F86; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
html[data-ship="e"] .leds i { background: #FFF1C2; box-shadow: 0 0 6px rgba(255, 255, 255, .9); }
html[data-ship="e"] .pill { color: #7A3E14 !important; background: rgba(255, 255, 255, .55) !important; }
/* D 조종석: 어두운 그래파이트 패널 + 은은한 파란 테두리 불빛 */
html[data-ship="d"] { background: linear-gradient(180deg, #2C313B 0%, #23272F 100%) fixed, #262A33; color-scheme: dark; }
html[data-ship="d"] body::before { background: repeating-linear-gradient(180deg, transparent 0 139px, rgba(0, 0, 0, .35) 139px 140px, rgba(255, 255, 255, .05) 140px 141px),
  radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 16px 16px; }
html[data-ship="d"] .head h1, html[data-ship="d"] .sec-t, html[data-ship="d"] .home .days p, html[data-ship="d"] .home .days small b { color: #EEF2F8; }
html[data-ship="d"] .head .sub, html[data-ship="d"] .home .days small, html[data-ship="d"] .sec-t small { color: #9AA4B5 !important; }
html[data-ship="d"] .home .days p b { color: #FFE14D; }
html[data-ship="d"] .home .bar .brand { color: #9DB8FF; } html[data-ship="d"] .home .bar a { color: #EEF2F8; }
html[data-ship="d"] .pill { color: #FFE14D !important; background: rgba(255, 255, 255, .08) !important; }
html[data-ship="d"] .card { background: #F4F5F8; border: 1px solid #3B4250; box-shadow: 0 0 0 1px rgba(120, 160, 255, .12), 0 8px 18px -10px rgba(0, 0, 0, .6); }
html[data-ship="d"] .dock { background: #1C2027; box-shadow: 0 -1px 0 #3B4250; }
html[data-ship="d"] .dock a { color: #7E8899; } html[data-ship="d"] .dock a[aria-current="page"] { color: #FFE14D; }
html[data-ship="d"] .port { padding: 9px; border-radius: 34px; background: linear-gradient(145deg, #4A5160, #2B3039 50%, #3D4350); box-shadow: 0 0 0 1px #59627A, 0 0 18px rgba(110, 150, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-ship="d"] .home .panel { background: #F4F5F8; border-color: #3B4250; }
/* ===== 2026-11-12 전체 다듬기(사용자: 디자인 싹 수정) ===== */
.head h1 { font-size: 23px; font-weight: 900; letter-spacing: -.035em; }
.sec-t { display: flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.sec-t::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 3px rgba(43, 63, 134, .15); }
.card { border-radius: 22px; }
.k { font-size: 12.5px; letter-spacing: -.01em; }
.btn.pri { background: linear-gradient(180deg, #34499A, #2B3F86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px -6px rgba(31, 46, 102, .8); }
.btn.sec { color: var(--navy-d); background: linear-gradient(180deg, #F7F9FC, #E6EBF3); border: 1px solid #D5DCE6; box-shadow: inset 0 1px 0 #fff; }
textarea.write, input.write { background: #F3F5F8; border: 1px solid #E1E6ED; }
textarea.write:focus, input.write:focus { outline: none; border-color: var(--navy); background: #fff; }
.amen { border: 1px solid #D5DCE6; }
.dock a { font-weight: 800; }
html[data-ship="c"] .sec-t::before { background: #D9622B; box-shadow: 0 0 0 3px rgba(217, 98, 43, .2); }
html[data-ship="b"] .sec-t::before { background: #4A90D9; box-shadow: 0 0 0 3px rgba(74, 144, 217, .2); }
html[data-ship="d"] .sec-t::before { background: #FFE14D; box-shadow: 0 0 6px rgba(255, 225, 77, .6); }
/* ===== 2026-11-13 사용자: '우주선답게' → 모든 버전 공통 선체 장식(양옆 표시등 레일, 카드 볼트, 아래 환기구) ===== */
:root { --rail: #C3CAD4; --rail-light: #8FB3FF; --bolt: #AEB6C2; }
html[data-ship="b"] { --rail: #DCE6F2; --rail-light: #7FC4FF; --bolt: #C9D6E6; }
html[data-ship="c"] { --rail: #E9E3D3; --rail-light: #7FC3AE; --bolt: #C6CFC9; }
html[data-ship="d"] { --rail: #3A404C; --rail-light: #6F8BD8; --bolt: #59627A; }
html[data-ship="e"] { --rail: #F9A465; --rail-light: #FFF1C2; --bolt: #E8A06A; }
.hull { position: fixed; inset: 0 0 calc(var(--dock) + env(safe-area-inset-bottom)) 0; z-index: -1; pointer-events: none; }
.hull .rail { position: absolute; top: 70px; bottom: 30px; width: 7px; border-radius: 4px; background: var(--rail); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 1px rgba(255, 255, 255, .25); }
.hull .rail.l { left: 4px; } .hull .rail.r { right: 4px; }
.hull .rail i { position: absolute; left: 1.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--rail-light); box-shadow: 0 0 6px var(--rail-light); animation: blinkr 3.6s ease-in-out infinite; }
@keyframes blinkr { 50% { opacity: .25; } }
.hull .vent { position: absolute; right: 16px; bottom: 10px; width: 54px; height: 16px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--rail) 0 3px, rgba(0, 0, 0, .14) 3px 6px); opacity: .7; }
.hull .vent.l { right: auto; left: 16px; }
@media (prefers-reduced-motion: reduce) { .hull .rail i { animation: none; } }
.card { position: relative; }
.card::after { content: ""; position: absolute; inset: 7px; pointer-events: none; border-radius: inherit; background:
  radial-gradient(circle at 0 0, var(--bolt) 1.6px, transparent 2.2px) left top / 6px 6px no-repeat,
  radial-gradient(circle at 100% 0, var(--bolt) 1.6px, transparent 2.2px) right top / 6px 6px no-repeat,
  radial-gradient(circle at 0 100%, var(--bolt) 1.6px, transparent 2.2px) left bottom / 6px 6px no-repeat,
  radial-gradient(circle at 100% 100%, var(--bolt) 1.6px, transparent 2.2px) right bottom / 6px 6px no-repeat; }
.card.ghead::after, .card.subx::after, .card.fsky::after { opacity: .5; }