/* ═══════════════════════════════════════════════════════════════
   CHROMA (가칭) 디자인 기본값
   - 폰트: Outfit (OFL-1.1), Pretendard (OFL-1.1) — 자체 호스팅, 외부 CDN 없음
   - 아이콘: Lucide (ISC) — shared/icons.js
   - 룩 스튜디오와 사용자 앱이 같은 토큰을 씁니다.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Outfit";src:url("/fonts/outfit-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/outfit-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/outfit-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/outfit-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-Medium.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF}

:root{
  /* 색 */
  --bg:#0B0B0D;            /* 바탕 */
  --surface:#17171A;       /* 어두운 카드 */
  --surface-2:#1F1F23;     /* 입력칸, 칩 */
  --line:#2E2E33;          /* 테두리 */
  --line-2:#3A3A40;
  --tx:#ECEAE6;            /* 본문 */
  --tx-2:#A9A7A2;          /* 보조 글자 (바탕 대비 7:1 이상) */
  --tx-3:#8E8C87;          /* 캡션 (4.5:1 이상) */
  --paper:#F5F4F1;         /* 밝은 카드 */
  --ink:#0B0B0D;           /* 밝은 카드 위 글자 */
  --ink-2:#55545A;
  --accent:#F26B2D;        /* 주 강조 (게시, 저장, PRO) */
  --accent-soft:#3A2418;
  --accent-tx:#F7A27A;
  --gold:#F3D36B;          /* 보조 강조 (편집, 원본 보기) */
  --info:#2F7BEA;          /* 날짜, 안내 배지 */
  --ok:#3DBE6A;            /* 상태 점 */
  --glass:rgba(30,30,34,.5);
  --glass-line:rgba(255,255,255,.16);

  /* 글꼴 */
  --font:"Outfit","Pretendard",system-ui,sans-serif;
  --font-ko:"Pretendard","Outfit",system-ui,sans-serif;
  --fs-xs:11px; --fs-s:12px; --fs-m:14px; --fs-l:16px; --fs-xl:20px; --fs-2xl:28px; --fs-display:56px;

  /* 모양 */
  --r-s:12px; --r-m:20px; --r-l:28px; --r-pill:999px;
  --gap:16px;
  --touch:44px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:var(--fs-m);-webkit-font-smoothing:antialiased}
:lang(ko) body, body:lang(ko){font-family:var(--font-ko)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--tx);text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ic{display:block;flex:none}

/* ── 버튼 ── */
.btn{height:var(--touch);padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--tx);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:#ff7a3c}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.btn.light:hover{background:#e9e7e2}
.btn.ghost{border-color:transparent}
.btn.icon{width:var(--touch);padding:0}
.btn.icon.sm{width:36px}
.btn.round-dark{width:34px;height:34px;padding:0;border:0;background:var(--ink);color:#fff}

/* ── 알약 탭 ── */
.pills{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface)}
.pills button,.pills a{height:38px;padding:0 16px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--tx);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pills .on{background:#fff;color:var(--ink)}

/* ── 칩/배지 ── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s);padding:5px 12px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--tx)}
.badge{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:600;padding:3px 9px;border-radius:var(--r-pill);letter-spacing:.02em}
.badge.pro{background:var(--accent);color:#fff}
.badge.free{background:#4A4A52;color:#fff}
.badge.draft{background:rgba(255,255,255,.18);color:#fff}
.badge.live{background:var(--ok);color:#06210f}
.badge.auto{background:var(--accent-soft);color:var(--accent-tx);font-weight:500}

/* ── 카드 ── */
.card{background:var(--surface);border-radius:var(--r-l);padding:20px}
.card.paper{background:var(--paper);color:var(--ink)}
.glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-line)}

/* ── 입력 ── */
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.lbl{font-size:var(--fs-s);color:var(--tx-2)}
.input,select.input{height:var(--touch);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg);padding:0 16px;width:100%}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tx-2) 50%),linear-gradient(135deg,var(--tx-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}

/* ── 슬라이더 ── */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--line-2) var(--a,0%),var(--accent) var(--a,0%),var(--accent) var(--b,50%),var(--line-2) var(--b,50%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-6px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}

