/* 편의 모드 — 모바일 앱 화면을 기준으로 잡고, 데스크톱에서는 가운데 한 컬럼으로 둔다.
   터치 대상은 최소 44px, 카드 하나에 단계 하나만 담아 위에서 아래로 읽히게 했다. */
:root{
  --bg:#101116; --card:#1b1d25; --card2:#232631; --line:#2f333e;
  --fg:#eef0f5; --muted:#98a0b0; --accent:#6ea8fe; --accent2:#3d7ff0;
  --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
  --r:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; background:var(--bg); color:var(--fg)}
body.sm{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Noto Sans KR",sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
h2{margin:0; font-size:15px; font-weight:700; letter-spacing:.01em}
.sub{margin:4px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45}

/* ---------- 상단 ---------- */
.sm-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:rgba(16,17,22,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.sm-brand{font-weight:800; letter-spacing:.02em; font-size:15px}
.sm-brand span{font-weight:400; color:var(--muted); margin-left:6px; font-size:12.5px}
.sm-topright{margin-left:auto; display:flex; align-items:center; gap:8px}
.langsel{display:flex; gap:4px}
.langsel .lang{
  padding:4px 8px; font-size:16px; line-height:1.1; border-radius:9px;
  border:1px solid var(--line); background:var(--card2); cursor:pointer;
  filter:grayscale(.7) opacity(.6);
}
.langsel .lang.active{filter:none; border-color:var(--accent); background:#232c40}

/* ---------- 본문 ---------- */
.sm-page{max-width:520px; margin:0 auto; padding:14px 16px 40px; display:flex; flex-direction:column; gap:14px}

/* 세그먼트 (속도/품질) */
/* display 를 주면 [hidden] 이 안 먹는다 — 방향 버튼을 숨길 수 있게 따로 눌러 준다 */
.seg[hidden]{display:none}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px;
     background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
.seg-btn{
  display:flex; align-items:center; justify-content:center; padding:11px 8px;
  border:1px solid transparent; border-radius:13px; background:transparent;
  color:var(--muted); cursor:pointer; font:inherit; font-size:14.5px; font-weight:700;
  min-height:46px;
}
.seg-btn.active{background:var(--accent2); border-color:var(--accent2); color:#fff}

/* 카드 */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.cardhead{display:flex; align-items:center; gap:10px}
.cardhead h2{flex:1}

/* 마스크 가로 스크롤 */
/* 마스크는 전부 한눈에 보이도록 여러 줄 그리드로 깐다 (가로 스크롤 없음).
   폭에 맞춰 칸 수가 자동으로 바뀐다 — 모바일 4칸, 데스크톱 5~6칸. */
.maskrow{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));
  gap:10px; margin-top:12px;
}
.charrow.dragging{cursor:grabbing}
.charrow.dragging .charitem{pointer-events:none}
.maskitem{
  cursor:pointer;
  border:2px solid transparent; border-radius:14px; overflow:hidden; background:#000;
  display:flex; flex-direction:column;
}
.maskitem img{width:100%; height:80px; object-fit:contain; display:block}
.maskitem .cap{
  font-size:10px; line-height:1.25; padding:5px 5px 6px; color:#cfd4de; background:#000;
  text-align:center; white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  flex:1;   /* 줄 수가 달라도 칸 높이는 서로 맞춘다 */
}
.maskitem.sel{border-color:var(--accent)}
.maskitem.none{background:var(--card2)}
.maskitem.none .glyph{
  width:100%; height:80px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--muted);
}
.maskitem.none .cap{background:var(--card2)}
.maskitem.none.sel .glyph{color:var(--accent)}

/* 고른 마스크를 카드 폭에 맞춰 크게 보여 준다 — 이걸 보고 설명을 쓰게 된다. */
.maskpreview{
  margin:12px 0 0; padding:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:#000;
}
.maskpreview[hidden]{display:none}
.maskpreview img{width:100%; display:block; aspect-ratio:1/1; object-fit:contain}
.maskpreview figcaption{
  padding:8px 12px; font-size:12.5px; color:var(--muted);
  background:var(--card2); border-top:1px solid var(--line);
}

textarea{
  width:100%; margin-top:12px; padding:12px 13px; font:inherit; font-size:14.5px;
  background:var(--card2); color:var(--fg); border:1px solid var(--line);
  border-radius:13px; resize:vertical; line-height:1.5;
}
textarea:focus{outline:none; border-color:var(--accent)}

/* CTA */
.cta{
  width:100%; min-height:56px; border:none; border-radius:16px; cursor:pointer;
  font:inherit; font-size:17px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#4a8bf5,#3d7ff0 55%,#5b6ef0);
  box-shadow:0 8px 22px rgba(61,127,240,.28);
}
.cta:active{transform:translateY(1px)}
.cta:disabled{opacity:.55; box-shadow:none; cursor:default}
/* 랜덤 생성 — 기본 생성과 헷갈리지 않게 연보라로 낮춰 둔다 */
.cta.random{
  min-height:50px; font-size:15.5px; margin-top:-4px;
  background:linear-gradient(135deg,#b9a4f5,#a78bfa 55%,#c4a6f7);
  color:#20143c; box-shadow:0 6px 18px rgba(167,139,250,.26);
}
.ctahint{margin:-6px 0 0; text-align:center; font-size:11.5px; color:var(--muted)}

.ghost{
  padding:8px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--card2); color:var(--fg); font:inherit; font-size:12.5px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.ghost:hover{border-color:var(--accent)}
.btnrow{display:flex; gap:8px; margin-top:12px}
.btnrow .ghost{flex:1; text-align:center; min-height:42px; line-height:26px}

/* 결과 */
.resultimg{
  margin-top:12px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; min-height:200px;
  touch-action:none; cursor:grab;
}
.resultimg img{
  width:100%; display:block; transform-origin:center center; will-change:transform;
}
.checker{
  background-image:
    linear-gradient(45deg,#3a3d47 25%,transparent 25%),
    linear-gradient(-45deg,#3a3d47 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#3a3d47 75%),
    linear-gradient(-45deg,transparent 75%,#3a3d47 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0;
  background-color:#2b2e37;
}

/* 리브리 스테이지 */
.stagebox{
  margin-top:12px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:#808080; aspect-ratio:1/1;
}
.stagebox canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
.stagebox canvas.drag{cursor:grabbing}
.charrow{display:flex; gap:8px; margin-top:10px; padding-bottom:6px; overflow-x:auto}
.charrow::-webkit-scrollbar{height:5px}
.charrow::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.charitem{
  flex:0 0 auto; width:52px; height:52px; border-radius:12px; cursor:pointer;
  border:2px solid transparent; background:var(--card2); padding:3px;
}
.charitem img{width:100%; height:100%; object-fit:contain; display:block}
.charitem.sel{border-color:var(--accent)}
.slider{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:12.5px; color:var(--muted)}
.slider span{flex:0 0 auto}
.slider input{flex:1; accent-color:var(--accent); height:26px}
.slider b{flex:0 0 46px; text-align:right; color:var(--fg); font-variant-numeric:tabular-nums}

/* 생성 중 시트 */
.sheet{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(10,11,15,.72); backdrop-filter:blur(6px); padding:24px;
}
.sheet[hidden]{display:none}
.sheet-card{
  width:100%; max-width:330px; padding:26px 24px; border-radius:20px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
}
.sheet-spin{
  width:36px; height:36px; border-radius:50%; margin-bottom:4px;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:smspin .8s linear infinite;
}
@keyframes smspin{to{transform:rotate(360deg)}}
.sheet-title{font-size:16px; font-weight:700}
.sheet-sub{font-size:12.5px; color:var(--muted); min-height:1em}
.sheet-elapsed{font-size:12.5px; color:var(--accent); font-variant-numeric:tabular-nums}
.sheet-bar{width:100%; height:6px; border-radius:3px; background:var(--card2); overflow:hidden; margin-top:6px}
.sheet-bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s}
.sheet-bar.indeterminate i{width:35%; animation:smslide 1.1s ease-in-out infinite}
@keyframes smslide{0%{margin-left:-35%}100%{margin-left:100%}}

/* 토스트 */
.toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:60;
  background:var(--card2); border:1px solid var(--line); border-radius:12px;
  padding:11px 16px; font-size:13px; max-width:calc(100% - 32px);
  box-shadow:0 10px 30px rgba(0,0,0,.5); display:flex; align-items:center; gap:12px;
}
.toast[hidden]{display:none}
.toast.err{border-color:var(--err); color:var(--err)}

@media (max-width:420px){
  .sm-brand span{display:none}
  .sm-page{padding-left:12px; padding-right:12px}
}

/* ---------- 모드 토글 (편의 / 전문가) — 두 화면 상단에 같은 모양으로 둔다 ---------- */
.modetoggle{
  display:flex; gap:3px; padding:3px; border-radius:999px;
  background:var(--panel2, var(--card2)); border:1px solid var(--line);
}
.modetoggle .mt{
  padding:5px 13px; border-radius:999px; font-size:12px; font-weight:600;
  color:var(--muted); text-decoration:none; white-space:nowrap; line-height:1.5;
}
.modetoggle .mt:hover{color:var(--fg)}
.modetoggle .mt.active{background:var(--accent2); color:#fff}

/* ---------- 로그인 (사내 LDAP) ---------- */
.loginwrap{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(110,168,254,.16), transparent 60%),
    radial-gradient(760px 420px at 90% 110%, rgba(167,139,250,.13), transparent 60%);
}
.loginwrap[hidden]{display:none}
.logincard{
  width:100%; max-width:352px; padding:30px 26px 24px;
  border-radius:20px; border:1px solid var(--line);
  background:var(--panel, var(--card)); box-shadow:0 20px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:12px;
}
.loginbrand{font-size:26px; font-weight:800; letter-spacing:.06em; text-align:center}
.loginsub{
  margin:-8px 0 8px; text-align:center; font-size:12.5px; color:var(--muted);
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.loginfield{display:flex; flex-direction:column; gap:5px}
.loginfield span{font-size:11.5px; color:var(--muted)}
.loginfield input{
  width:100%; padding:11px 13px; font:inherit; font-size:14.5px;
  background:var(--panel2, var(--card2)); color:var(--fg);
  border:1px solid var(--line); border-radius:11px;
}
.loginfield input:focus{outline:none; border-color:var(--accent)}
.logincard .cta{
  width:100%; min-height:48px; margin-top:6px; border:none; border-radius:13px;
  font:inherit; font-size:15px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#4a8bf5,#3d7ff0 55%,#5b6ef0);
}
.logincard .cta:disabled{opacity:.6; cursor:default}
.loginmsg{margin:2px 0 0; min-height:1.2em; font-size:12px; color:var(--muted); text-align:center}
.loginmsg.err{color:var(--err)}
.loginnote{margin:2px 0 0; font-size:11px; color:var(--muted); text-align:center; opacity:.8}

.userchip{
  padding:5px 11px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel2, var(--card2)); color:var(--muted);
  font:inherit; font-size:11.5px; cursor:pointer; white-space:nowrap;
}
.userchip:hover{color:var(--fg); border-color:var(--accent)}
.userchip[hidden]{display:none}

.logincard{position:relative}
.langsel.loginlang{position:absolute; top:14px; right:14px}
.langsel.loginlang .lang{padding:3px 7px; font-size:14px}


/* 카드 머리의 아이콘 버튼 묶음 (좌우반전 + 저장) */
.headbtns { display: flex; align-items: center; gap: 6px; }
/* 눌린 상태(반전 중)를 색으로 알려 준다 */
.headbtns .ghost[aria-pressed="true"] {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}