/* simple/base.html 머리의 <style> 둘을 옮겨 왔다(2026-10-29). */
[x-cloak]{display:none !important}
/* 폰 목업(iframe) 안에서는 스크롤바 숨김 — 실제 폰 화면처럼 보이게 */
html.in-frame{scrollbar-width:none;-ms-overflow-style:none}
html.in-frame::-webkit-scrollbar{display:none}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overscroll-behavior-y: contain; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: var(--fs-body);
  background: var(--bg-muted);
  color: var(--fg-strong);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); }

.simple-header {
  background: var(--fg-strong);
  padding: 14px 20px;
  text-align: center;
}
.simple-header h1 {
  color: var(--bg-surface);
  font-size: var(--fs-heading);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.simple-header .agency-name {
  color: var(--accent-300);
  font-size: var(--fs-control);
  font-weight: 400;
  margin-top: 2px;
}

.simple-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 16px;
}

.simple-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.simple-card h2 {
  font-size: var(--fs-heading-sm);
  font-weight: 700;
  color: var(--fg-strong);
  margin-bottom: 16px;
  border-left: 4px solid var(--accent-500);
  padding-left: 10px;
}

.form-group {
  margin-bottom: 14px;
}
.form-group label {
  display: block;
  font-size: var(--fs-control);
  font-weight: 600;
  color: var(--fg-default);
  margin-bottom: 4px;
}
.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-body);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-soft-bg);
}

/* 🚨 **이 파일의 `.btn` 은 두 벌째다.** `simple/base.html` 은 `tokens.css` 와 이 파일만
   걸고 `components_core.css` 를 «안 싣는다» — 그래서 전역 `.btn`·입력칸 바닥이 여기
   닿지 않는다. 이름이 같으니 **값이 갈리면 다음 사람이 어느 쪽을 믿을지 모른다.**
   ⭐ 그래서 치수를 토큰으로 적는다. 언젠가 한 벌로 합칠 때 차이가 0이어야 안전하다.
   ⭐ 간편주문은 **항상 손가락**이다(선생님이 폰으로만 보신다). 전역이 `@media` 로 얻는
   터치 치수를 여기서는 조건 없이 기본값으로 쓴다. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ctl-h-touch);
  padding: 0 var(--space-8);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.btn:active { transform: scale(0.97); box-shadow: none; }
.btn-primary { background: var(--accent-600); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-700); color: var(--accent-fg); }
.btn-gray, .btn-secondary { background: var(--fg-muted); color: var(--accent-fg); }
.btn-gray:hover, .btn-secondary:hover { background: var(--fg-default); color: var(--accent-fg); }
.btn-outline { background: var(--bg-surface); color: var(--fg-strong); border: 1px solid var(--border-strong); }
.btn-outline:hover { background: var(--bg-subtle); }
/* 선택 항목 카드 — 안에 여러 줄이 들어가므로 «내용»이 높이를 정한다.
   `components_core.css` 의 같은 이름과 뜻이 같다(간편주문은 그 파일을 안 싣는다). */
.btn-card {
  height: auto; padding: var(--space-6) var(--space-7);
  justify-content: flex-start; text-align: left; white-space: normal;
}
.btn-block { display: block; width: 100%; }
.btn-red { background: var(--danger-500); color: var(--accent-fg); }
.btn-red:hover { background: var(--danger-fg); }
/* ⚠️ `--ctl-h-sm` 이 아니라 «touch» 다. 이 파일은 `components_core.css` 를 안 실어서
   폰 `@media` 재정의를 못 받는다 — 데스크톱 기본값 24px 이 그대로 나온다(실측). */
.btn-sm { height: var(--ctl-h-touch-sm); padding: 0 var(--ctl-pad-x-lg); font-size: var(--fs-label); }

/* 공용 입력 — 「인라인 style 복붙 대체」로 만들어 둔 부품인데 2026-09-09 까지 화면 45곳이
   안 쓰고 손으로 그리고 있었다. 그날 전부 이쪽으로 옮겼다.
   ⭐ 높이는 `padding` 으로 잡는다 — `textarea` 도 이 클래스를 쓰므로 고정 높이를 못 준다. */
