/* yonchelee.com 크림 네오브루탈리즘. 토큰은 www.yonchelee.com/assets/theme.css 의 --yl-* 사본이다.
   기준 문서: yonchelee-homepage/CLAUDE.md 「Design System — Quiet Hub, Loud Rooms」.
   이 페이지는 다른 도메인(github.io)이라 원본을 직접 읽지 않는다. 색을 바꾸면 양쪽을 함께 고친다.
   껍데기(내비·필터·카드 틀·대화상자)는 홈과 같은 언어, 썸네일·영상 면은 작품의 것이라 어둡게 둔다.
   갤러리(index.html)와 생성 페이지(fx/·use/)가 함께 쓴다. */
:root{
  color-scheme:light;
  --yl-bg:#FFF3E2; --yl-bg-band:#F7E7CE; --yl-bg-elev:#FFFBF3;
  --yl-ink:#17171A; --yl-ink-2:#3A3833; --yl-ink-3:#5A5851; --yl-ink-4:#6B6A64;
  --yl-line:#17171A; --yl-bw:2px;
  --yl-shadow:5px 5px 0 var(--yl-line); --yl-shadow-lift:8px 8px 0 var(--yl-line);
  --yl-accent:#C43A00; --yl-yellow:#F2C230; --yl-mint:#4FD1A5; --yl-on-bright:#17171A;
  --yl-font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --yl-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --media:#111114;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --yl-bg:#17171A; --yl-bg-band:#20202A; --yl-bg-elev:#22222C;
  --yl-ink:#FFF3E2; --yl-ink-2:#E8DCC8; --yl-ink-3:#BDB3A3; --yl-ink-4:#9A9182;
  --yl-line:#FFF3E2; --yl-accent:#FF7A3D;
  --media:#0B0B0D;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--yl-bg);color:var(--yl-ink);font-family:var(--yl-font);font-size:15px;line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
a{color:var(--yl-accent)}
:focus-visible{outline:3px solid var(--yl-ink);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 한글에 DM Mono 자간을 주면 낱글자가 흩어진다. 한글 캡션은 본문 글꼴로. */
.mono{font-family:var(--yl-mono);letter-spacing:.16em;text-transform:uppercase}
button{font:inherit;color:inherit}

/* 공유 내비 — 마크·홈링크 자리를 홈과 맞춘다 */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:56px;padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));background:var(--yl-bg);border-bottom:var(--yl-bw) solid var(--yl-line)}
.nav .logo{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--yl-ink);text-decoration:none;white-space:nowrap}
.nav .logo:hover{color:var(--yl-accent)}
.nav .here{font-family:var(--yl-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--yl-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-decoration:none}
.nav .sp{margin-left:auto}
.navbtn{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border:var(--yl-bw) solid var(--yl-line);background:transparent;color:var(--yl-ink);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.navbtn:hover{background:var(--yl-yellow);color:var(--yl-on-bright)}
.theme-toggle{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:var(--yl-bw) solid var(--yl-line);background:transparent;color:var(--yl-ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.theme-toggle:hover{background:var(--yl-yellow);color:var(--yl-on-bright);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--yl-line)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .sun,:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}

.wrap{max-width:1200px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left))}

/* 머리말 — 작품이 먼저 보이도록 작게 */
.hero .kicker{font-family:var(--yl-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--yl-ink-3)}
.hero h1{font-size:clamp(26px,4.4vw,44px);font-weight:800;line-height:1.12;letter-spacing:-.035em;margin:6px 0 0;text-wrap:balance}
.hero h1 i{font-style:normal;color:var(--yl-accent)}
.hero p{margin:6px 0 0;color:var(--yl-ink-2);font-size:clamp(14.5px,1.6vw,17px)}
.hero .fresh{font-size:12.5px;color:var(--yl-ink-3);margin-top:4px}
.hero .fresh:empty{display:none}
.warnline{color:var(--yl-accent);font-weight:700}

/* 검색 */
.find{display:flex;margin-top:16px;max-width:760px;border:var(--yl-bw) solid var(--yl-line);box-shadow:var(--yl-shadow);background:var(--yl-bg-elev)}
.find input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--yl-ink);background:transparent;border:0;padding:12px 14px;min-height:48px}
.find input:focus{outline:none}
.find:focus-within{outline:3px solid var(--yl-ink);outline-offset:2px}
.find button{flex-shrink:0;border:0;border-left:var(--yl-bw) solid var(--yl-line);background:var(--yl-yellow);color:var(--yl-on-bright);font-weight:800;padding:0 18px;cursor:pointer;min-height:48px}

