/* 제때 — 화면 껍데기와 공통 부품
 *
 * PC  왼쪽 메뉴 + 오른쪽 작업 영역
 * 폰  위쪽 띠 + 아래 탭 5개
 */

/* ── 복제 방지 (guard.js와 짝) ── */
#guardWm{
  position:fixed; inset:-10%; z-index:9990; pointer-events:none;
  display:flex; flex-wrap:wrap; gap:70px 90px; align-content:space-between;
  overflow:hidden; user-select:none;
}
#guardWm span{
  transform:rotate(-24deg);
  font-size:12px; white-space:nowrap;
  color:rgba(55,65,49,.05);           /* 거슬리지 않되 캡처엔 남는 농도 */
}
#guardToast{
  position:fixed; left:50%; bottom:76px; transform:translateX(-50%) translateY(8px);
  z-index:9995; background:var(--band); color:#fff;
  padding:9px 16px; border-radius:20px; font-size:12.5px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
#guardToast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* 인쇄하면 내용 대신 안내만 나온다 */
@media print{
  body > *{display:none !important}
  body::after{
    content:"이 화면은 인쇄가 허용되지 않습니다.";
    display:block; padding:40px; font-size:16px;
  }
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--tx);
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:var(--bd); border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ══ 전체 틀 ══ */
.shell{display:flex; min-height:100vh}