.simple-input {
  /* 🚨 `height: auto` 를 빼지 마라. `components_core.css` 의 전역 바닥이
     `input { height: var(--ctl-h) }` 를 주는데, 이 부품은 높이를 «padding 으로» 만들기
     때문에(textarea 도 같은 클래스를 쓴다) 그 높이가 남으면 45px 이 28px 로 눌린다.
     2026-09-09 에 부품을 합치면서 실측으로 잡았다. */
  width: 100%; height: auto; padding: var(--space-5) var(--ctl-pad-x-lg); box-sizing: border-box;
  border: 1px solid var(--border-default); border-radius: 8px;
  font-size: var(--fs-body); font-family: inherit;
  background: var(--bg-surface); color: var(--fg-strong); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.simple-input:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
/* 표 «안»의 입력칸 — 한 행에 여러 칸이 들어가는 자리라 손가락 치수를 쓰면 표가 길어진다.
   ⚠️ 여기만 예외다. 다른 곳에서 쓰지 마라. */
.simple-input-sm {
  padding: var(--space-2) var(--space-3); border-radius: 6px;
  font-size: var(--fs-micro);
}
/* 44px 터치타깃 보장 (접근성 — 모바일 선생님 손끝) */
.simple-tap {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

.error-msg {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border-left: 4px solid var(--danger-500);
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 6px;
  font-size: var(--fs-control);
}

.success-msg {
  background: var(--success-bg);
  color: var(--success-fg);
  border-left: 4px solid var(--success-500);
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 6px;
  font-size: var(--fs-control);
}

.simple-footer {
  text-align: center;
  padding: 16px;
  font-size: var(--fs-micro);
  color: var(--fg-faint);
}

.simple-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.simple-nav a {
  padding: 8px 14px;
  background: var(--bg-muted);
  border-radius: 6px;
  font-size: var(--fs-control);
  color: var(--fg-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.simple-nav .nav-icon { display: inline-flex; align-items: center; }
.simple-nav .nav-icon svg { width: 17px; height: 17px; display: block; }
.simple-nav a:hover, .simple-nav a.active {
  background: var(--accent-500);
  color: var(--bg-surface);
}

@media (max-width: 640px) {
  .simple-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-surface);
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--border-subtle);
    padding: 8px 12px; z-index: 50;
    justify-content: space-around;
    margin-bottom: 0; gap: 0;
  }
  .simple-nav a {
    flex-direction: column; font-size: var(--fs-micro);
    padding: 6px 8px; gap: 2px; border-radius: 4px;
    background: transparent;
  }
  .simple-nav a .nav-icon svg { width: 21px; height: 21px; }
  .simple-nav a:hover, .simple-nav a.active {
    background: var(--accent-soft-bg); color: var(--accent-500);
  }
  .simple-container { padding: 12px 8px 80px 8px; }
  .simple-card { padding: 14px; }
}

/* 테이블 */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-control);
}
table.data-table th {
  background: var(--fg-default);
  color: var(--bg-muted);
  padding: 8px 10px;
  text-align: center;
  border: none;
  white-space: nowrap;
  font-weight: 600;
}
table.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bg-muted);
  vertical-align: middle;
  background: var(--bg-surface);
}
table.data-table tr:nth-child(even) td { background: var(--bg-subtle); }
table.data-table td.center { text-align: center; }
table.data-table td.right { text-align: right; }

/* 배지 */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-micro);
  border-radius: 10px;
  color: var(--bg-surface);
  font-weight: 500;
}
.badge-blue { background: var(--accent-500); }
.badge-orange { background: var(--teacher-copy-500); }
.badge-green { background: var(--success-500); }
.badge-gray { background: var(--fg-faint); }

/* 공지 게시판 (아코디언) */
.notice-board {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
}
.notice-row + .notice-row { border-top: 1px solid var(--bg-muted); }
.notice-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--fg-strong);
}
.notice-row-head:hover { background: var(--bg-subtle); }
.notice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-300);
}
.notice-dot-info    { background: var(--accent-300); }
.notice-dot-warning { background: var(--warning-500); }
.notice-dot-urgent  { background: var(--danger-500); }
.notice-row-title {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-row-clip { font-size: var(--fs-label); opacity: 0.6; flex-shrink: 0; }
.notice-row-date {
  font-size: var(--fs-label);
  color: var(--fg-faint);
  flex-shrink: 0;
}
.notice-row-chevron {
  color: var(--border-default);
  font-size: var(--fs-nano);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.notice-row-chevron.is-open { transform: rotate(180deg); }
.notice-row-body {
  padding: 4px 14px 16px 30px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--bg-muted);
}
.notice-row-content {
  font-size: var(--fs-control);
  line-height: 1.65;
  color: var(--fg-muted);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 10px 0;
}
.notice-row-meta {
  margin-top: 8px;
  font-size: var(--fs-micro);
  color: var(--fg-faint);
}
.notice-attachments {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.notice-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: var(--fs-label);
  color: var(--fg-default);
  text-decoration: none;
  font-weight: 500;
}
.notice-file:hover { background: var(--bg-subtle); color: var(--fg-strong); }
.notice-file-icon { font-size: var(--fs-nano); font-weight: 700; color: var(--fg-muted); background: var(--bg-muted); border-radius: 4px; padding: 1px 5px; }
.notice-file-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-file-size { color: var(--fg-faint); font-size: var(--fs-micro); }

/* ============================================================
   가이드 페이지 (guide.html, guide_computer.html)
   ============================================================ */
.guide-container { max-width: 640px; margin: 0 auto; padding: 20px 16px 60px; }

/* 목차 */
.toc { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:10px; padding:20px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.toc h2 { font-size:var(--fs-body-lg); font-weight:700; margin-bottom:12px; color:var(--fg-strong); border:none; padding:0; }
.toc a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--fg-default); font-size:var(--fs-body); font-weight:500; }
.toc a:hover { background:var(--bg-muted); }
.toc .sn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--accent-500); color:var(--bg-surface); font-size:var(--fs-control); font-weight:700; flex-shrink:0; }

