/* ============================================================
   UI 매뉴얼 (ui-manual.php) 전용 스타일
   썸네일 크기를 바꾸려면 --shot 값만 조정하면 됩니다.
   ============================================================ */

:root{
  --shot:196px;   /* 썸네일 가로 (세로는 9:16 자동) */
  --bz:9px;       /* 베젤 여백 */
  --bzb:18px;     /* 베젤 아래쪽(턱) 여백 */
  --bzr:19px;     /* 베젤 라운드 */
  --pad:26px;     /* 카드 안쪽 여백 */
}

/* ── 페이지 헤드 ─────────────────────────────────── */
.head{position:relative;padding:52px 0 28px;overflow:hidden}
.head::before{
  content:"";position:absolute;width:640px;height:440px;left:-150px;top:-230px;
  border-radius:50%;filter:blur(90px);pointer-events:none;
  background:radial-gradient(circle,rgba(107,19,245,.45),transparent 70%);
}
.head .wrap{position:relative;z-index:1}
.head h1{font-size:40px;line-height:1.12;letter-spacing:-.03em;font-weight:700;margin-top:14px}
.head p{color:var(--ink2);font-size:15.5px;margin-top:13px;max-width:600px;line-height:1.7}

/* ── 필터 바 (스크롤 시 상단 고정) ───────────────── */
.filterwrap{
  position:sticky;top:0;z-index:40;background:rgba(28,22,36,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.filter{max-width:var(--max);margin:0 auto;padding:13px 32px;display:flex;gap:7px;flex-wrap:wrap}
.filter button{
  border:1px solid var(--line2);background:transparent;color:var(--ink2);
  padding:8px 15px;border-radius:9999px;font-size:13.5px;cursor:pointer;
  font-family:inherit;transition:.16s;
}
.filter button:hover{color:var(--ink);border-color:var(--violet)}
.filter button.on{background:var(--ink);border-color:var(--ink);color:var(--canvas);font-weight:700}

/* ── 항목 카드 ───────────────────────────────────── */
.list{
  max-width:var(--max);margin:0 auto;padding:26px 32px 72px;
  display:flex;flex-direction:column;gap:14px;
}
.card{
  display:flex;gap:24px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:var(--pad);position:relative;transition:.16s;margin:0;
}
.card:hover{border-color:var(--line2)}

/* 흰 배경 스크린샷을 장비 베젤로 액자화 */
.device{
  flex:0 0 auto;background:var(--bezel);border:1px solid var(--line2);
  border-radius:var(--bzr);padding:var(--bz) var(--bz) var(--bzb);
  align-self:flex-start;position:relative;
}
.device .chin{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:8px;letter-spacing:.2em;color:#6b6478;font-weight:700;
}
.screen{
  width:var(--shot);aspect-ratio:9/16;background:#fff;
  border-radius:calc(var(--bzr) - 7px);overflow:hidden;position:relative;
  display:flex;cursor:zoom-in;
}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.zoom{
  position:absolute;right:5px;bottom:5px;background:rgba(15,11,22,.78);color:#fff;
  font-size:10px;font-weight:700;padding:4px 7px;border-radius:6px;pointer-events:none;
}

/* ── 본문 ────────────────────────────────────────── */
.body{flex:1;min-width:0;display:flex;flex-direction:column}
.meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.badge{font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;border:1px solid}
.step{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--ink3)}
.title{font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.32}
.desc{color:var(--ink2);font-size:14.5px;margin-top:10px;white-space:pre-line;line-height:1.75}
.notes{
  list-style:none;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px;
}
.notes li{color:var(--ink3);font-size:12.5px;line-height:1.65;padding-left:12px;position:relative}
.notes li::before{content:"–";position:absolute;left:0;color:var(--green)}

/* ── 편집 미리보기 UI ────────────────────────────── */
.edit-btn{
  position:absolute;top:16px;right:16px;background:var(--violet);color:#1c1624;
  border:none;border-radius:8px;padding:7px 13px;font-size:12.5px;cursor:pointer;
  font-family:inherit;font-weight:700;
}
.edit-btn:hover{background:#a37eff}
.f{
  width:100%;background:var(--canvas);border:1px solid var(--line2);color:var(--ink);
  border-radius:9px;padding:11px 13px;font-family:inherit;font-size:14.5px;line-height:1.7;
}
input.f{font-size:19px;font-weight:700;letter-spacing:-.02em}
textarea.f{margin-top:5px;resize:vertical}
.ta1{min-height:110px}
.ta2{min-height:80px;font-size:13px}
.flabel{font-size:11.5px;color:var(--ink3);font-weight:700;margin-top:12px;display:block}
.f:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.editrow{margin-top:14px;display:flex;gap:8px}
.editrow button{
  border:none;border-radius:11px;padding:10px 20px;font-size:13.5px;
  cursor:pointer;font-family:inherit;font-weight:700;
}
.save{background:var(--green);color:#0d1a15}
.save:hover{background:var(--green-d)}
.cancel{background:transparent;color:var(--ink2);border:1px solid var(--line2)}
.replace{
  position:absolute;left:5px;right:5px;bottom:5px;background:rgba(15,11,22,.94);
  border:1px solid var(--line2);color:var(--ink);border-radius:7px;padding:7px 4px;
  font-size:11px;cursor:pointer;font-family:inherit;font-weight:700;z-index:2;
}

/* ── 확대 보기 ───────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:100;background:rgba(10,7,16,.95);display:none;
  align-items:center;justify-content:center;padding:20px;cursor:zoom-out;
}
.lb.show{display:flex}
.lb img{
  max-width:min(94vw,480px);max-height:88vh;border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.lb .x{
  position:absolute;top:16px;right:20px;color:var(--ink);font-size:26px;
  background:none;border:none;cursor:pointer;line-height:1;
}
.lb .cap{
  position:absolute;bottom:16px;left:0;right:0;text-align:center;
  color:var(--ink2);font-size:13.5px;padding:0 20px;
}

/* ── 모바일: 세로로 쌓지 않고 썸네일만 축소 ──────── */
@media (max-width:820px){
  :root{--shot:112px;--bz:5px;--bzb:5px;--bzr:12px;--pad:16px}
  .head{padding:36px 0 20px}
  .head h1{font-size:27px}
  .head p{font-size:14.5px}
  .filter{padding:11px 18px}
  .list{padding:20px 18px 56px;gap:12px}
  .card{gap:14px}
  .device .chin{display:none}
  .title{font-size:16.5px}
  .desc{font-size:13.5px;margin-top:8px}
  .notes{margin-top:10px;padding-top:9px}
  .notes li{font-size:12px}
  .zoom{font-size:9px;padding:3px 5px}
  .meta{gap:7px;margin-bottom:7px}
  .badge{font-size:10px;padding:3px 7px}
  .step{font-size:10.5px}
  .adminstate{padding:0 18px}
  .edit-btn{position:static;align-self:flex-start;margin-bottom:9px}
}
@media (max-width:400px){
  :root{--shot:96px}
  .title{font-size:15.5px}
}

/* ── 편집 오류 · 저장 완료 표시 ─────────────────── */
.editerr{
  margin-top:12px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.65;
  background:rgba(255,138,92,.09);border:1px solid rgba(255,138,92,.4);color:#ffb392;
}
.savedtip{
  position:absolute;top:16px;right:16px;z-index:5;
  background:var(--green);color:#0d1a15;border-radius:9px;
  padding:7px 14px;font-size:12.5px;font-weight:700;
  animation:sfade 1.8s ease forwards;
}
@keyframes sfade{
  0%{opacity:0;transform:translateY(-6px)}
  12%{opacity:1;transform:none}
  75%{opacity:1}
  100%{opacity:0}
}
.save:disabled{opacity:.55;cursor:progress}
@media (prefers-reduced-motion:reduce){ .savedtip{animation:none} }