/* ── 왼쪽 메뉴 ── */
.rail{
  width:var(--rail); flex:0 0 var(--rail);
  background:var(--band); color:var(--tx-on-band);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.rail-top{padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.rail-logo{display:block; height:62px; width:auto; margin:0 0 4px -4px}
.rail-logo-txt{
  font-size:17px; font-weight:800; letter-spacing:.16em; color:#fff;
}
.rail-tag{font-size:10.5px; color:var(--tx-on-band-2); margin-top:5px; letter-spacing:.02em}

.rail-nav{flex:1; min-height:0; overflow-y:auto; padding:10px 8px 18px}
.rail-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}
.nav-grp{
  font-size:10px; font-weight:800; letter-spacing:.16em;
  color:#6f7868; padding:14px 8px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 9px; border:0; background:none; border-radius:var(--r-sm);
  font-size:13px; color:#b3bbaa; cursor:pointer; text-align:left;
  transition:background .12s, color .12s;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#dfe4d9}
.nav-item.on{background:var(--gold); color:#26301f; font-weight:700}
.nav-item .ic{width:18px; height:18px; flex:0 0 18px; display:inline-flex; align-items:center; justify-content:center}

/* 인라인 SVG 아이콘 — 굵기·색은 여기서 한 번에. currentColor 라 글자색을 따라간다.
 * 아이콘을 담는 칸은 전부 여기로 모아, 채움 없이 선으로만 그린다. */
.ic svg, .ds-ic svg, .dq-ic svg, .dc-ic svg, .home-ic svg{
  width:100%; height:100%; display:block; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.nav-item .badge{
  margin-left:auto; background:rgba(255,255,255,.14); color:#cdd4c5;
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:9px;
}
.nav-item.on .badge{background:rgba(0,0,0,.16); color:#26301f}

.rail-me{
  border-top:1px solid rgba(255,255,255,.08); padding:12px 16px;
  display:flex; align-items:center; gap:9px;
}
.avatar{
  width:28px; height:28px; border-radius:50%; flex:0 0 28px;
  background:var(--band-2); color:#b3bbaa;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.me-name{font-size:12px; color:#dfe4d9; font-weight:600; line-height:1.3}
.me-sub{font-size:10.5px; color:var(--tx-on-band-2); line-height:1.3}

.head-logo{display:none}

/* ── 오른쪽 작업 영역 ── */
.work{flex:1; min-width:0; display:flex; flex-direction:column}

.head{
  height:var(--head); flex:0 0 var(--head);
  background:var(--card); border-bottom:1px solid var(--bd);
  display:flex; align-items:center; gap:14px; padding:0 22px;
  position:sticky; top:0; z-index:20;
}
.head h1{font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0}
.head-sp{flex:1}
.head-back{
  border:0; background:none; cursor:pointer; color:var(--tx2); flex:0 0 auto;
  width:32px; height:32px; border-radius:var(--r-sm); margin-left:-6px;
  display:inline-flex; align-items:center; justify-content:center;
}
.head-back[hidden]{display:none}   /* display 지정이 hidden 속성을 덮어써서 명시적으로 숨긴다 */
.head-back:hover{background:var(--bg); color:var(--tx)}
.head-back svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.btn{
  border:1px solid var(--bd); background:var(--card); color:var(--tx);
  border-radius:var(--r-sm); padding:7px 13px; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:border-color .12s, background .12s;
}
.btn:hover{border-color:var(--green)}
.btn-primary{background:var(--band); border-color:var(--band); color:#fff}
.btn-primary:hover{background:var(--band-2); border-color:var(--band-2)}

.page-body{flex:1; padding:20px 22px 40px; max-width:1180px; width:100%}

/* ── 화면 갈아끼우는 자리 ── */
.page{display:none}
.page.on{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .page.on{animation:none}
  *{transition:none !important}
}

/* ── 공통 부품 ── */
.card{background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:14px 16px}

.chip{
  display:inline-block; font-size:11px; font-weight:700; white-space:nowrap;
  padding:3px 8px; border-radius:20px; background:var(--chip); color:var(--tx);
}
.chip-danger{background:var(--danger-bg); color:var(--danger)}
.chip-warn{background:var(--warn-bg); color:var(--warn)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:18px}
.stat{background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:12px 14px}
.stat .n{font-family:var(--font-num); font-size:21px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.stat .l{font-size:11px; color:var(--tx2); margin-top:6px}
.stat.danger .n{color:var(--danger)}

/* 로고에서 가져온 「⋯」 꼬리 — 단락 머리 */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.18em; color:var(--green);
  margin:0 0 12px;
}
.eyebrow::after{
  content:"⋯"; flex:0 1 190px; color:var(--gold); font-size:13px; line-height:1;
  text-align:right; opacity:.9;
  /* 선이 왼쪽에서 뻗어 나오다 점 세 개로 끝난다 — 로고의 꼬리와 같은 모양 */
  background:linear-gradient(var(--gold),var(--gold)) left center / calc(100% - 17px) 1px no-repeat;
}

/* 빈 화면 안내 */
.empty{
  text-align:center; padding:56px 20px; color:var(--tx2);
}
.empty .big{font-size:26px; margin-bottom:10px; opacity:.5}
.empty h2{font-size:15px; font-weight:700; color:var(--tx); margin-bottom:6px}
.empty p{font-size:13px; line-height:1.7; max-width:380px; margin:0 auto}

/* ── 홈 대시보드 ── */
.dash-hi{margin-bottom:16px}
.dash-hi h2{font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--tx)}
.dash-hi p{font-size:13px; color:var(--tx2); margin-top:5px}

.dash-search{
  display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--bd); border-radius:12px; padding:8px 8px 8px 14px; margin-bottom:16px;
  box-shadow:0 2px 10px rgba(28,35,26,.04); transition:border-color .12s, box-shadow .12s;
}
.dash-search:focus-within{border-color:var(--green); box-shadow:0 0 0 3px var(--gold-soft)}
.dash-search .ds-ic{width:20px; height:20px; flex:0 0 20px; color:var(--tx3); display:inline-flex}
.dash-search input{flex:1; min-width:0; border:0; background:none; outline:none; font-size:15px; color:var(--tx); padding:6px 0}
.dash-search .ds-go{padding:9px 18px; font-size:13px; border-radius:8px; white-space:nowrap}

.dash-quick{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.dq{
  display:inline-flex; align-items:center; gap:7px; background:var(--card);
  border:1px solid var(--bd); border-radius:20px; padding:8px 14px 8px 11px;
  font-size:12.5px; font-weight:600; color:var(--tx); cursor:pointer; transition:border-color .12s;
}
.dq:hover{border-color:var(--green)}
.dq-ic{width:16px; height:16px; flex:0 0 16px; color:var(--green); display:inline-flex}

.dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dash-notice{grid-column:1 / -1}
@media (max-width:720px){ .dash-grid{grid-template-columns:1fr} }
.dash-card{background:var(--card); border:1px solid var(--bd); border-radius:var(--r); overflow:hidden}
.dc-head{
  display:flex; align-items:center; gap:8px; padding:13px 15px; border-bottom:1px solid var(--bd-soft);
  font-size:13px; font-weight:700; color:var(--tx);
}
.dc-ic{width:17px; height:17px; flex:0 0 17px; color:var(--green); display:inline-flex}
.dc-more{margin-left:auto; border:0; background:none; color:var(--gold); font-weight:700; font-size:12px; cursor:pointer; padding:2px 4px}
.dc-more:hover{text-decoration:underline}
.dc-body{padding:6px 8px}
.dc-row{
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:9px; border-radius:var(--r-sm);
}
.dc-row:hover{background:var(--bg)}
.dc-nm{font-size:13.5px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dc-sub{font-size:11.5px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dc-pin{background:var(--warn-bg); color:var(--warn); font-size:9.5px; font-weight:800; padding:1px 5px; border-radius:8px}
.dc-empty{padding:22px 10px; text-align:center; font-size:12px; color:var(--tx3); line-height:1.6}

/* ── 더보기 (폰 전체 메뉴) ── */
.more-list{display:flex; flex-direction:column; gap:6px; max-width:560px}
.more-grp{font-size:10px; font-weight:800; letter-spacing:.16em; color:var(--tx3); padding:14px 4px 4px}
.more-row{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm);
  padding:13px 14px; cursor:pointer; text-align:left; color:var(--tx); font-size:14px; font-weight:600;
  transition:border-color .12s;
}
.more-row:hover{border-color:var(--green)}
.more-row .ic{width:20px; height:20px; flex:0 0 20px; color:var(--green); display:inline-flex; align-items:center; justify-content:center}
.more-arr{margin-left:auto; color:var(--tx3); font-size:19px; line-height:1}

/* ── 폰 ── */
.tabbar{display:none}
@media (max-width:880px){
  .rail{display:none}
  .work{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  .head{
    padding:0 15px; gap:11px;
    background:var(--band); border-bottom-color:var(--band);
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .head h1{color:#fff}
  .head-logo{display:block; height:34px; width:auto; margin-left:-4px}
  .head .btn{background:transparent; border-color:rgba(255,255,255,.28); color:#e6e9e2}
  .head .btn:hover{border-color:rgba(255,255,255,.55)}
  .head-back{color:#e6e9e2}
  .head-back:hover{background:rgba(255,255,255,.1); color:#fff}
  .page-body{padding:16px 15px 30px}

  .tabbar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:var(--card); border-top:1px solid var(--bd);
    padding:7px 0 calc(7px + env(safe-area-inset-bottom));
  }
  .tab{
    border:0; background:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10px; color:var(--tx2); padding:2px 0;
  }
  .tab .ic{width:22px; height:22px; opacity:.62; display:inline-flex; align-items:center; justify-content:center}
  .tab.on{color:var(--green); font-weight:700}
  .tab.on .ic{opacity:1}
}