/* 가이드 섹션 */
.gs { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:10px; padding:24px 20px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.gs h2 { font-size:var(--fs-heading-sm); font-weight:700; color:var(--fg-strong); margin-bottom:16px; display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:2px solid var(--border-subtle); border-left:none; padding-left:0; }
.gs h2 .n { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--accent-500); color:var(--bg-surface); font-size:var(--fs-body-lg); font-weight:700; flex-shrink:0; }
.gs h3 { font-size:var(--fs-body); font-weight:700; margin:16px 0 8px; color:var(--fg-strong); }

/* 실제 화면 재현 */
.screen { border:2px solid var(--border-subtle); border-radius:12px; overflow:hidden; margin:16px 0; background:var(--bg-muted); }
.screen .s-header { background:var(--fg-strong); padding:10px 16px; text-align:center; }
.screen .s-header h1 { color:var(--bg-surface); font-size:var(--fs-body-lg); font-weight:700; margin:0; }
.screen .s-header .ag { color:var(--accent-300); font-size:var(--fs-micro); margin-top:2px; }
.screen .s-body { padding:14px; }

/* 설명 */
.desc { font-size:var(--fs-control); color:var(--fg-muted); line-height:1.6; margin:8px 0; }
.steps { list-style:none; padding:0; }
.steps li { padding:10px 0 10px 32px; position:relative; font-size:var(--fs-body); line-height:1.6; border-left:2px solid var(--border-subtle); margin-left:10px; }
.steps li::before { content:attr(data-n); position:absolute; left:-11px; top:10px; width:20px; height:20px; border-radius:50%; background:var(--accent-500); color:var(--bg-surface); font-size:var(--fs-micro); font-weight:700; display:flex; align-items:center; justify-content:center; }
.steps li:last-child { border-left-color:transparent; }

.tip { background:var(--accent-soft-bg); border:1px solid var(--accent-300); border-radius:8px; padding:12px 14px; margin:12px 0; font-size:var(--fs-control); color:var(--accent-700); line-height:1.6; }
.warn { background:var(--danger-bg); border:1px solid #fecaca; border-radius:8px; padding:12px 14px; margin:12px 0; font-size:var(--fs-control); color:var(--danger-fg); line-height:1.6; }
.flow-arrow { text-align:center; color:var(--fg-faint); font-size:var(--fs-glyph); margin:4px 0; }
.back-top { display:block; text-align:center; padding:10px; font-size:var(--fs-control); color:var(--fg-muted); text-decoration:none; margin-top:8px; }

/* 화살표 주석 */
.callout { position:relative; margin:6px 0; padding:8px 12px 8px 28px; background:var(--warning-bg); border:1px solid #fde68a; border-radius:6px; font-size:var(--fs-label); color:var(--warning-fg); line-height:1.5; }
.callout::before { content:'▸'; position:absolute; left:8px; top:8px; }

/* 입력 포커스 링 공통 — 배송지·주문표 등 인라인 input/select 에도 일관 적용 */
.delivery-box input:focus, .delivery-box select:focus,
.order-row-wrap input:focus, .order-row-wrap select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}

/* 모션 최소화 선호 — 스프링/트랜스폼 대신 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
  .simple-nav a, .btn, .added-item-qty button { transition: none; }
  .btn:hover { transform: none; }
  .btn:active { transform: none; }
}

/* 투명 최소화 선호 — 반투명 재질을 불투명으로 (apple §14) */
@media (prefers-reduced-transparency: reduce) {
  .simple-nav {
    background: var(--bg-surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}