@font-face{font-family:Galmuri;src:url('/fonts/Galmuri11.woff2');font-display:swap}
*{box-sizing:border-box}
html{--paper:#efe6d2;--ink:#292820;--muted:#605949;--line:#b4a88e;--card:#f8f2e3;--bars:linear-gradient(90deg,#eee9db 14.28%,#ead94b 14.28% 28.56%,#57c8cc 28.56% 42.84%,#68ad69 42.84% 57.12%,#c580b8 57.12% 71.4%,#d76553 71.4% 85.7%,#718ccd 85.7%)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 system-ui,sans-serif;background-image:radial-gradient(#8c795d18 .7px,transparent .7px);background-size:5px 5px}
a{color:inherit;text-underline-offset:5px}
button,.button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #247d8c;outline-offset:5px}
[hidden]{display:none!important}
h1,h2,h3,.eyebrow,.badge,.brandname,.channels,.station,.signal,.number,.button,#whack{font-family:Galmuri,monospace;font-weight:400}
h1,h2,h3{line-height:1.55;margin:0}
main,.mast,footer{max-width:1160px;margin:auto;padding:0 32px;min-width:0}
main{overflow-wrap:anywhere}
.mast{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px}
.logo{background:none;border:0;padding:0;width:72px;position:relative;flex-shrink:0}
.logo svg{display:block;width:100%}
.brandname{text-decoration:none;font-size:18px}
.brandname span{display:block;font:11px system-ui;letter-spacing:2px;margin-top:3px;color:var(--muted)}
#lights{background:transparent;border:1px solid var(--line);border-radius:4px;padding:8px 12px;font-size:12px}
.skip{position:fixed;top:-100px;z-index:5;background:var(--card);padding:10px}
.skip:focus{top:0}
.hero{display:grid;grid-template-columns:.8fr 1.6fr;gap:40px;align-items:center;padding:90px 0 46px}
.eyebrow{font-size:12px;letter-spacing:1px;color:var(--muted)}
.intro h1{font-size:46px;line-height:1.35;margin:20px 0}
.intro em{font-style:normal;color:#94502d}
.intro p{font-size:14px;color:var(--muted);line-height:1.9}
.textlink{display:inline-block;margin-top:12px;font-size:13px}
.tvstage{position:relative;padding-top:24px;min-width:0}
.antenna{position:absolute;width:140px;height:65px;left:50%;top:-40px;transform:translateX(-50%)}
.antenna:before,.antenna:after{content:'';position:absolute;bottom:0;left:70px;width:4px;height:80px;background:linear-gradient(90deg,#4a4840,#b7b4a2,#54524a);transform-origin:bottom;transform:rotate(-48deg);border-radius:4px}
.antenna:after{transform:rotate(41deg)}
.television{position:relative;background:repeating-linear-gradient(2deg,#ffffff03 0 2px,#00000003 2px 5px),linear-gradient(120deg,#845b36,#5b3a22 65%,#3e291d);border:3px solid #3b291d;border-radius:32px 34px 24px 24px;padding:23px 21px 35px;display:grid;grid-template-columns:minmax(0,1fr) 65px;gap:18px;box-shadow:inset 3px 4px 0 #b08a62,inset -6px -8px 0 #0003,10px 14px 0 #402b1c,16px 27px 22px #39271530}
.bezel{padding:13px;background:linear-gradient(140deg,#b5aa91,#7c715d);border-radius:25px;box-shadow:inset 2px 2px 4px #0008}
.screen{position:relative;isolation:isolate;min-height:300px;border:9px solid #15171a;border-radius:24% / 11%;background:radial-gradient(ellipse at 45% 40%,#354944,#172622 80%);color:#f7efd8;box-shadow:inset 0 0 30px #000,0 0 0 2px #363936;display:flex;align-items:center;overflow:hidden}
.screen:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,#fff2,transparent 36%),repeating-linear-gradient(0deg,transparent 0 3px,#0002 3px 4px);box-shadow:inset 0 0 22px #0009}
.screencontent{padding:22px;width:100%;position:relative;z-index:1}
.screen h2{font-size:30px;line-height:1.5;margin:20px 0 14px}
.screen p{font-size:12px;line-height:1.8}
.station{font-size:10px;color:#cfddab}
.signal{font-size:10px;display:block;margin-top:22px;color:#d1d7c2}
.untuned .screencontent{transform:rotate(-2deg);text-shadow:2px 0 #cf73916b,-2px 0 #76dace70}
.untuned{background:repeating-linear-gradient(176deg,#b1b7a411 0 1px,transparent 1px 4px),#25352f}
.untuned:before{content:'';position:absolute;top:71%;width:100%;height:8px;background:#d2e0c31a;transform:skewY(-3deg)}
.hardware{display:flex;align-items:center;flex-direction:column;gap:22px;padding-top:10px}
.dial{width:53px;height:53px;border:5px solid #302d25;border-radius:50%;background:repeating-conic-gradient(#938975 0 8deg,#6d6454 8deg 16deg);box-shadow:2px 3px 3px #0008;position:relative}
.dial:after{content:'';position:absolute;inset:15px -1px;background:#c4b797;border:2px solid #514936;transform:rotate(-35deg)}
.second{transform:rotate(65deg)}
.speaker{width:52px;flex:1;min-height:96px;background:radial-gradient(#221f1a 1.7px,transparent 2px);background-size:7px 7px}
.power{color:#e5d2a8;font-size:7px}
.tvlabel{position:absolute;left:35px;right:27px;bottom:9px;color:#ddc8a4;font:10px Galmuri;display:flex;justify-content:space-between}
.tvlabel span{font-size:8px}
.under-tv{margin:40px 0 0;display:flex;align-items:center;gap:16px}
#whack,.button{border:2px solid #2c2921;border-radius:5px;padding:12px 23px;background:#e8c64f;box-shadow:3px 4px 0 #4c3c29;color:#25231b;font-size:16px;text-decoration:none;display:inline-block}
#hint{font-size:11px;color:var(--muted);max-width:190px}
.pop{display:none;position:absolute;right:0;top:-30px;background:#f6d757;color:#231e16;border:2px solid #231e16;padding:7px 14px;border-radius:50%;font:24px Galmuri;z-index:3;transform:rotate(12deg)}
.hit{animation:whack .4s ease-out}
.hit .pop{display:block}
@keyframes whack{0%,100%{transform:translateX(0) rotate(0)}
20%{transform:translateX(-7px) rotate(-1.5deg)}
45%{transform:translateX(5px) rotate(1deg)}
70%{transform:translateX(-2px)}
}
.channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:25px 0 50px}
.channels a{border:1px solid #9c9078;border-bottom:5px solid #96866b;background:linear-gradient(#faf3e2,#daceb4);color:#332e25;border-radius:6px;display:flex;align-items:center;gap:10px;text-decoration:none;padding:15px 13px;font-size:12px}
.channels b{font-size:13px;font-weight:400;white-space:nowrap}
.channels i{font:10px system-ui;margin-left:auto;color:#38695b}
.sectiontitle{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.sectiontitle h2{font-size:25px;margin-top:5px}
.sectiontitle>span{font-size:11px;color:var(--muted)}
.live{color:#b14732}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{position:relative;padding:22px 21px 24px;background:var(--card);border:1px solid var(--line);border-radius:3px;display:flex;flex-direction:column;min-height:260px}
.card:before{content:'';height:4px;position:absolute;top:0;left:0;right:0;background:var(--bars)}
.cardtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.badge{font-size:10px;background:#e2ddc9;color:#393d31;padding:4px 7px;border:1px solid #b9b59e}
.ch1{background:#e8d5e4}
.ch2{background:#d2e5e4}
.ch3{background:#e5e1ba}
.ch4{background:#d6dfef}
.number{color:var(--muted);font-size:12px}
.card h3{font-size:18px;margin:19px 0 10px}
.card h3 a{text-decoration:none}
.card h3 a:after{content:'';position:absolute;inset:0}
.card:hover{border-color:#685c45}
.card p{font-size:13px;color:var(--muted);margin:0 0 20px}
.read{font-size:11px;margin-top:auto;color:var(--muted)}
footer{margin-top:70px;padding-top:25px;padding-bottom:30px;border-top:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:24px;font-size:12px;color:var(--muted)}
footer nav{display:flex;gap:18px}
footer small{margin-left:auto;font:9px monospace;letter-spacing:1px}
.paper{max-width:820px;margin:45px auto;background:var(--card);border:1px solid var(--line);padding:45px 55px}
.paper h1{font-size:30px;margin:18px 0}
.back{font-size:12px;color:var(--muted);display:inline-block;margin-bottom:20px}
.dek{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:25px}
.prose{font-size:17px;line-height:1.95}
.prose h2{font-family:system-ui;font-weight:700;font-size:24px;line-height:1.5;margin:40px 0 16px}
.prose h3{font-family:system-ui;font-weight:700;font-size:20px;margin-top:30px}
.prose a{color:#28694e}
.prose pre{background:#12291f;color:#dbf7d4;padding:22px;border:1px solid #486d4b;border-radius:5px;font-size:14px;line-height:1.8}
.prose pre span[class^=k],.prose pre .ow{color:#f0dd5e}
.prose pre span[class^=s]{color:#f4b09a}
.prose pre span[class^=c]{color:#8fb39a}
.prose pre span[class^=m]{color:#e2acd8}
.prose pre .nf,.prose pre .fm,.prose pre .nc,.prose pre .nd{color:#7fdde1}
.prose pre .nb,.prose pre .bp{color:#a9c6f2}
.prose pre .nv,.prose pre .vm{color:#a8dda0}
.prose :not(pre)>code{background:#dfdfce;color:#284930;padding:2px 4px}
.table-scroll{overflow:auto;margin:20px 0}
.prose td,.prose th{border:1px solid var(--line);padding:10px;text-align:left}
.prose th{background:#dfdbc8}
.prose table{border-collapse:collapse;font-size:14px}
.lost{max-width:850px;margin:65px auto;text-align:center}
.no-signal{padding:40px 20px;background:var(--bars);border:18px solid #252924;border-radius:45px / 25px;box-shadow:0 0 0 12px #70503a}
.no-signal>div{background:#15171af2;color:#f7efdc;margin:30px auto;padding:30px 12px;max-width:550px}
.no-signal h1{font-size:42px}
.lost>p{margin-top:35px;color:var(--muted)}
.dark{--paper:#181c1b;--ink:#e9e0c9;--muted:#b6b09e;--line:#51554b;--card:#252b26;color-scheme:dark}
.dark .intro em{color:#e4ad78}
.dark .prose a{color:#9fdbbb}
.dark .prose th{background:#394437}
.dark .prose :not(pre)>code{background:#394437;color:#d5eccb}
@media(max-width:900px){.hero{gap:25px;grid-template-columns:.75fr 1.3fr}
.intro h1{font-size:36px}
.television{padding:16px 14px 32px;gap:10px;grid-template-columns:minmax(0,1fr) 45px}
.dial{width:40px;height:40px}
.dial:after{inset:10px -1px}
.speaker{width:38px}
.screencontent{padding:14px}
.screen h2{font-size:23px}
.channels a{flex-wrap:wrap;gap:3px}
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){main,.mast,footer{padding-left:20px;padding-right:20px}
.mast{padding-top:15px;padding-bottom:15px}
.brand{gap:8px}
.logo{width:54px}
.brandname{font-size:13px}
.brandname span{font-size:9px;letter-spacing:1px}
#lights{font-size:10px;padding:7px}
.hero{display:flex;flex-direction:column;align-items:stretch;padding:30px 0 15px;gap:70px}
.intro h1{font-size:34px;margin:14px 0}
.intro h1 br:first-child{display:none}
.intro p{display:inline;font-size:12px}
.intro p+p{display:block;margin:8px 0}
.intro p br{display:none}
.textlink{margin-top:4px;font-size:12px}
.tvstage{padding-top:10px;margin-right:8px}
.antenna{top:-54px}
.television{border-radius:24px;padding:14px 12px 30px;gap:9px;grid-template-columns:minmax(0,1fr) 42px;box-shadow:inset 2px 3px 0 #b08a62,inset -4px -6px 0 #0003,7px 9px 0 #402b1c,10px 18px 15px #39271530}
.bezel{padding:8px;border-radius:18px}
.screen{min-height:260px;border-width:6px}
.screen h2{font-size:24px}
.screen p{font-size:11px}
.screencontent{padding:13px}
.station,.signal{font-size:9px}
.hardware{gap:18px}
.speaker{min-height:70px}
.tvlabel{font-size:8px;left:25px;right:16px}
.tvlabel span{font-size:7px}
.under-tv{margin-top:33px;gap:14px}
#whack{padding:10px 17px;white-space:nowrap;font-size:14px}
#hint{font-size:10px}
.channels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:25px 0 34px}
.channels a{padding:12px 10px;gap:9px}
.channels span{font-size:10px}
.sectiontitle{gap:6px}
.sectiontitle h2{font-size:21px}
.sectiontitle>span{font-size:10px}
.eyebrow{font-size:10px}
.cards{grid-template-columns:1fr;gap:15px}
.card{min-height:230px;padding:21px}
.card h3{font-size:19px}
.paper{margin:25px -8px;padding:25px 20px}
.paper h1{font-size:25px}
.prose{font-size:16px}
.prose h2{font-size:22px}
.prose pre{padding:15px;font-size:12px}
.lost{margin:45px 8px}
.no-signal{padding:20px 10px;border-width:10px;border-radius:30px}
.no-signal h1{font-size:29px}
.no-signal p{font-size:15px}
.no-signal .button{font-size:12px;padding:10px}
footer{gap:15px;margin-top:45px}
footer nav{gap:13px;font-size:11px}
footer small{width:100%;margin:0}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.untuned .screencontent{transform:none}
}


/* 머리글: 좁은 화면에서 긴 소개 한 줄과 버튼을 지킨다 */
.brandname span{letter-spacing:.5px}
@media (max-width:560px){
  header .brandname span{letter-spacing:0;font-size:10px;line-height:1.35}
  .mastnav a,#lights{white-space:nowrap}
  #lights{font-size:0;padding:6px 9px}
  #lights::after{content:"◐";font-size:14px}
}