:root { --ink:#12251e; --cream:#f4f1e8; --lime:#d7e96b; --orange:#ff7953; --line:rgba(18,37,30,.18); --muted:#52625c; --videos:#e4e1d7; --footer:#d7e96b; --visual:#b8d7cf; --cloud:#e9f1e6; --focus:#ff7953; color-scheme:light; }
:root[data-theme="dark"] { --ink:#eef5ee; --cream:#13211d; --lime:#c8dd58; --orange:#ff936f; --line:rgba(238,245,238,.18); --muted:#b7c4bd; --videos:#1c302a; --footer:#243b31; --visual:#315e59; --cloud:#dbe8df; --focus:#f4d96b; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans KR", sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 5.5vw; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800; letter-spacing:-1px; }
.logo-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--ink); color:var(--lime); font:500 19px/1 "DM Mono", monospace; }
nav { display:flex; gap:34px; margin-left:82px; font-size:14px; font-weight:600; }
nav a { opacity:.72; } nav a:hover { opacity:1; }
.header-actions { display:flex; align-items:center; gap:22px; }
.theme-toggle { display:inline-flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font:500 10px "DM Mono",monospace; letter-spacing:.06em; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.theme-toggle:hover { background:var(--ink); color:var(--cream); }.theme-toggle:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }.theme-toggle-icon { font-size:14px; line-height:1; }
.header-link { font:500 12px "DM Mono",monospace; letter-spacing:.04em; } .header-link span { font-size:16px; margin-left:5px; }
.hero { min-height:650px; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; padding:90px 5.5vw 70px; }
.hero-copy { position:relative; z-index:2; max-width:600px; }
.eyebrow,.section-label { margin:0; font:500 11px "DM Mono",monospace; letter-spacing:.1em; color:var(--muted); }
.eyebrow span { display:inline-block; vertical-align:middle; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--orange); }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.07em; }
h1 { margin:24px 0 25px; font-size:clamp(55px,7.2vw,108px); line-height:1.03; font-weight:800; }
em { color:var(--orange); font-style:normal; }
.intro { max-width:420px; margin-bottom:34px; color:var(--muted); font-size:16px; line-height:1.8; word-break:keep-all; }
.hero-actions { display:flex; align-items:center; gap:25px; }
.button { display:inline-flex; gap:22px; align-items:center; padding:16px 20px; font-size:14px; font-weight:700; border-radius:3px; }
.button span { font-size:19px; line-height:1; }.button-primary { background:var(--ink); color:white; }.text-link,.arrow-link { font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:4px; }.text-link span,.arrow-link span { margin-left:8px; font-size:17px; }
.hero-visual { position:absolute; right:0; top:0; width:52%; height:100%; background:var(--visual); overflow:hidden; }
.sun { position:absolute; width:280px; height:280px; border-radius:50%; top:95px; right:18%; background:var(--orange); }
.cloud { position:absolute; height:52px; border-radius:52px; background:var(--cloud); filter:drop-shadow(12px 16px 0 rgba(255,255,255,.16)); }.cloud:before,.cloud:after { content:""; position:absolute; border-radius:50%; background:inherit; }.cloud:before { width:70px;height:70px;bottom:0;left:26px; }.cloud:after { width:48px;height:48px;bottom:0;right:20px; }
.cloud-one { width:180px; top:160px; right:-32px; }.cloud-two { width:145px; top:405px; left:4%; transform:scale(.75); }.cloud-three { width:200px; bottom:-10px; right:20%; transform:scale(1.15); }
.plane { position:absolute; z-index:2; top:284px; left:32%; font-size:74px; color:var(--ink); transform:rotate(-20deg); }.route { position:absolute; width:320px; height:160px; border:2px dashed rgba(18,37,30,.6); border-bottom:none; border-radius:50% 50% 0 0; }.route-one { top:250px; left:8%; transform:rotate(-15deg); }.route-two { width:200px; height:95px; top:365px; left:47%; transform:rotate(25deg); border-color:rgba(255,255,255,.8); }.coordinate { position:absolute; bottom:44px; right:45px; font:11px "DM Mono",monospace; letter-spacing:.05em; }
.scroll-note { position:absolute; bottom:26px; left:5.5vw; font:10px "DM Mono",monospace; letter-spacing:.08em; }.scroll-note span { margin-left:8px; font-size:15px; }
.ticker { overflow:hidden; background:var(--lime); padding:14px 0; white-space:nowrap; font:500 16px "DM Mono",monospace; letter-spacing:.02em; }.ticker div { width:max-content; animation:slide 22s linear infinite; }.ticker b { padding:0 20px; color:var(--orange); } @keyframes slide { to { transform:translateX(-33.33%); } }
.section { padding:110px 5.5vw; }.about { border-bottom:1px solid var(--line); }.about-content { display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; margin-top:40px; }.about h2 { font-size:clamp(40px,4.4vw,68px); line-height:1.15; margin:0; }.about p { color:var(--muted); font-size:16px; line-height:1.9; word-break:keep-all; }.arrow-link { display:inline-block; margin-top:20px; }
.videos { background:var(--videos); }.section-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:38px; }.video-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:22px; }.thumb { position:relative; height:245px; overflow:hidden; border-radius:2px; }.featured .thumb { height:315px; }.thumb:before,.thumb:after { content:""; position:absolute; }.thumb-seoul { background:linear-gradient(145deg,#ff9b71 0 45%,#4c7c72 46% 60%,#1f4137 61%); }.thumb-seoul:before { width:120%;height:40%;bottom:-17%;left:-10%; background:#17382f; border-radius:50% 50% 0 0; }.thumb-seoul:after { width:110px;height:150px;bottom:0;left:42%; background:repeating-linear-gradient(90deg,#e7d39b 0 9px,transparent 9px 17px),#425d58; clip-path:polygon(8% 100%,22% 16%,36% 100%,51% 0,66% 100%,81% 32%,94% 100%); }.thumb-bag { background:linear-gradient(135deg,#d7e96b 0 50%,#f5d7a5 50%); }.thumb-bag:before { width:104px;height:120px;background:#ff7953;border-radius:16px 16px 25px 25px;left:calc(50% - 52px);top:72px; box-shadow:inset 0 0 0 5px rgba(18,37,30,.2); }.thumb-bag:after { width:48px;height:28px;border:7px solid var(--ink);border-bottom:0;border-radius:26px 26px 0 0;top:51px;left:calc(50% - 24px); }.thumb-map { background:#c6dfe4; }.thumb-map:before { width:200px;height:160px;left:calc(50% - 100px);top:45px;background:linear-gradient(65deg,transparent 48%,#ff7953 49% 52%,transparent 53%),linear-gradient(140deg,transparent 47%,#ff7953 48% 51%,transparent 52%),#f7f0de; clip-path:polygon(0 15%,33% 0,66% 14%,100% 0,100% 85%,66% 100%,33% 86%,0 100%); }.thumb-map:after { width:17px;height:17px;border:5px solid var(--ink);border-radius:50% 50% 50% 0;transform:rotate(-45deg);left:48%;top:102px; }.play { position:absolute; z-index:2; top:16px;left:17px;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:rgba(255,255,255,.88);color:#12251e;font-size:11px;padding-left:2px; }.thumb small { position:absolute;z-index:2;right:12px;bottom:11px;background:var(--ink);color:var(--cream);padding:3px 6px;font:10px "DM Mono",monospace; }.category { margin:17px 0 8px;color:var(--orange);font:500 10px "DM Mono",monospace;letter-spacing:.08em; }.video-card h3 { margin-bottom:8px;font-size:19px;line-height:1.45;letter-spacing:-.04em;word-break:keep-all; }.meta { margin:0;color:var(--muted);font-size:12px; }
.subscribe { padding:108px 5.5vw; background:var(--ink); color:var(--cream); text-align:center; }.subscribe .eyebrow { color:#bec8bc; }.subscribe h2 { font-size:clamp(42px,5.2vw,78px);line-height:1.13;margin:25px 0 35px; }.button-light { background:var(--lime);color:var(--ink); }
footer { padding:78px 5.5vw;display:grid;grid-template-columns:.7fr 1.3fr;gap:10vw;background:var(--footer); } .footer-brand { display:flex;min-height:320px;flex-direction:column;align-items:flex-start;justify-content:space-between; } footer p { margin:0;font-size:13px; } .footer-meta { display:flex;flex-direction:column;align-items:start;gap:12px;font:11px "DM Mono",monospace; } .footer-meta a { border-bottom:1px solid var(--ink);padding-bottom:3px;font-size:12px; }
.contact-form { display:grid;gap:17px;max-width:650px; }.contact-form-heading { margin-bottom:7px; }.contact-form-heading h2 { margin:13px 0 0;font-size:clamp(28px,3vw,42px);line-height:1.22;letter-spacing:-.06em; }.contact-form label { display:grid;gap:7px;font-size:12px;font-weight:700; }.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.contact-form input:not(.honeypot),.contact-form select,.contact-form textarea { width:100%;border:1px solid rgba(18,37,30,.35);border-radius:0;background:rgba(255,255,255,.3);color:var(--ink);padding:11px 12px;font:14px "Noto Sans KR",sans-serif;outline:none; }.contact-form textarea { resize:vertical; }.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.45); }.contact-form textarea::placeholder { color:var(--muted); }.honeypot { position:absolute;left:-9999px; }.contact-submit { justify-self:start;border:0;border-radius:3px;background:var(--ink);color:var(--cream);padding:14px 20px;font:700 13px "Noto Sans KR",sans-serif;cursor:pointer; }.contact-submit span { margin-left:18px;font-size:17px; }.contact-submit:hover { background:#294b3f; }
@media (max-width:760px) { .site-header { height:68px;padding:0 6vw; } nav { display:none; }.header-actions { gap:12px; }.theme-toggle-text { display:none; }.theme-toggle { padding:7px; }.header-link { font-size:10px; }.hero { min-height:690px;display:block;padding:65px 6vw 0; }.hero-copy { max-width:100%; }.hero-visual { top:auto;bottom:0;width:100%;height:280px; }.sun { width:170px;height:170px;top:40px;right:12%; }.plane { top:112px;left:32%;font-size:54px; }.route-one { top:100px;left:-4%;transform:scale(.65) rotate(-15deg); }.route-two { display:none; }.cloud-one { top:34px;right:-65px;transform:scale(.7); }.cloud-two { top:180px; }.cloud-three { display:none; }.coordinate { bottom:19px;right:6vw; }.scroll-note { display:none; } h1 { font-size:57px; }.intro { font-size:14px;margin-bottom:23px; }.hero-actions { gap:16px; }.button { padding:14px 16px;font-size:13px; }.section { padding:75px 6vw; }.about-content { display:block;margin-top:28px; }.about h2 { margin-bottom:25px; }.video-grid { grid-template-columns:1fr;gap:38px; }.thumb,.featured .thumb { height:245px; }.section-top { margin-bottom:28px; } .subscribe { padding:78px 6vw; } footer { padding:58px 6vw;grid-template-columns:1fr;gap:45px;align-items:start; } .footer-brand { min-height:190px; } .form-row { grid-template-columns:1fr; } }