/* ── 기타 ── */
.muted{color:var(--tx-2)}
.caption{color:var(--tx-3);font-size:var(--fs-s)}
.display{font-family:"Outfit",sans-serif;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 20px;border-radius:var(--r-pill);background:#fff;color:var(--ink);font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:99}
.toast.show{opacity:1}

/* 사용자 앱 화면 — shared/tokens.css 위에 얹습니다.
   PC: 룩 | 사진 | 조정·저장 세 칸, 페이지는 스크롤하지 않고 칸 안만 스크롤.
   900px 아래(모바일): 시안 v3 휴대폰 화면 — 홈, 편집(아래 탭 4개), 저장 시트. 아래 "모바일" 부분. */
[hidden]{display:none !important}
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
.spacer{flex:1}
h2{margin:0;font-size:var(--fs-l);font-weight:500}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px}
.wide{width:100%}

/* 상단 */
.top{flex:none;display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid #1C1C20;background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-size:20px;font-weight:500;color:var(--tx)}
select.input.lang{width:auto;max-width:150px;height:36px;font-size:13px;padding-left:14px}

/* 세 칸 */
.app{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(280px,320px);gap:16px;padding:16px 20px 20px}
.panel{min-height:0;overflow-y:auto;scrollbar-width:thin}
.looks-panel{display:flex;flex-direction:column;gap:12px;padding-right:4px}
.looks-panel>*{flex:none}
.side-panel{display:flex;flex-direction:column;gap:16px}
.center{min-width:0;min-height:0;display:flex}

/* 카테고리 */
.cats{display:flex;gap:6px;flex-wrap:wrap}
.cats button{height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--tx-2);cursor:pointer;font-size:13px}
.cats button.on{background:#fff;border-color:#fff;color:var(--ink)}

/* 룩 카드 */
.look-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.look{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--surface);color:#fff;text-align:left}
.look canvas,.look img,.look .sw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.look::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7));pointer-events:none}
.look .nm{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;font-size:17px}
.look .badges{position:absolute;top:10px;right:10px;z-index:1;display:flex;gap:4px}
.badge.new{background:var(--gold);color:var(--ink)}
.badge.rank{background:rgba(255,255,255,.92);color:var(--ink);font-variant-numeric:tabular-nums}
.look .meta{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;color:rgba(255,255,255,.7);display:none}
.look .fav{position:absolute;top:6px;left:6px;z-index:4;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s}
.look:hover .fav,.look .fav.on,.look .fav:focus-visible{opacity:1}
.look .fav.on{color:var(--gold)}
.look .fav.on svg{fill:currentColor}
.look.on .fav{opacity:1}
.look .lock~.fav{left:auto;right:6px;top:auto;bottom:6px}
.sec{grid-column:1/-1;margin:6px 0 -2px;font-size:var(--fs-s);font-weight:500;color:var(--tx-2)}
.sec:first-child{margin-top:0}
/* 목록 보기 */
.look-grid.as-list{grid-template-columns:1fr;gap:6px}
.as-list .look{aspect-ratio:auto;height:64px;border-radius:14px;display:flex;align-items:center;background:var(--surface)}
.as-list .look .art{position:relative;flex:none;width:52px;height:52px;margin-left:6px;border-radius:10px;overflow:hidden}
.as-list .look::after{display:none}
.as-list .look .nm{position:static;flex:1;min-width:0;margin-left:12px;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:16px}
.as-list .look .meta{display:block;left:76px;right:44px;bottom:12px;color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-list .look .badges{top:8px;right:44px}
.as-list .look .fav{top:16px;left:auto;right:8px;opacity:1;background:transparent;color:var(--tx-2)}
.as-list .look .fav.on{color:var(--gold)}
.as-list .look .lock{top:18px;left:18px}

.look::before{content:'';position:absolute;inset:0;border-radius:inherit;border:2.5px solid transparent;z-index:3;pointer-events:none}
.look.on::before{border-color:var(--accent)}
.look:focus-visible{outline:none}
.look:focus-visible::before{border-color:var(--gold)}
.look-none{grid-column:1/-1;padding:24px 0;text-align:center}

/* 사진 무대 */
.stage{position:relative;flex:1;min-height:0;border-radius:var(--r-l);overflow:hidden;background:#050506;display:flex;align-items:center;justify-content:center;touch-action:none}
.stage.over{outline:2px dashed var(--gold);outline-offset:-8px}
#gl{display:block;flex:none;border-radius:10px}
.stage.zoomed #gl{border-radius:0;cursor:grab}
#gl.panning{cursor:grabbing}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px}
.empty .display{font-size:clamp(40px,6vw,76px);margin:0}
.empty .muted{margin:0 0 8px;max-width:340px}
.private{display:flex;align-items:center;gap:6px;margin-top:6px}
.stage-bar,.zoom-bar{position:absolute;bottom:14px;display:flex;gap:2px;border-radius:var(--r-pill);padding:5px;z-index:2}
.stage-bar{left:14px}
.zoom-bar{right:14px}
.stage-bar button,.zoom-bar button{height:38px;min-width:38px;padding:0 12px;border-radius:var(--r-pill);border:0;background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stage-bar button:hover,.zoom-bar button:hover{background:rgba(255,255,255,.14)}
.stage-bar button.on{background:#fff;color:var(--ink)}
.stage-tag{position:absolute;top:14px;left:14px;font-size:12px;padding:6px 12px;border-radius:var(--r-pill);z-index:2}
.stage-tag:empty{display:none}

/* 조정 */
.sliders{display:flex;flex-direction:column;gap:12px;margin:10px 0 12px}
.sl{display:flex;flex-direction:column;gap:2px}
.sl .t{display:flex;justify-content:space-between;font-size:13px}
.sl .v{color:var(--tx-2);font-variant-numeric:tabular-nums}
.sl.changed .v{color:var(--gold)}
.grp-h{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3,#77777f);margin-top:6px}
.grp-h:first-child{margin-top:0}
.sl.dim{opacity:.4}
.more svg{transition:transform .2s}.more.open svg{transform:rotate(180deg)}
#secAdjust>.caption{margin:8px 0 0}
/* 프리셋 */
.presets{margin-top:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pre-h{display:flex;align-items:center;justify-content:space-between}
.presets .caption{margin:6px 0 0}
.pre-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pre-chip{display:inline-flex;align-items:center;height:32px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.pre-chip button{height:100%;border:0;background:transparent;color:var(--tx);cursor:pointer;font-size:13px}
.pre-chip>button:first-child{padding:0 4px 0 12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pre-chip>button:first-child:hover{color:var(--gold)}
.pre-x{width:28px;display:flex;align-items:center;justify-content:center;color:var(--tx-2)!important}

/* 왼쪽 패널 머리 */
.ltabs button{height:34px;padding:0 14px;font-size:14px}
.view-tg{display:flex;gap:2px}
.view-tg button{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--tx-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.view-tg button.on{background:var(--surface-2);color:var(--tx)}
.looks-box,.recent-box{display:flex;flex-direction:column;gap:12px}
.row-q{display:flex;align-items:center;gap:10px}
.row-q .input{flex:1;min-width:0}
.row-q .caption{flex:none}
/* 최근 작업 */
.recent-box>.caption{margin:0;line-height:1.5}
.recent-grid{display:flex;flex-direction:column;gap:6px}
.rc{position:relative;display:flex;align-items:center;gap:12px;padding:6px;border-radius:14px;background:var(--surface);cursor:pointer}
.rc img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.rc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rc-t b{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-t .caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc::before{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid transparent;pointer-events:none}
.rc.on::before{border-color:var(--accent)}
.rc-x{width:32px;height:32px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--tx-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rc-x:hover{background:var(--surface-2);color:var(--tx)}
.other-list{display:flex;flex-direction:column;gap:4px}
.other{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--tx);cursor:pointer;text-align:left}
.other:hover{background:var(--surface)}
.other>span{display:flex;flex-direction:column;min-width:0}
.other b{font-weight:500;font-size:13px}

/* 크롭 */
.crop-frame{position:absolute;z-index:3;box-shadow:0 0 0 9999px rgba(0,0,0,.6);border:1.5px solid #fff;cursor:move;touch-action:none}
.crop-frame i{position:absolute;background:rgba(255,255,255,.35);pointer-events:none}
.crop-frame i:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}
.crop-frame i:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}
.crop-frame i:nth-child(3){top:33.33%;left:0;right:0;height:1px}
.crop-frame i:nth-child(4){top:66.66%;left:0;right:0;height:1px}
.crop-bar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;border-radius:var(--r-pill);z-index:4;width:min(420px,calc(100% - 28px));font-size:13px;white-space:nowrap}
.crop-bar input{flex:1}
.ratios{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ratio{position:relative;display:flex;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.ratio.on{border-color:var(--accent);background:var(--accent-soft)}
.r-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 4px 7px 10px;border:0;background:transparent;color:var(--tx);cursor:pointer;text-align:left}
.r-main:disabled{opacity:.45;cursor:not-allowed}
.r-main b{font-size:13px;font-weight:600}
.r-main span{font-size:11px;color:var(--tx-2);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.r-pin{flex:none;width:28px;border:0;background:transparent;color:var(--tx-3,#66666e);cursor:pointer;display:flex;align-items:flex-start;justify-content:center;padding-top:8px}
.r-pin.on{color:var(--gold)}
.r-pin.on svg{fill:currentColor}
.ratios .wide{grid-column:1/-1}
.row2{display:grid;grid-template-columns:1fr;gap:10px}
#expNote{white-space:pre-line}

/* 저장 */
#secExport{display:flex;flex-direction:column;gap:12px}
#secExport .caption{margin:0}
.pro-note{margin:0;padding:12px 14px;border-radius:16px;background:var(--accent-soft);color:var(--accent-tx);font-size:13px;line-height:1.5}

/* Pro 안내 */
.pro-dlg{border:0;border-radius:var(--r-l);padding:0;width:min(420px,calc(100vw - 32px));background:var(--surface);color:var(--tx)}
.pro-dlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.pro-hero{padding:28px 24px 20px;background:linear-gradient(135deg,#F26B2D,#C2408A 60%,#5B5BD6);color:#fff}
.pro-hero .display{font-size:40px;margin:0 0 8px}
.pro-hero p{margin:0}
.pro-list{margin:18px 24px 0;padding-left:18px;line-height:1.9}
.prices{display:flex;gap:10px;margin:16px 24px 0}
.price{flex:1;border:1px solid var(--line-2);border-radius:18px;padding:12px 14px;display:flex;align-items:baseline;gap:6px}
.price b{font-size:22px;font-weight:600}
.pro-dlg .caption{margin:12px 24px 0}
.pro-dlg .btn.wide{margin:16px 24px 24px;width:calc(100% - 48px)}

/* 로그인 */
.auth-dlg{border:0;border-radius:var(--r-l);padding:24px;width:min(400px,calc(100vw - 32px));background:var(--surface);color:var(--tx)}
.auth-dlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.auth-dlg form{display:flex;flex-direction:column;gap:12px}
.auth-dlg h2{font-size:var(--fs-xl)}
.auth-dlg .caption{margin:0;line-height:1.5}
#authFields{display:flex;flex-direction:column;gap:12px}
.auth-msg{margin:0;font-size:13px;color:var(--gold);line-height:1.5}
.auth-msg:empty{display:none}
.look .lock{position:absolute;top:10px;left:10px;z-index:1;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
#btnSignin{max-width:200px;overflow:hidden;text-overflow:ellipsis}

/* 로그인 · 앱 설치 */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.btn.google{background:#fff;color:#111;border-color:#fff}
.auth-or{margin:2px 0;text-align:center;font-size:12px;color:var(--tx3, #6E6C75)}
.inst-steps{margin:4px 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px;line-height:1.5}

/* PC: 칸 스크롤바는 마우스를 올렸을 때만 보이게 */
.panel{scrollbar-width:thin;scrollbar-color:transparent transparent}
.panel:hover{scrollbar-color:#3a3a42 transparent}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
.panel:hover::-webkit-scrollbar-thumb{background:#3a3a42}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--tx-2)}
.kv b{color:var(--tx);font-weight:500;font-variant-numeric:tabular-nums}
.crop-px{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:12px;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.icon-btn{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:var(--surface);color:var(--tx);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s}
.icon-btn:active{transform:scale(.9)}
.m-only,.m-scrim,.m-sheet{display:none}


/* 여러 장 줄 (PC) */
.center{flex-direction:column;gap:12px}
.bstrip{flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-m);background:var(--surface)}
.b-meta{flex:none;display:flex;flex-direction:column;gap:2px;width:150px;font-size:13px}
.b-meta b{font-weight:600}
.b-list{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:transparent transparent;padding:2px}
.b-list:hover{scrollbar-color:#3a3a42 transparent}
.b-th{position:relative;flex:none;width:58px;height:58px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#222;cursor:pointer}
.b-th img,.b-th .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s}
.b-th::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid transparent;pointer-events:none}
.b-th.on::after{border-color:var(--accent)}
.b-th.wait img{opacity:.75}
.b-th.work::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);background-size:250% 100%;animation:b-shine .9s linear infinite}
@keyframes b-shine{from{background-position:120% 0}to{background-position:-120% 0}}
.b-th .ok{position:absolute;right:3px;bottom:3px;z-index:2;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#06210f;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s cubic-bezier(.22,1.25,.36,1)}
.b-th.done .ok{transform:scale(1)}
.b-th.err{outline:2px solid #E5484D;outline-offset:-2px}
.b-th .bx{position:absolute;top:3px;right:3px;z-index:2;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:none;align-items:center;justify-content:center}
.b-th:hover .bx{display:flex}
.b-prog{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.b-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
/* 영상 */
body.is-video .field:has(#expQ),body.is-video #mSegQ{display:none}
.vprog{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
.vprog[hidden]{display:none}
.vprog-card{width:min(360px,100%);padding:22px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.vprog-card .b-prog,.vprog-card p,.vprog-card button{grid-column:1/-1}
.vprog-card .b-prog{height:6px}
.vprog-pct{font-variant-numeric:tabular-nums;color:var(--tx-2)}

/* ═════ 모바일 (시안 v3) ═════ */
@media (max-width:900px){
  :root{--m-spring:cubic-bezier(.22,1.25,.36,1);--m-ease:cubic-bezier(.2,.8,.2,1)}
  html,body{height:100%;overscroll-behavior:none}
  body{height:100dvh;overflow:hidden;padding-top:env(safe-area-inset-top);user-select:none;-webkit-user-select:none}
  input,select,textarea{user-select:auto;-webkit-user-select:auto}
  .top{height:56px;padding:0 14px;border-bottom:0;gap:8px}
  .brand-name{font-size:17px}
  .top #lang,.top #btnSignin{display:none}
  #btnPro{padding:0;width:38px;justify-content:center}
  #btnPro span{display:none}
  .looks-panel,.side-panel,#empty,.stage-bar,.zoom-bar,.crop-bar,.stage-tag{display:none!important}
  .m-only{display:none}
  #btnAcct{display:inline-flex}
  .auth-dlg .m-only{display:flex}

  /* 홈 */
  body[data-mview="home"] .app,body[data-mview="home"] #mBar,body[data-mview="home"] #mPanes,body[data-mview="home"] #mTabs{display:none!important}
  body[data-mview="home"] #mHome{display:flex}
  .m-home{flex:1;min-height:0;flex-direction:column;gap:14px;padding:6px 16px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;scrollbar-width:none}
  .m-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .m-card{height:132px;border:0;border-radius:24px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;cursor:pointer;color:var(--tx);background:var(--surface);transition:transform .32s var(--m-spring);animation:m-rise .5s var(--m-ease) both}
  .m-card:active{transform:scale(.96)}
  .m-card.cam{background:var(--accent);color:#fff}
  .m-card.alb{animation-delay:60ms}
  .m-card b{font-family:var(--font);font-weight:800;font-size:24px;text-transform:uppercase;line-height:1;display:block}
  .m-card small{display:block;margin-top:5px;font-size:12px;color:var(--tx-2)}
  .m-lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--tx-2);margin-bottom:-4px}
  .m-recent{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .m-recent:empty{display:none}
  .m-rt{aspect-ratio:1;border:0;padding:0;border-radius:12px;overflow:hidden;background:#222;cursor:pointer;animation:m-rise .5s var(--m-ease) both;animation-delay:calc(140ms + var(--i) * 40ms);transition:transform .3s var(--m-spring)}
  .m-rt:active{transform:scale(.94)}
  .m-rt img{width:100%;height:100%;object-fit:cover;display:block}
  .m-foryou{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .m-lk{position:relative;aspect-ratio:4/5;border:0;padding:0;border-radius:16px;overflow:hidden;background:#222;cursor:pointer;color:#fff;text-align:left;animation:m-rise .5s var(--m-ease) both;animation-delay:calc(260ms + var(--i) * 50ms);transition:transform .3s var(--m-spring)}
  .m-lk:active{transform:scale(.95)}
  .m-lk img,.m-lk .sw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .m-lk::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
  .m-lk b{position:absolute;left:9px;right:9px;bottom:8px;z-index:1;font-size:13px;line-height:1.05}
  .m-lk .badge{position:absolute;top:7px;right:7px;z-index:1}
  .m-private{display:flex;justify-content:center;margin:4px 0 0}
  @keyframes m-rise{from{opacity:0;transform:translateY(12px)}}

  /* 편집 */
  body[data-mview="edit"] .top,body[data-mview="edit"] #mHome{display:none!important}
  body[data-mview="edit"] #mBar{display:flex}
  body[data-mview="edit"] #mPanes{display:block}
  body[data-mview="edit"] #mTabs{display:flex}
  .m-bar{flex:none;height:52px;align-items:center;gap:10px;padding:0 12px}
  .m-ttl{flex:1;position:relative;height:22px;overflow:hidden;text-align:center;font-size:15px;font-weight:500}
  .m-ttl span{position:absolute;inset:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .32s var(--m-ease),opacity .32s var(--m-ease)}
  .m-right{flex:none;min-width:38px;display:flex;justify-content:flex-end}
  .m-right .btn{height:34px;padding:0 16px;font-weight:600}
  .m-txt{border:0;background:none;color:var(--tx-2);font-size:14px;cursor:pointer;padding:8px 2px}
  .m-txt.gold{color:var(--gold);font-weight:600}
  .app{display:flex;flex:1;min-height:0;padding:0}
  .center{flex:1;min-height:0;display:flex;padding:2px 12px 0}
  .stage{border-radius:16px;background:#050506}
  #gl{border-radius:0;transition:none}
  .m-hint{position:absolute;left:0;right:0;bottom:12px;display:block;text-align:center;font-size:12px;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;transition:opacity .5s}
  .m-hint.off,body:not([data-mpane="looks"]) .m-hint{opacity:0}
  .crop-frame{transition:none}

  .m-panes{flex:none}
  .m-pane{display:none}
  body[data-mpane="looks"] .m-pane[data-pane="looks"],body[data-mpane="adjust"] .m-pane[data-pane="adjust"],
  body[data-mpane="crop"] .m-pane[data-pane="crop"],body[data-mpane="presets"] .m-pane[data-pane="presets"]{display:block;animation:m-fade .28s var(--m-ease)}
  @keyframes m-fade{from{opacity:0;transform:translateY(6px)}}
  .m-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 12px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
  .m-strip::-webkit-scrollbar,.m-tools::-webkit-scrollbar{display:none}
  .m-lt{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;color:var(--tx-2);font-size:11px;cursor:pointer;padding:0;scroll-snap-align:center}
  .m-lt .th{position:relative;width:64px;height:64px;border-radius:13px;overflow:hidden;background:#222;transition:transform .32s var(--m-spring)}
  .m-lt .th img,.m-lt .th .sw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .m-lt .th::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2.5px solid transparent;transition:border-color .18s}
  .m-lt .nm{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-lt[aria-pressed="true"]{color:var(--tx)}
  .m-lt[aria-pressed="true"] .th{transform:scale(1.05)}
  .m-lt[aria-pressed="true"] .th::after{border-color:var(--accent)}
  .m-lt:active .th{transform:scale(.93)}
  .m-lt .badge{position:absolute;top:3px;right:3px;z-index:1;font-size:8px;padding:1px 5px}
  .m-lt .lock{position:absolute;inset:auto auto 4px 4px;z-index:1;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}

  .m-ruler{padding:8px 0 6px}
  .m-rv{text-align:center;font-size:26px;font-weight:500;height:32px;font-variant-numeric:tabular-nums;transition:color .18s}
  .m-rv.zero{color:var(--tx-2)}
  .m-rn{text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2)}
  .m-track{position:relative;height:36px;margin:6px 18px 0;overflow:hidden;touch-action:none;cursor:ew-resize;
    -webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
  .m-ticks{position:absolute;top:6px;height:26px;left:50%;will-change:transform}
  .m-ticks b{position:absolute;bottom:0;width:1px;height:14px;background:#55545c}
  .m-ticks b.m{height:20px;background:#7a7980}
  .m-ticks b.z{height:26px;width:2px;background:#fff}
  .m-needle{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent);z-index:1}
  .m-tools{display:flex;gap:6px;overflow-x:auto;padding:4px 12px 8px;scrollbar-width:none}
  .m-pane[data-pane="crop"] .m-tools{padding-top:14px}
  .m-tool{flex:none;width:60px;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;color:var(--tx-2);font-size:10.5px;cursor:pointer;padding:0;line-height:1.2;text-align:center}
  .m-tool i{position:relative;font-style:normal;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;transition:transform .32s var(--m-spring),border-color .2s,background .2s}
  .m-tool i.sm{font-size:10px}
  .m-tool[aria-pressed="true"]{color:var(--tx)}
  .m-tool[aria-pressed="true"] i{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.08)}
  .m-tool .dot{position:absolute;top:1px;right:1px;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .32s var(--m-spring)}
  .m-tool.changed .dot{transform:scale(1)}
  .m-chips{display:flex;flex-wrap:wrap;gap:6px;padding:14px 14px 8px}
  .m-chip{display:inline-flex;align-items:center;height:38px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;transition:background .2s,color .2s,transform .3s var(--m-spring)}
  .m-chip button{height:100%;border:0;background:none;color:inherit;font-size:14px;cursor:pointer}
  .m-chip>button:first-child{padding:0 6px 0 15px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-chip .x{width:32px;display:flex;align-items:center;justify-content:center;opacity:.6}
  .m-chip.on{background:#fff;color:var(--ink);transform:scale(1.03)}
  .m-chip.add{border:1px dashed var(--line-2,#3a3a42);background:none;color:var(--tx-2);padding:0 15px;gap:6px;font-size:14px;cursor:pointer}
  .m-note{margin:0;padding:0 16px 8px}

  .m-tabs{flex:none;justify-content:space-around;padding:6px 6px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #17171b}
  .m-tabs button{width:70px;border:0;background:none;color:var(--tx-2);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;cursor:pointer;transition:color .18s}
  .m-tabs button svg{transition:transform .32s var(--m-spring)}
  .m-tabs button[aria-pressed="true"]{color:var(--tx)}
  .m-tabs button[aria-pressed="true"] svg{transform:translateY(-2px) scale(1.1)}

  /* 저장 시트 */
  .m-scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .32s var(--m-ease)}
  .m-scrim.on{opacity:1;pointer-events:auto}
  .m-sheet{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:41;flex-direction:column;gap:10px;padding:10px 16px calc(18px + env(safe-area-inset-bottom));background:var(--surface);border-radius:24px 24px 0 0;transform:translateY(105%);transition:transform .52s var(--m-spring);touch-action:none}
  .m-sheet.on{transform:translateY(0)}
  .m-sheet.drag{transition:none}
  .m-grab{width:36px;height:4px;border-radius:2px;background:#3a3a42;margin:0 auto 2px}
  .m-sheet h2{font-size:17px}
  .m-kv{display:flex;justify-content:space-between;font-size:13px;color:var(--tx-2)}
  .m-kv b{color:var(--tx);font-weight:500;font-variant-numeric:tabular-nums}
  .m-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--surface-2);border-radius:13px;padding:3px}
  .m-seg button{border:0;border-radius:10px;background:none;color:var(--tx-2);font-size:11px;padding:8px 2px;line-height:1.3;cursor:pointer;transition:background .25s var(--m-ease),color .2s}
  .m-seg button b{display:block;font-size:13px;font-weight:500;color:var(--tx)}
  .m-seg button[aria-pressed="true"]{background:#fff;color:#55545c}
  .m-seg button[aria-pressed="true"] b{color:var(--ink)}
  .m-big{position:relative;overflow:hidden;height:48px;border:0;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
  .m-big .fill{position:absolute;inset:0;background:rgba(255,255,255,.22);transform:scaleX(0);transform-origin:left}
  .m-big .m-go-t{position:relative}
  .m-sheet .m-note{text-align:center;padding:0}

  .bstrip{display:none!important}
  .center{gap:0}
  .m-bchip{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border:0;border-radius:var(--r-pill);color:#fff;font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer}
  .m-bchip[hidden]{display:none!important}
  body[data-mview="batch"] .top,body[data-mview="batch"] #mHome,body[data-mview="batch"] .app,body[data-mview="batch"] #mBar,body[data-mview="batch"] #mPanes,body[data-mview="batch"] #mTabs{display:none!important}
  body[data-mview="batch"] #mBatch{display:flex}
  .m-batch{flex:1;min-height:0;flex-direction:column}
  .m-batch .m-bar{display:flex}
  .mb-head{flex:none;display:flex;flex-direction:column;gap:7px;padding:2px 14px 10px}
  .mb-head .b-prog{height:6px}
  .mb-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 12px;align-content:start;scrollbar-width:none}
  .mb-t{position:relative;aspect-ratio:1;border-radius:7px;overflow:hidden;background:#222;animation:m-rise .45s var(--m-ease) both;animation-delay:calc(var(--i) * 25ms)}
  .mb-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .5s,opacity .5s}
  .mb-t.wait img{filter:brightness(.55)}
  .mb-t.work::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);background-size:250% 100%;animation:b-shine .9s linear infinite}
  .mb-t .ok{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#06210f;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .32s var(--m-spring)}
  .mb-t.done .ok{transform:scale(1)}
  .mb-t.err{outline:2px solid #E5484D;outline-offset:-2px}
  .mb-foot{flex:none;display:flex;flex-direction:column;gap:6px;padding:10px 14px calc(14px + env(safe-area-inset-bottom))}
  .m-big:disabled{opacity:.85}

  /* 카메라 */
  body[data-mview="camera"] .top,body[data-mview="camera"] #mHome,body[data-mview="camera"] .app,body[data-mview="camera"] #mBar,body[data-mview="camera"] #mPanes,body[data-mview="camera"] #mTabs{display:none!important}
  body[data-mview="camera"]{padding-top:0;background:#000}
  body[data-mview="camera"] #mCamera{display:block}
  .m-camera{position:fixed;inset:0;z-index:20;background:#000;overflow:hidden;touch-action:none}
  #camVideo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  #camCv{position:absolute;inset:0;width:100%;height:100%;transition:opacity .18s}
  #camCv.mirror{transform:scaleX(-1)}
  #camCv.swap{opacity:.35}
  .cam-frame{position:absolute;z-index:1;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 0 0 9999px rgba(0,0,0,.5);pointer-events:none;transition:all .35s var(--m-spring)}
  .cam-flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}
  .cam-top{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center}
  .cam-top .icon-btn{color:#fff}
  .cam-top .icon-btn.on{background:var(--gold);color:var(--ink)}
  .cam-tr{display:flex;gap:8px}
  .cam-timer{padding:6px 12px;border-radius:var(--r-pill);font-size:13px;font-variant-numeric:tabular-nums;color:#fff}
  .cam-timer::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#E5484D;margin-right:7px;vertical-align:1px;animation:cam-blink 1s steps(2) infinite}
  @keyframes cam-blink{50%{opacity:0}}
  .cam-look{position:absolute;z-index:3;left:0;right:0;top:40%;text-align:center;font-size:30px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5);opacity:0;pointer-events:none}
  .cam-look.show{animation:cam-look 1.1s var(--m-ease)}
  @keyframes cam-look{0%{opacity:0;transform:scale(.96)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
  .cam-bottom{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 0 calc(22px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(0,0,0,.45) 40%)}
  .cam-savevid{margin-bottom:2px}
  .cam-chips{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:4px 16px;scrollbar-width:none}
  .cam-chips::-webkit-scrollbar{display:none}
  .cam-chip{flex:none;border:0;font-size:12.5px;padding:7px 13px;border-radius:var(--r-pill);background:rgba(20,20,24,.55);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:all .3s var(--m-spring)}
  .cam-chip[aria-pressed="true"]{background:#fff;color:var(--ink);transform:scale(1.06)}
  .cam-modes{display:flex;gap:20px}
  .cam-modes button{border:0;background:none;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:4px;cursor:pointer}
  .cam-modes button[aria-pressed="true"]{color:var(--gold);font-weight:600}
  .cam-row{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px}
  .cam-recent{grid-column:1;justify-self:start;width:52px;height:52px;border-radius:13px;overflow:hidden;border:2px solid #fff;padding:0;background:#222;cursor:pointer}
  .cam-recent img{width:100%;height:100%;object-fit:cover;display:block}
  .cam-shutter{grid-column:2;width:78px;height:78px;border-radius:50%;border:4px solid #fff;background:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
  .cam-shutter i{width:62px;height:62px;border-radius:50%;background:#fff;transition:transform .18s var(--m-ease),border-radius .3s var(--m-ease),background .3s}
  .cam-shutter:active i{transform:scale(.86)}
  .cam-shutter.video i{background:#E5484D}
  .cam-shutter.rec i{background:#E5484D;border-radius:22%;transform:scale(.5)}
  .cam-fly{position:absolute;z-index:6;overflow:hidden;transform-origin:0 0;pointer-events:none}
  .cam-fly img{width:100%;height:100%;object-fit:cover}
  .toast{z-index:60}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .m-card,.m-rt,.m-lk{animation:none}
  .m-sheet,.m-ttl span{transition-duration:.12s}
}