@font-face{font-family:LocalPretendard;src:local("Pretendard"),local("Apple SD Gothic Neo")}
.cafe-page .cafe-content *{box-sizing:border-box}
html:has(> body.cafe-page){scroll-behavior:smooth}
body.cafe-page{margin:0;background:#eeece5;color:#23231f;font-family:LocalPretendard,"Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.cafe-page .cafe-content button,.cafe-page .cafe-content a,.cafe-page .cafe-content input{-webkit-tap-highlight-color:transparent}
.cafe-page .cafe-content button{font:inherit}
.cafe-page .cafe-content button,.cafe-page .cafe-content a{touch-action:manipulation}
.cafe-page .cafe-content button{cursor:pointer}
.cafe-page .cafe-content a{color:inherit;text-decoration:none}
.cafe-page .cafe-content a:hover{text-decoration:underline;text-underline-offset:5px}
.cafe-page .cafe-content button:focus-visible,.cafe-page .cafe-content a:focus-visible,.cafe-page .cafe-content input:focus-visible{outline:2px solid #8c6240;outline-offset:5px}
.cafe-page .cafe-content button:disabled{opacity:.3;cursor:default}
.cafe-page .cafe-content [hidden]{display:none!important}
.cafe-page .cafe-content .masthead,.cafe-page .cafe-content main,.cafe-page .cafe-content footer{width:min(1480px,calc(100% - 96px));margin-inline:auto}
.cafe-page .cafe-content .masthead{height:100px;display:flex;align-items:center;border-bottom:1px solid #24251e28;gap:34px}
.cafe-page .cafe-content .wordmark{font-family:Georgia,"Times New Roman",serif;font-size:38px;line-height:1;font-weight:700;letter-spacing:-3px}
.cafe-page .cafe-content .wordmark span{color:#97674a}
.cafe-page .cafe-content .masthead p{margin:4px 0 0;font-size:10px;letter-spacing:1.4px;color:#77776d}
.cafe-page .cafe-content .edition{font-size:10px;letter-spacing:1.6px;margin-left:auto;color:#77776d}
.cafe-page .cafe-content .introduction{display:flex;align-items:end;justify-content:space-between;padding:64px 0 35px;gap:30px}
.cafe-page .cafe-content .eyebrow,.cafe-page .cafe-content .section-label{font-size:10px;font-weight:500;letter-spacing:2px;margin:0 0 18px;color:#717366}
.cafe-page .cafe-content .eyebrow{color:#876a51}
.cafe-page .cafe-content h1,.cafe-page .cafe-content h2,.cafe-page .cafe-content p{overflow-wrap:break-word}
.cafe-page .cafe-content h1{font-weight:500;font-size:clamp(28px,3.4vw,52px);line-height:1.2;letter-spacing:-1.7px;margin:0}
.cafe-page .cafe-content h2{font-weight:500;letter-spacing:-1px;font-size:29px;line-height:1.4;margin:0}
.cafe-page .cafe-content .intro-copy{margin:0 0 2px;font-size:13px;line-height:1.9;color:#727268}
.cafe-page .cafe-content .cinema{width:100%}
.cafe-page .cafe-content .film-frame{background:#181b17;aspect-ratio:16/9;position:relative;overflow:hidden}
.cafe-page .cafe-content .film-frame video{width:100%;height:100%;display:block;object-fit:contain;background:#151713}
.cafe-page .cafe-content .film-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000030,transparent 25%,transparent 70%,#00000077)}
.cafe-page .cafe-content .film-label{position:absolute;top:25px;left:28px;display:flex;align-items:center;gap:9px;color:#ffffffb8;font-size:9px;letter-spacing:1.8px}
.cafe-page .cafe-content .live-mark{height:4px;width:4px;display:block;background:#efede3;border-radius:50%}
.cafe-page .cafe-content .poster-note{position:absolute;bottom:30px;left:30px;color:#eee;font-size:14px;letter-spacing:.2px}
.cafe-page .cafe-content .poster-note span{display:block;font-size:11px;color:#aaa;margin-top:8px}
.cafe-page .cafe-content .controls{position:absolute;display:flex;gap:15px;align-items:center;inset:auto 20px 18px;color:white;opacity:.8;transition:opacity .2s}
.cafe-page .cafe-content .film-frame:hover .controls,.cafe-page .cafe-content .controls:focus-within{opacity:1}
.cafe-page .cafe-content .controls button{display:grid;place-items:center;width:30px;height:32px;border:0;background:transparent;color:#fff;flex-shrink:0;padding:5px}
.cafe-page .cafe-content .controls svg{width:22px;height:22px;fill:currentColor}
.cafe-page .cafe-content .controls #sound-icon,.cafe-page .cafe-content .controls #fullscreen svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cafe-page .cafe-content .controls .time{font-variant-numeric:tabular-nums;font-family:Arial,sans-serif;font-size:10px;white-space:nowrap}
.cafe-page .cafe-content .seek{appearance:none;-webkit-appearance:none;height:3px;flex:1;min-width:0;background:#ffffff55;cursor:pointer;border-radius:0}
.cafe-page .cafe-content .seek::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:white}
.cafe-page .cafe-content .seek::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:white;border:0}
.cafe-page .cafe-content .central-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:100%;border:1px solid #ffffff88;background:#ffffff16;backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center}
.cafe-page .cafe-content .central-play svg{width:24px;fill:currentColor;margin-left:2px}
.cafe-page .cafe-content .film-meta{display:flex;justify-content:space-between;gap:20px;padding:16px 0;color:#77796f;font-size:11px}
.cafe-page .cafe-content .film-meta p{margin:0}
.cafe-page .cafe-content .film-meta a{font-size:10px;white-space:nowrap}
.cafe-page .cafe-content .film-meta a span{margin-left:13px}
.cafe-page .cafe-content .chapters{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;border-top:1px solid #24251e28;border-bottom:1px solid #24251e28;margin-top:12px}
.cafe-page .cafe-content .chapter{position:relative;text-align:left;background:none;border:none;border-right:1px solid #24251e18;padding:23px 20px 25px;color:#75766d;display:flex;gap:12px;align-items:start}
.cafe-page .cafe-content .chapter:first-child{padding-left:0}
.cafe-page .cafe-content .chapter:last-child{border-right:0}
.cafe-page .cafe-content .chapter::before{content:"";position:absolute;top:-1px;height:2px;left:0;width:100%;background:#8d6b4f;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.cafe-page .cafe-content .chapter.active::before,.cafe-page .cafe-content .chapter:hover::before{transform:scaleX(1)}
.cafe-page .cafe-content .chapter.active{color:#26271f}
.cafe-page .cafe-content .chapter-number{font-size:9px;color:#999b8e;padding-top:2px}
.cafe-page .cafe-content .chapter-name{font-size:12px;display:block;letter-spacing:-.2px}
.cafe-page .cafe-content .chapter-time{display:block;font:9px Arial,sans-serif;color:#919387;margin-top:9px;letter-spacing:1px}
.cafe-page .cafe-content .chapter-placeholder{font-size:10px;letter-spacing:2px;color:#96968b;padding:20px 0;margin:0}
.cafe-page .cafe-content .concept{display:grid;grid-template-columns:1fr 2.7fr 1fr;gap:35px;padding:94px 0;border-bottom:1px solid #24251e28}
.cafe-page .cafe-content .concept .section-label{margin-top:8px}
.cafe-page .cafe-content .concept h2{font-size:34px;margin-bottom:27px}
.cafe-page .cafe-content .concept p{font-size:14px;line-height:2;color:#7c7d72;margin:0}
.cafe-page .cafe-content .material-note{display:flex;flex-direction:column;align-items:end;justify-content:center;gap:11px;font-size:9px;letter-spacing:2.4px;color:#909184}
.cafe-page .cafe-content .plan-section,.cafe-page .cafe-content .stills-section{padding-top:75px}
.cafe-page .cafe-content .section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:31px}
.cafe-page .cafe-content .section-heading .section-label{margin-bottom:14px}
.cafe-page .cafe-content .text-button{background:transparent;border:0;color:#74766a;font-size:11px;padding:8px 0}
.cafe-page .cafe-content .text-button span{margin-left:13px}
.cafe-page .cafe-content .plan-preview{display:block;width:100%;padding:0;border:1px solid #23231f14;background:#f8f7f1;cursor:zoom-in}
.cafe-page .cafe-content .plan-preview img{display:block;width:100%;aspect-ratio:1.4545;object-fit:contain}
.cafe-page .cafe-content .drawing-caption{display:flex;justify-content:space-between;gap:20px;font-size:10px;padding:15px 0;color:#888b7c}
.cafe-page .cafe-content .stills-section{padding-top:86px}
.cafe-page .cafe-content .stills-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px 24px}
.cafe-page .cafe-content .stills-grid figure{margin:0}
.cafe-page .cafe-content .still-open{position:relative;display:block;background:#dddcd1;padding:0;border:0;width:100%;overflow:hidden;cursor:zoom-in}
.cafe-page .cafe-content .still-open img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;transition:transform .8s}
.cafe-page .cafe-content .still-open:hover img{transform:scale(1.025)}
.cafe-page .cafe-content .image-expand{position:absolute;bottom:15px;right:19px;font-size:23px;color:white;opacity:0;transition:opacity .2s}
.cafe-page .cafe-content .still-open:hover .image-expand,.cafe-page .cafe-content .still-open:focus-visible .image-expand{opacity:1}
.cafe-page .cafe-content .stills-grid figcaption{font-size:12px;margin-top:14px;color:#6e7164}
.cafe-page .cafe-content .stills-grid figcaption span{font:9px Arial,sans-serif;letter-spacing:1px;margin-right:15px;color:#929587}
.cafe-page .cafe-content footer{margin-top:75px;border-top:1px solid #24251e28;display:flex;gap:45px;padding:34px 0 44px;align-items:center}
.cafe-page .cafe-content footer .wordmark{font-size:29px}
.cafe-page .cafe-content footer>span{font-size:10px;color:#929587;margin-left:auto}
.cafe-page .cafe-content dialog{border:0;background:#eeece5;color:#25271f;padding:0;width:min(1500px,94vw);max-width:94vw;max-height:94dvh;margin:auto;box-shadow:0 20px 90px #0006}
.cafe-page .cafe-content dialog::backdrop{background:#111611cc;backdrop-filter:blur(8px)}
.cafe-page .cafe-content .dialog-bar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 25px;border-bottom:1px solid #24251e28}
.cafe-page .cafe-content .dialog-bar h2{font-size:15px;letter-spacing:0}
.cafe-page .cafe-content .dialog-bar button{background:none;border:0;font-size:11px;color:#666a5b;padding:6px}
.cafe-page .cafe-content .dialog-bar button span{font-size:23px;vertical-align:-2px;margin-left:15px}
.cafe-page .cafe-content .dialog-content{max-height:calc(94dvh - 70px);overflow:auto;display:flex;align-items:start;justify-content:center}
.cafe-page .cafe-content .dialog-content img{display:block;width:100%;height:auto;max-height:calc(94dvh - 70px);object-fit:contain}
.cafe-page .cafe-content .film-frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:#10120e}
.cafe-page .cafe-content .film-frame:fullscreen video{object-fit:contain}
.cafe-page .cafe-content .missing-image{min-height:180px;background:#dddcd2}
.cafe-page .cafe-content .missing-image::after{content:"이미지를 불러오지 못했습니다.";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#858879}
@media(min-width:1600px){.cafe-page .cafe-content .introduction{padding-top:75px}
.cafe-page .cafe-content .concept{padding-block:110px}}
@media(max-width:900px){.cafe-page .cafe-content .masthead,.cafe-page .cafe-content main,.cafe-page .cafe-content footer{width:calc(100% - 52px)}
.cafe-page .cafe-content .masthead{height:82px}
.cafe-page .cafe-content .masthead p{font-size:8px;letter-spacing:1px}
.cafe-page .cafe-content .edition{font-size:8px}
.cafe-page .cafe-content .introduction{padding-top:46px}
.cafe-page .cafe-content .intro-copy{font-size:11px}
.cafe-page .cafe-content .concept{grid-template-columns:1fr 3fr;padding:64px 0}
.cafe-page .cafe-content .material-note{display:none}
.cafe-page .cafe-content .concept h2{font-size:29px}
.cafe-page .cafe-content .concept p{font-size:13px}
.cafe-page .cafe-content .chapter{padding:20px 12px;gap:8px}
.cafe-page .cafe-content .chapter-name{font-size:11px}
.cafe-page .cafe-content .plan-section,.cafe-page .cafe-content .stills-section{padding-top:56px}
.cafe-page .cafe-content h2{font-size:25px}
.cafe-page .cafe-content .controls{gap:10px}
.cafe-page .cafe-content .stills-grid{gap:28px 18px}}
@media(max-width:600px){.cafe-page .cafe-content .masthead,.cafe-page .cafe-content main,.cafe-page .cafe-content footer{width:calc(100% - 36px)}
.cafe-page .cafe-content .masthead{height:72px;gap:18px}
.cafe-page .cafe-content .wordmark{font-size:33px}
.cafe-page .cafe-content .masthead p{font-size:8px;letter-spacing:.8px}
.cafe-page .cafe-content .edition{display:none}
.cafe-page .cafe-content .introduction{padding:38px 0 24px;display:block}
.cafe-page .cafe-content .eyebrow{font-size:9px;margin-bottom:14px;letter-spacing:1.7px}
.cafe-page .cafe-content h1{font-size:31px;letter-spacing:-1.3px}
.cafe-page .cafe-content .intro-copy{margin-top:16px;line-height:1.8;font-size:11px}
.cafe-page .cafe-content .intro-copy br{display:none}
.cafe-page .cafe-content .film-frame{margin-inline:-18px;width:calc(100% + 36px)}
.cafe-page .cafe-content .film-label{top:14px;left:16px;font-size:7px;letter-spacing:1px}
.cafe-page .cafe-content .controls{inset:auto 9px 7px;gap:7px}
.cafe-page .cafe-content .controls button{width:26px;height:30px;padding:5px}
.cafe-page .cafe-content .controls svg{width:19px}
.cafe-page .cafe-content .controls .time{font-size:8px}
.cafe-page .cafe-content .seek{height:2px}
.cafe-page .cafe-content .film-meta{font-size:10px;gap:12px;padding-top:13px}
.cafe-page .cafe-content .film-meta a{font-size:9px}
.cafe-page .cafe-content .film-meta a span{margin-left:4px}
.cafe-page .cafe-content .central-play{width:53px;height:53px}
.cafe-page .cafe-content .central-play svg{width:19px}
.cafe-page .cafe-content .chapters{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.cafe-page .cafe-content .chapter{flex:1 0 118px;scroll-snap-align:start;padding:18px 11px 19px;gap:8px}
.cafe-page .cafe-content .chapter-name{font-size:10px}
.cafe-page .cafe-content .chapter-time{font-size:8px}
.cafe-page .cafe-content .concept{display:block;padding:48px 0}
.cafe-page .cafe-content .concept .section-label{margin-bottom:24px;font-size:9px}
.cafe-page .cafe-content .concept h2{font-size:27px;margin-bottom:20px}
.cafe-page .cafe-content .concept p{font-size:12px;line-height:2}
.cafe-page .cafe-content .desktop-break{display:none}
.cafe-page .cafe-content .plan-section,.cafe-page .cafe-content .stills-section{padding-top:45px}
.cafe-page .cafe-content .section-heading{margin-bottom:23px;gap:12px}
.cafe-page .cafe-content .section-heading .section-label{font-size:9px;margin-bottom:12px}
.cafe-page .cafe-content h2{font-size:23px;letter-spacing:-.8px}
.cafe-page .cafe-content .text-button{font-size:9px;white-space:nowrap;padding:5px 0}
.cafe-page .cafe-content .text-button span{margin-left:5px}
.cafe-page .cafe-content .plan-preview{margin-inline:-18px;width:calc(100% + 36px);border-inline:0}
.cafe-page .cafe-content .drawing-caption{font-size:8px;flex-direction:column;gap:6px;line-height:1.5}
.cafe-page .cafe-content .stills-grid{grid-template-columns:1fr;gap:26px}
.cafe-page .cafe-content .stills-grid figcaption{font-size:11px;margin-top:12px}
.cafe-page .cafe-content .image-expand{opacity:1;font-size:20px}
.cafe-page .cafe-content footer{margin-top:45px;gap:25px;padding:26px 0 30px}
.cafe-page .cafe-content footer .wordmark{font-size:26px}
.cafe-page .cafe-content footer>span{font-size:9px}
.cafe-page .cafe-content .dialog-bar{padding:13px 17px}
.cafe-page .cafe-content .dialog-bar h2{font-size:13px}
.cafe-page .cafe-content .dialog-bar button{font-size:10px}
.cafe-page .cafe-content .poster-note{font-size:11px;left:18px;bottom:18px}
.cafe-page .cafe-content .poster-note span{font-size:9px;margin-top:5px}}
@media(prefers-reduced-motion:reduce){html:has(> body.cafe-page){scroll-behavior:auto}
.cafe-page .cafe-content *{transition:none!important}}
.cafe-page .cafe-content .film-frame.is-expanded{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;aspect-ratio:auto;z-index:9999;background:#10120e}
.cafe-page .cafe-content .film-frame.is-expanded video{width:100%;height:100%;object-fit:contain}
.cafe-page .cafe-content .film-frame.is-expanded .controls{z-index:2;opacity:1}
body.cafe-page{color-scheme:light;--site-bg:#eeece5;--site-surface:#f8f7f1;--site-soft:#e5e5da;--site-ink:#23231f;--site-muted:#727268;--site-line:#d5d6ca;--site-brand:#876a51;--site-mark:#788773;--site-active:#5e7359}
.cafe-page .cafe-content main{max-width:1480px;padding:0}
.cafe-page .cafe-content .introduction>div{min-width:0}
.cafe-page .cafe-content .intro-copy{max-width:240px;flex-shrink:0}
.cafe-page .cafe-content .cafe-episode-picker{position:relative;z-index:9;width:fit-content;margin:0 0 20px;color:#727268;font-size:11px;letter-spacing:.6px}
.cafe-page .cafe-content .cafe-episode-picker summary{display:flex;align-items:center;gap:10px;min-height:32px;cursor:pointer;list-style:none}
.cafe-page .cafe-content .cafe-episode-picker summary::-webkit-details-marker{display:none}
.cafe-page .cafe-content .cafe-episode-picker summary svg{transition:transform .18s}
.cafe-page .cafe-content .cafe-episode-picker[open] summary svg{transform:rotate(180deg)}
.cafe-page .cafe-content .cafe-episode-picker summary:focus-visible{outline:2px solid #8c6240;outline-offset:4px}
.cafe-page .cafe-content .cafe-episode-picker nav{position:absolute;top:calc(100% + 5px);left:0;width:max-content;max-width:min(420px,calc(100vw - 36px));padding:6px;background:#f8f7f1;border:1px solid #d5d6ca;border-radius:10px;box-shadow:0 10px 30px #23231f18}
.cafe-page .cafe-content .cafe-episode-picker a{display:block;padding:12px 14px;border-radius:6px;text-decoration:none;white-space:normal;font-size:12px;letter-spacing:0;line-height:1.5}
.cafe-page .cafe-content .cafe-episode-picker a[aria-current],.cafe-page .cafe-content .cafe-episode-picker a:hover{background:#e5e5da;color:#23231f}
.cafe-page .huke-social{margin-top:65px}
.cafe-page .cafe-content footer{margin-top:34px}
@media(max-width:900px){.cafe-page .cafe-content .introduction{display:block}.cafe-page .cafe-content .intro-copy{max-width:none;margin-top:18px}}
@media(max-width:600px){.cafe-page .cafe-content .cafe-episode-picker{margin-bottom:13px}.cafe-page .huke-social{margin-top:45px}.cafe-page .cafe-content footer{margin-top:28px}}