/* Layout: 단일 컬럼 아카이브. 상단 프로필 → 섹션별 그리드(필름 2열, 쇼츠 9:16 4열, 교육 3열) → 클릭 시 플레이어 */
:root{
  --bg:#F5F6F7; --surface:#FFFFFF; --ink:#15171C; --muted:#6A707A; --line:#E1E4E8;
  --accent:#2340E8; --rec:#E5372B; --frame:#E9EBEE; --overlay:rgba(14,16,20,.72);
  --sans:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111215; --surface:#1A1C20; --ink:#ECEDEF; --muted:#9AA0AA; --line:#2A2D33;
  --accent:#8193FF; --rec:#FF5A4E; --frame:#202328; --overlay:rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111215; --surface:#1A1C20; --ink:#ECEDEF; --muted:#9AA0AA; --line:#2A2D33;
  --accent:#8193FF; --rec:#FF5A4E; --frame:#202328; --overlay:rgba(0,0,0,.8); color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* header */
header.top{padding-block:64px 40px;border-bottom:1px solid var(--line)}
.top-grid{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rec{width:8px;height:8px;border-radius:50%;background:var(--rec);display:inline-block}
h1.name{font-size:clamp(40px,7vw,76px);line-height:1.05;font-weight:600;letter-spacing:-.03em;margin:14px 0 10px;text-wrap:balance}
.role{font-size:17px;color:var(--ink);margin:0;font-weight:500}
.intro{max-width:62ch;color:var(--muted);margin:14px 0 0;white-space:pre-line}
.contact{display:grid;gap:6px;justify-items:end;font-size:14px;min-width:0}
.contact .row{display:flex;gap:10px;align-items:center;min-width:0}
.contact .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact .v{overflow-wrap:anywhere;user-select:all}
.copy{border:1px solid var(--line);background:var(--surface);border-radius:4px;font-size:12px;padding:2px 8px;cursor:pointer}
.jump{display:flex;flex-wrap:wrap;gap:8px;padding-block:20px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.jump a{text-decoration:none;font-size:14px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);display:flex;gap:8px;align-items:center}
.jump a:hover{border-color:var(--ink)}
.jump .c{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* sections */
section.cat{padding-block:56px 8px;scroll-margin-top:80px}
.cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.cat-head h2{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:0}
.cat-head .c{font-family:var(--mono);color:var(--muted);font-size:14px}
.cat-head .sub{color:var(--muted);font-size:14px;flex-basis:100%;margin:0}
.grid{display:grid;gap:28px 20px}
.g-films{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-edu{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-shorts{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g-edu{grid-template-columns:repeat(2,minmax(0,1fr))}.g-shorts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.g-films,.g-edu{grid-template-columns:minmax(0,1fr)}.g-shorts{grid-template-columns:repeat(2,minmax(0,1fr))}.top-grid{grid-template-columns:minmax(0,1fr)}.contact{justify-items:start}header.top{padding-block:40px 28px}}

.card{display:block;align-self:start;text-align:left;background:none;border:0;padding:0;cursor:pointer;min-width:0;width:100%}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--frame);border-radius:6px;overflow:hidden}
.thumb.v{aspect-ratio:9/16}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.025)}
.vf{position:absolute;inset:14px;pointer-events:none}
.vf i{position:absolute;width:14px;height:14px;border-color:var(--muted);border-style:solid;opacity:.55}
.vf i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.vf i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.vf i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.vf i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
.ph{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted);font-size:14px}
.badge{position:absolute;right:10px;bottom:10px;background:rgba(10,11,14,.78);color:#fff;font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:3px;letter-spacing:.04em}
.play{position:absolute;left:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(10,11,14,.78);display:grid;place-items:center;opacity:0;transition:opacity .2s}
.card:hover .play,.card:focus-visible .play{opacity:1}
.play::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.ext{position:absolute;left:10px;top:10px;background:rgba(10,11,14,.78);color:#fff;font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:3px;letter-spacing:.08em;text-transform:uppercase}
.c-title{font-size:16px;font-weight:600;margin:12px 0 2px;letter-spacing:-.01em;overflow-wrap:anywhere}
.c-meta{font-size:13px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.c-meta .mono{font-size:12px}
.draft .thumb{opacity:.55}
.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-left:6px;vertical-align:2px}
.pill.on{border-color:var(--accent);color:var(--accent)}
.add{border:1px dashed var(--line);border-radius:6px;background:transparent;aspect-ratio:16/9;display:grid;place-items:center;color:var(--muted);cursor:pointer;font-size:14px;width:100%}
.g-shorts .add{aspect-ratio:9/16}
.add:hover{border-color:var(--accent);color:var(--accent)}
.empty{padding-block:80px;color:var(--muted);text-align:center}
footer{padding-block:72px 96px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* modal */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--ink)}
dialog::backdrop{background:var(--overlay)}
.m-inner{height:100%;overflow:auto;display:grid;place-items:center;padding-block:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.m-box{background:var(--surface);border-radius:8px;width:min(1040px,100%);overflow:hidden;position:relative}
.m-box.narrow{width:min(720px,100%)}
.m-media{background:#000;display:grid;place-items:center}
.m-media video,.m-media img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#000}
.m-media.v video,.m-media.v img{width:auto;max-width:100%;height:72vh}
.m-body{padding:24px 28px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:28px}
@media (max-width:720px){.m-body{grid-template-columns:minmax(0,1fr);padding:20px}}
.m-body h3{font-size:22px;margin:0 0 6px;letter-spacing:-.02em;text-wrap:balance}
.m-desc{color:var(--muted);white-space:pre-line;margin:10px 0 0;max-width:62ch}
dl.spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;align-content:start}
dl.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
dl.spec dd{margin:0;overflow-wrap:anywhere}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 14px;cursor:pointer;text-decoration:none;font-size:14px;font-weight:500}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.danger{color:var(--rec);border-color:var(--rec)}
.btn[disabled]{opacity:.5;cursor:default}
.m-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.x{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(10,11,14,.7);color:#fff;font-size:18px;cursor:pointer}
.nav{display:flex;gap:8px}
.nolink{padding:60px 20px;color:#bbb;text-align:center}

/* editor */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:10px;padding-block:10px;flex-wrap:wrap}
.bar .msg{font-size:13px;color:var(--muted);margin-right:auto;min-width:0}
.bar .dot{width:7px;height:7px;border-radius:50%;background:var(--rec);display:inline-block;margin-right:6px;vertical-align:1px}
.edit-in{width:100%;border:1px dashed var(--line);background:transparent;border-radius:4px;padding:4px 8px}
.edit-in:focus{border-style:solid;border-color:var(--accent);outline:0}
.eyebrow .edit-in{width:200px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:none}
h1 .edit-in{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:1.1}
form.ed{padding:24px 28px 28px;display:grid;gap:14px}
form.ed h3{margin:0;font-size:20px}
.f{display:grid;gap:4px;min-width:0}
.f label{font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.f input,.f select,.f textarea{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:8px 10px;width:100%}
.f textarea{min-height:90px;resize:vertical}
.f .hint{font-size:12px;color:var(--muted)}
.row2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:620px){.row2{grid-template-columns:minmax(0,1fr)}}
.up{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;padding:10px}
.up img{width:96px;height:54px;object-fit:cover;border-radius:4px;background:var(--frame)}
.up .s{font-size:13px;color:var(--muted);flex:1;min-width:140px}
.err{color:var(--rec);font-size:13px}
.check{display:flex;gap:8px;align-items:center;font-size:14px}
.ed-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.ed-foot .sp{margin-left:auto}
.banner{background:var(--surface);border:1px solid var(--accent);border-radius:6px;padding:12px 14px;margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* embeds, login, progress */
.m-media iframe{display:block;width:100%;aspect-ratio:16/9;max-height:72vh;border:0;background:#000}
.m-media.v iframe{width:auto;height:72vh;aspect-ratio:9/16;max-width:100%}
.login{min-height:100vh;display:grid;place-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login form{width:min(360px,100%);display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px}
.login h1{font-size:20px;margin:0}
.login input{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:10px 12px;width:100%}
.prog{height:4px;background:var(--line);border-radius:2px;overflow:hidden;flex-basis:100%}
.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.loading{padding-block:120px;text-align:center;color:var(--muted)}