/* 용도 빠른 선택 — 효과 모양(필터)과 다른 역할: "어디에 쓰나" */
.uses{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.use{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg);color:var(--yl-ink);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none}
.use small{font-family:var(--yl-mono);font-size:11px;font-weight:500;color:var(--yl-ink-3)}
.use:hover{background:var(--yl-bg-elev)}
.use[aria-pressed="true"]{background:var(--yl-ink);color:var(--yl-bg)}
.use[aria-pressed="true"] small{color:var(--yl-bg)}

.pickbar{display:none;margin-top:20px;padding:14px 16px;background:var(--yl-yellow);color:var(--yl-on-bright);border:var(--yl-bw) solid var(--yl-line);box-shadow:var(--yl-shadow)}
body.picking .featured,body.picking .tools,body.picking .filters,body.picking .active{display:none}
.pickbar.on{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.pickbar b{font-weight:800}
.pickbar button{font-size:14px;font-weight:700;cursor:pointer;min-height:44px;padding:0 14px;background:#FFF3E2;color:#17171A;border:var(--yl-bw) solid #17171A}

/* 구역 머리 */
.sec{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:32px}
.sec h2{margin:0;font-size:clamp(19px,2.4vw,24px);font-weight:800;letter-spacing:-.025em}
.sec>span{font-size:13px;color:var(--yl-ink-3)}
.linkish{border:0;background:none;padding:0;min-height:44px;color:var(--yl-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:auto}
.count{font-family:var(--yl-mono);font-size:12px;letter-spacing:.06em}

/* 카드 */
.grid,.fgrid{display:grid;gap:22px 20px;margin-top:16px}
.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;text-align:left;cursor:pointer;padding:0;display:flex;flex-direction:column;background:var(--yl-bg-elev);border:var(--yl-bw) solid var(--yl-line);box-shadow:var(--yl-shadow);min-width:0;transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--yl-shadow-lift)}
.media{position:relative;aspect-ratio:16/9;background:var(--media);overflow:hidden;border-bottom:var(--yl-bw) solid var(--yl-line)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .none{position:absolute;inset:0;display:grid;place-items:center;color:#BDB3A3;font-size:13px;padding:12px;text-align:center}
.num{position:absolute;top:8px;left:8px;min-width:32px;height:32px;padding:0 8px;background:var(--yl-yellow);color:var(--yl-on-bright);border:var(--yl-bw) solid #17171A;font-family:var(--yl-mono);font-weight:500;font-size:15px;display:grid;place-items:center;z-index:2}
.pin{position:absolute;top:8px;right:8px;z-index:2;font-size:12px;font-weight:800;padding:2px 8px;background:var(--yl-yellow);color:#17171A;border:var(--yl-bw) solid #17171A}
.fav-on{position:absolute;bottom:8px;left:8px;z-index:2;font-size:13px;line-height:1;padding:4px 6px;background:#17171A;color:var(--yl-yellow);border:1px solid #FFF3E2}
.play{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:600;padding:2px 7px;background:#17171A;color:#FFF3E2;border:1px solid #FFF3E2;z-index:2}
.body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.title{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.orig{font-size:12px;color:var(--yl-ink-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.useline{font-size:13px;font-weight:600;color:var(--yl-ink-2)}
.badges{display:flex;flex-wrap:wrap;gap:5px}
.b{font-size:11.5px;font-weight:700;padding:1px 7px;border:1.5px solid var(--yl-line);color:var(--yl-ink);white-space:nowrap}
.b.env0{border-style:dashed;background:transparent}
.b.env1{background:var(--yl-mint);color:#17171A}
.b.env2{background:var(--yl-yellow);color:#17171A}
.b.env3,.b.env4{background:var(--yl-accent);color:#FFF3E2}
.b.partial{border-style:dashed}
.b.v-partial{background:var(--yl-bg-band)}
.b.v-reproduced{background:var(--yl-ink);color:var(--yl-bg)}
.foot{margin-top:auto;display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--yl-ink-3)}
.xlikes{white-space:nowrap}
.fgrid .card .orig{display:none}

/* 전체 갤러리 도구 */
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.tools select,.selects select{font:inherit;font-size:15px;color:var(--yl-ink);background:var(--yl-bg-elev);border:var(--yl-bw) solid var(--yl-line);border-radius:0;min-height:44px;padding:8px 32px 8px 12px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;max-width:100%}
.ftoggle{min-height:44px;padding:0 14px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg);font-weight:700;cursor:pointer;display:none}
.ftoggle span{margin-left:6px;font-family:var(--yl-mono);font-size:12px}
/* 검색 중에는 데스크톱에서도 상세 필터를 접고 켜진 조건(칩)만 보여 준다 */
body.searching .ftoggle{display:inline-flex;align-items:center}
body.searching .filters:not(.open){display:none}
.filters{margin-top:12px;padding:14px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg-elev)}
.fxset{border:0;margin:0;padding:0;min-width:0}
.fxset legend{font-weight:800;font-size:14px;padding:0;margin-bottom:8px}
.fxset legend small{font-weight:500;color:var(--yl-ink-3);margin-left:8px;font-size:12.5px}
.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.fx{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:44px;padding:6px 10px;background:var(--yl-bg);border:var(--yl-bw) solid var(--yl-line);font-size:13.5px;font-weight:600;text-align:left}
.fx span{font-family:var(--yl-mono);font-size:11.5px;color:var(--yl-ink-3)}
.fx:hover{background:var(--yl-bg-band)}
.fx[aria-pressed="true"]{background:var(--yl-yellow);color:var(--yl-on-bright)}
.fx[aria-pressed="true"] span{color:var(--yl-on-bright)}
.selects{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:14px;align-items:end}
.selects label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--yl-ink-2)}
.selects label.check{flex-direction:row;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--yl-ink)}
.check input{width:20px;height:20px;accent-color:var(--yl-accent)}

.active{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;align-items:center}
.active:empty{display:none}
.chipx{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px 0 10px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg-elev);font-size:13px;font-weight:700}
.chipx button{width:32px;height:32px;border:0;background:none;cursor:pointer;font-size:16px;line-height:1}
.chipx button:hover{background:var(--yl-yellow);color:#17171A}
.clearall{min-height:36px;padding:0 12px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-ink);color:var(--yl-bg);font-weight:700;cursor:pointer}

.status:empty{display:none}
.status{margin-top:16px;padding:18px;border:var(--yl-bw) dashed var(--yl-line);background:var(--yl-bg-elev)}
.status h3{margin:0 0 6px;font-size:17px}
.status p{margin:4px 0;color:var(--yl-ink-2)}
.status .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.status button{min-height:44px;padding:0 14px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg);font-weight:700;cursor:pointer}
.status button:hover{background:var(--yl-yellow);color:#17171A}

.more{display:flex;align-items:center;margin:40px auto 0;font-size:15px;font-weight:700;min-height:48px;padding:0 24px;background:var(--yl-yellow);color:var(--yl-on-bright);border:var(--yl-bw) solid var(--yl-line);box-shadow:var(--yl-shadow);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.more:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--yl-line)}
.more[hidden]{display:none}

/* 상세 대화상자 */
dialog{width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:var(--yl-bw) solid var(--yl-line);border-radius:0;box-shadow:var(--yl-shadow-lift);background:var(--yl-bg-elev);color:var(--yl-ink)}
dialog::backdrop{background:rgb(23 23 26 / .72)}
/* 세로 영상도 16:9 칸 안에 담는다. 칸이 영상 비율로 늘어나면 폰에서 제목·프롬프트가 화면 밖으로 밀린다. */
.dmedia{position:relative;aspect-ratio:16/9;max-height:56dvh;width:100%;background:#000;border-bottom:var(--yl-bw) solid var(--yl-line)}
.dmedia video,.dmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dmedia .none{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;color:#E8DCC8;padding:16px;font-size:14px}
.dmedia .none a{color:var(--yl-yellow);font-weight:700}
[hidden]{display:none!important}
.dbody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:14px}
.dhead h2{margin:4px 0 0;font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.025em;line-height:1.3}
.dhead .orig{white-space:normal}
.meta{font-size:13px;color:var(--yl-ink-3);display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.btn{font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg);color:var(--yl-ink);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--yl-yellow);color:var(--yl-on-bright)}
.btn.primary{background:var(--yl-ink);color:var(--yl-bg)}
.btn.primary:hover{background:var(--yl-yellow);color:var(--yl-on-bright)}
.btn[aria-pressed="true"]{background:var(--yl-yellow);color:#17171A}
.dsec{border-top:var(--yl-bw) solid var(--yl-line);padding-top:12px}
.dsec h3{margin:0 0 6px;font-size:15px;font-weight:800;display:flex;align-items:baseline;gap:8px}
.dsec h3 .n{font-family:var(--yl-mono);font-size:11px;color:var(--yl-ink-3)}
.dsec p,.dsec li{margin:0;color:var(--yl-ink-2);font-size:14.5px}
.dsec ol,.dsec ul{margin:0;padding-left:20px;display:grid;gap:4px}
.vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.vars div{border:1.5px solid var(--yl-line);padding:8px 10px;background:var(--yl-bg)}
.vars b{display:block;font-size:13px}
.vars span{font-size:13px;color:var(--yl-ink-3)}
.prompt{margin:0;padding:14px;background:var(--yl-bg-band);border:var(--yl-bw) solid var(--yl-line);font-family:var(--yl-font);font-size:13.5px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto}
.warn{font-size:13.5px;font-weight:700;color:var(--yl-accent)}
.note{font-size:13px;color:var(--yl-ink-3)}
.apply{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.apply label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--yl-ink-2)}
.apply input,.apply select{font:inherit;font-size:15px;color:var(--yl-ink);background:var(--yl-bg);border:var(--yl-bw) solid var(--yl-line);border-radius:0;min-height:44px;padding:8px 10px}
.close{position:absolute;right:10px;top:10px;z-index:3;width:44px;height:44px;display:grid;place-items:center;font-size:22px;line-height:1;cursor:pointer;background:#17171A;color:#FFF3E2;border:var(--yl-bw) solid #FFF3E2}
.close:hover{background:var(--yl-yellow);color:#17171A;border-color:#17171A}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;background:var(--yl-ink);color:var(--yl-bg);border:var(--yl-bw) solid var(--yl-line);padding:10px 16px;font-weight:700;font-size:14px;max-width:calc(100vw - 32px)}
.toast[hidden]{display:none}

/* 생성 페이지(fx/·use/) */
.doc{max-width:860px}
.crumbs{font-size:13px;color:var(--yl-ink-3);display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--yl-ink-2)}
.doc .dmedia{max-height:none;margin-top:16px;border:var(--yl-bw) solid var(--yl-line)}
.doc h1{font-size:clamp(26px,4.4vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.2;margin:10px 0 0}
.doc .lead{font-size:17px;color:var(--yl-ink-2);margin:8px 0 0}
.doc .dsec{margin-top:18px}
.list,.dsec .list{display:grid;gap:12px;margin-top:12px;padding:0;list-style:none}
.list a.row{display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:center;padding:10px;border:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg-elev);color:var(--yl-ink);text-decoration:none;box-shadow:var(--yl-shadow)}
.list a.row:hover{background:var(--yl-bg-band)}
.list img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--media);display:block}
.list b{display:block;font-size:16px}
.list span{font-size:13.5px;color:var(--yl-ink-3)}

footer{margin-top:64px;padding:20px max(16px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:var(--yl-bw) solid var(--yl-line);background:var(--yl-bg-band);font-size:12.5px;line-height:1.7;color:var(--yl-ink-2)}
footer .in{max-width:1200px;margin:0 auto;display:grid;gap:8px}
footer p{margin:0}
footer a{color:var(--yl-ink);font-weight:600}
footer .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px;font-family:var(--yl-mono);font-size:11px;letter-spacing:.14em;color:var(--yl-ink-4)}
footer .legal a{color:var(--yl-ink-3);font-weight:500;text-decoration:none}

/* 태블릿 */
@media (max-width:899px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 폰: 상세 필터는 접는다. 대표 효과는 2열 작은 카드 */
@media (max-width:599px){
  .wrap{padding-top:18px}
  .nav .here{display:none}
  .find button{padding:0 14px}
  .uses{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:2px 16px 6px}
  .uses::-webkit-scrollbar{display:none}
  .use{flex-shrink:0}
  .fgrid{gap:14px 12px}
  .fgrid .card{box-shadow:3px 3px 0 var(--yl-line)}
  .fgrid .body{padding:8px 10px 10px;gap:4px}
  .fgrid .title{font-size:14px}
  .fgrid .badges,.fgrid .foot{display:none}
  .fgrid .useline{font-size:12px}
  .fgrid .play{display:none}
  .featured .sec>span{display:none}
  .ftoggle{display:inline-flex;align-items:center}
  .filters{display:none}
  .filters.open{display:block}
  .index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .selects label{flex:1 1 calc(50% - 14px)}
  .selects select{width:100%}
  .list a.row{grid-template-columns:110px 1fr}
  dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .dbody{padding:16px}
}
/* 낮은 화면(가로 폰): 고정 내비를 풀고, 상세는 영상|설명 좌우로 */
@media (max-height:500px){
  .nav{position:static;min-height:48px}
  .wrap{padding-top:12px}
  .hero h1{font-size:26px}
}
@media (max-height:500px) and (min-width:600px){
  dialog{width:calc(100vw - 24px);height:calc(100dvh - 16px);max-height:none}
  dialog[open]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .dmedia{aspect-ratio:auto;max-height:none;height:100%;border-bottom:0;border-right:var(--yl-bw) solid var(--yl-line)}
  .dbody{overflow:auto;padding:14px 16px 16px}
  .dbody>*{flex-shrink:0}
  .close{left:10px;right:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}