@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   미꽃(Mikkot) — custom.css
   빈티지 한지 톤앤매너 : 크라프트지 · 미색 메모지 · 세이지 데스크 · 올리브 포인트
   포인트컬러는 reset.css 의 --point-color01 / 02 / 03 을 사용한다.
══════════════════════════════════════════════════════════════ */

:root{
  /* ── 포인트 (reset.css 토큰 연결) ── */
  --mk-point:     var(--point-color01);   /* #6f7d4e 올리브 */
  --mk-point-deep:var(--point-color02);   /* #5c6a3f 딥 올리브 */
  --mk-desk:      var(--point-color03);   /* #47563f 세이지 데스크 */

  /* ── 지류(紙) ── */
  --mk-kraft:  #f2ecdd;   /* 히어로 · 헤더 · 패널 : 미색 크라프트지 */
  --mk-kraft-2:#f2ecdd;   /* 헤더 */
  --mk-kraft-3:#f2ecdd;   /* 조절 패널 */
  --mk-paper:  #faf4e4;   /* 메모지(로그인 카드) */
  --mk-sheet:  #fff;      /* A4 시트 · 샘플 메모 */

  /* ── 먹 · 보조 텍스트 (명도대비 AA 확보) ── */
  --mk-ink:   #43402c;
  --mk-ink-2: #3f3a2c;
  --mk-sub:   #64604a;
  --mk-sub-2: #655c42;
  --mk-mute:  #6b6047;
  --mk-mute-2:#6a6450;
  --mk-hint:  #756a50;

  --mk-line:   rgba(92,82,55,.22);
  --mk-line-2: rgba(92,82,55,.45);
  --mk-line-3: rgba(92,82,55,.28);
  --mk-line-input:#8f8877;   /* 흰 배경 위 입력칸 테두리 (명도대비 3:1 확보) */

  --mk-ok:    #3f6650;
  --mk-danger:#a04a34;

  --brand-font:'Mikkot', sans-serif;      /* ← 미꽃체 */
  --radius:0;
}

/* reset.css 에 없는 기본값 보강 */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--mk-kraft);
  color:var(--mk-ink-2);
  font-size:16px;
  line-height:1.65;
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}
.hidden{ display:none !important; }
.svg-defs{ position:absolute; }

/* ── 접근성 : 화면에서만 숨김(스크린리더 노출)
      display:block 은 reset.css 의 caption{display:none} 을 덮어 캡션을 노출시키기 위함 ── */
.blind,
.utable caption.blind{
  display:block;
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
/* ── 접근성 : 반복 영역 건너뛰기 ── */
.skip-nav{
  position:absolute; left:0; top:-60px; z-index:100;
  padding:12px 24px; background:var(--mk-desk); color:#fff;
  font-size:15px; font-weight:700; transition:top .15s ease;
}
.skip-nav:focus{ top:0; }

/* ── 접근성 : reset.css 의 outline:none 복구 (키보드 초점 표시) ──
      reset 의 :where(...):focus 보다 높은 우선순위를 갖도록 :where 없이 작성한다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--mk-point-deep);
  outline-offset:2px;
}

/* ══════════════════════════════════════════
   버튼
══════════════════════════════════════════ */
.btn{
  display:inline-block;
  border:1px solid var(--mk-desk);
  background:var(--mk-desk);
  color:#fff;
  padding:13px 26px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.4;
  border-radius:var(--radius);
  transition:.15s ease;
}
.btn:hover{ background:#3a4633; }
.btn.coral{ background:var(--mk-point); border-color:var(--mk-point); }
.btn.coral:hover{ background:var(--mk-point-deep); border-color:var(--mk-point-deep); }
.btn.ghost{ background:transparent; color:var(--mk-desk); border-color:var(--mk-desk); }
.btn.ghost:hover{ background:var(--mk-desk); border-color:var(--mk-desk); color:#fff; }
.btn.small{ padding:8px 15px; font-size:14px; }
.btn .ico{ font-style:normal; }

/* 링크형 버튼 (색만으로 구분하지 않도록 밑줄 유지) */
.link{
  background:none; border:0; padding:0;
  font-size:inherit; font-weight:700;
  color:var(--mk-point-deep); text-decoration:underline;
  cursor:pointer;
}
.link:hover{ color:var(--mk-ink); }

/* ══════════════════════════════════════════
   AUTH — 좌: 브랜드 히어로 / 우: 로그인·가입
══════════════════════════════════════════ */
#auth{
  min-height:100vh; display:flex;
  position:relative; overflow:hidden;
}

/* ── 히어로 : 미색 크라프트 종이 ── */
.hero{
  flex:0 0 44%;
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  padding:70px;
  color:#4a4530;
  background:
    radial-gradient(130% 95% at 18% 2%, rgba(255,255,255,.32), transparent 55%),
    var(--mk-kraft);
}
.hero > *{ position:relative; z-index:1; }

.hero .eyebrow{
  display:inline-block; align-self:flex-start;
  margin-bottom:auto; padding-bottom:5px;
  border-bottom:1px solid var(--mk-point);
  font-size:16px; font-weight:700; letter-spacing:.28em;
  color:var(--mk-point-deep);
}
.hero .logo{
  font-family:var(--brand-font);
  font-size:100px; line-height:1; letter-spacing:normal;
  margin-bottom:30px; color:var(--mk-ink);
}
.hero h1{
  font-size:32px; font-weight:700; line-height:1.5;
  letter-spacing:-.01em; color:var(--mk-ink);
}
.hero h1 .pt{ color:var(--mk-point-deep); }
.hero .desc{
  margin-top:40px;
  font-size:17px; line-height:1.9; letter-spacing:-.03em;
  color:var(--mk-sub);
}
.hero .desc b{ color:var(--mk-ink); font-weight:700; }

/* 미꽃체 샘플 = 흰 찢긴 메모 */
.hero .sample{
  position:relative;
  margin-top:60px; padding:20px 18px 22px;
}
.hero .sample::before{
  content:""; position:absolute; inset:-8px; z-index:-1;
  background:var(--mk-sheet);
  filter:url(#tornEdge) drop-shadow(0 12px 22px rgba(0,0,0,.15));
}
.hero .sample .cap{
  margin:0 4px 12px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mk-sub-2);
}
/* 원고지 격자 : 정사각 칸, 한 글자 = 한 칸 */
.wongo{ border-left:1px solid var(--mk-line-3); }
.wrow{ display:grid; grid-template-columns:repeat(11, 1fr); }
.wrow span{
  aspect-ratio:1 / 1;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--mk-line-3);
  border-bottom:1px solid var(--mk-line-3);
  font-family:var(--brand-font); font-size:30px; line-height:1;
  color:#4a4636;
}
.wrow:first-child span{ border-top:1px solid var(--mk-line-3); }

/* 좌측 장식 : 들꽃 (우상단에 비스듬히) + 워시 테이프 */
.hero-flowers{
  position:absolute; z-index:10; width:140px; height:auto;
  right:50px; top:10px; pointer-events:none;
  transform:rotate(332deg);
}
.hero .sample .sample-tape{
  position:absolute; z-index:2; width:82px; height:24px;
  top:-16px; left:24px; transform:rotate(-6deg); pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)), rgba(206,186,150,.62);
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}

/* ── 우측 : 세이지 데스크 + 모눈 ── */
.auth-side{
  flex:1; position:relative; z-index:2; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:56px 56px 72px;
  background:
    radial-gradient(130% 100% at 50% -8%, rgba(255,255,255,.06), transparent 55%),
    repeating-linear-gradient(to right,  rgba(255,255,255,.055) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 28px),
    var(--mk-desk);
}
/* 로그인 카드 = 미색 메모지 (찢긴 가장자리 + 워시테이프) */
.auth-card{
  position:relative; z-index:2;
  width:400px; border:none; border-radius:0;
  padding:40px;
  background:var(--mk-paper);
  box-shadow:0 16px 30px -12px rgba(0,0,0,.4);
}
.auth-card::before{                            /* 뒤에서 찢긴 가장자리 실루엣 */
  content:""; position:absolute; inset:-11px -9px; z-index:-1;
  background:var(--mk-paper);
  filter:url(#tornEdge) drop-shadow(0 14px 24px rgba(0,0,0,.15));
}
/* 워시 테이프 : 끝이 뜯긴 결 + 세로 섬유 질감 */
.tape{ filter:url(#tapeTorn); }
.tape::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, rgba(0,0,0,.018) 3px 6px);
}
.auth-card .tape{
  position:absolute; z-index:3; width:88px; height:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)), rgba(140,160,110,.44);
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.auth-card .tape.a{ top:-13px; left:46px; transform:rotate(-7deg); }

/* ── 카드 안 : 제목 · 폼 ── */
/* 제목은 미꽃체로, 가운데 정렬 (괘선 장식 없음) */
.auth-card .title{
  padding-top:22px;
  font-family:var(--brand-font);
  font-size:32px; font-weight:400; letter-spacing:normal;
  text-align:center; color:#43402f;
}
.auth-card .subtitle{
  margin:10px 0 34px;
  font-size:16px; text-align:center; color:var(--mk-sub-2);
}

.field{ margin-bottom:10px; }
.field label{
  display:block; margin-bottom:8px;
  font-size:16px; letter-spacing:.01em; color:var(--mk-sub-2);
}
.field input,
.field select{
  width:100%; padding:14px 16px;
  border:0; border-radius:var(--radius);
  background:rgba(255,255,255,.72); color:var(--mk-ink-2);
  font-size:16px; transition:.15s;
}
.field select{ cursor:pointer; }
.field input::placeholder{ color:var(--mk-hint); }
.field input:focus,
.field select:focus{
  border-color:var(--mk-point); background:rgba(255,255,255,.78);
  box-shadow:0 0 0 3px rgba(111,125,78,.18);
}
.field-help{
  display:block; margin-top:6px;
  font-size:13px; color:var(--mk-sub-2);
}
.auth-card .btn{ width:100%; margin-top:10px; }

/* 개인정보 수집·이용 동의 (회원가입) */
.agree{
  display:flex;gap:8px;justify-content: space-between;align-items: center;
  margin-top:6px;
  font-size:15px;
}
.agree input[type="checkbox"]{
  flex-shrink:0; width:17px; height:17px; margin-top:2px;
  accent-color:var(--mk-point); cursor:pointer;
  flex-shrink:0;
}
.agree label{ line-height:17px; color:var(--mk-sub-2); cursor:pointer; display: flex;gap:8px;}
.agree label b{ color:var(--mk-point-deep); font-weight:700; }
.agree .agree-more{
  padding:0;
  font-size:14px; line-height:1; text-decoration:none;
  text-decoration: underline;
  flex-shrink: 0;
}
.agree .agree-more:hover{ color:var(--mk-point-deep); }
.agree + .field-help{ margin-top:6px; }

.switch{
  margin-top:24px; text-align:center;
  font-size:16px; color:var(--mk-sub-2);
}
.msg{
  margin-top:16px; min-height:18px;
  font-size:16px; text-align:center;
}
.msg.err{ color:var(--mk-danger); font-weight:600; }
.msg.ok { color:var(--mk-point-deep); font-weight:600; }

/* 안내문 : 박스 없이 본문으로 (새 디자인) */
.lock-note{
  margin-top:30px;
  font-size:16px; line-height:1.75; text-align:center;
  color:var(--mk-sub-2);
}
.lock-note b{ color:#43402f; }

/* 하단 크레딧 */
.credit{
  position:absolute; right:40px; bottom:22px; z-index:4;
  font-size:13px; letter-spacing:.02em; text-align:right;
  color:rgba(240,236,222,.86); pointer-events:none;
}

/* ══════════════════════════════════════════
   APP — 원페이지 툴
══════════════════════════════════════════ */
#app{ height:100vh; display:flex; flex-direction:column; overflow:hidden; }

header.top{
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; z-index:10;
  padding:20px 44px;
  background:var(--mk-kraft-2);
  border-bottom:1px solid var(--mk-line);
}
header.top .brandline{ display:flex; align-items:baseline; gap:16px; }
header.top .logo{
  font-family:var(--brand-font); font-size:36px; line-height:1;
  font-weight:400; letter-spacing:normal; color:var(--mk-ink);
}
header.top .slogan{ font-size:16px; letter-spacing:.02em; color:var(--mk-sub); }
header.top .right{ display:flex; align-items:center; gap:16px; }
header.top .who{ font-size:16px; color:var(--mk-sub); }
header.top .who b{ color:var(--mk-ink); font-weight:700; }
header.top .print-note{
  padding-right:16px; border-right:1px solid var(--mk-line);
  font-size:13px; letter-spacing:.01em; color:var(--mk-mute);
}

.stage{ display:flex; align-items:stretch; flex:1; min-height:0; }

/* ── 좌 : 조절 패널 ── */
.panel{
  width:320px; flex-shrink:0; height:100%; overflow-y:auto;
  display:flex; flex-direction:column; gap:22px;
  padding:28px 26px;
  background:var(--mk-kraft-3);
  border-right:1px solid rgba(92,82,55,.18);
}
.panel .sec-title{
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--mk-point-deep);
}
.panel .sec-title::after{ content:""; flex:1; height:1px; background:var(--mk-line); }

.ctl label{
  display:block; margin-bottom:10px;
  font-size:13px; font-weight:600; color:var(--mk-ink);
}
.row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:8px;
}
.row.row-gap{ margin-top:10px; }
.row label{ margin:0; }
.val{
  font-size:13px; font-weight:700; color:var(--mk-ink);
  font-variant-numeric:tabular-nums;
}

/* 슬라이더 : 얇은 올리브 트랙 + 작은 노브 */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:14px; margin-top:12px;
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:999px;
  background:linear-gradient(to right,
    var(--mk-point) 0 var(--fill,50%), #d3d8ba var(--fill,50%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; box-sizing:border-box;
  width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:#fff; border:3px solid var(--mk-point);
  box-shadow:0 1px 3px rgba(111,125,78,.35); cursor:pointer;
}
input[type=range]::-moz-range-track{ height:4px; border-radius:999px; background:#d3d8ba; }
input[type=range]::-moz-range-progress{ height:4px; border-radius:999px; background:var(--mk-point); }
input[type=range]::-moz-range-thumb{
  box-sizing:border-box; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--mk-point);
  box-shadow:0 1px 3px rgba(111,125,78,.35); cursor:pointer;
}

/* 색상 스와치 */
.swatches{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.swatch{
  display:block; width:26px; height:26px;
  border:2px solid #fff; border-radius:0;
  box-shadow:0 0 0 1px var(--mk-line);
  transition:transform .1s;
}
.swatch:hover{ transform:translateY(-2px); }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--mk-point-deep); }
/* 스와치 색상 (인라인 스타일 대신 데이터 속성으로 매핑) */
.swatch[data-color="#3b3936"]{ background:#3b3936; }
.swatch[data-color="#bf7c64"]{ background:#bf7c64; }
.swatch[data-color="#7a8a6a"]{ background:#7a8a6a; }
.swatch[data-color="#b0574a"]{ background:#b0574a; }
.swatch[data-color="#8a5f6e"]{ background:#8a5f6e; }
.swatch[data-color="#566b52"]{ background:#566b52; }
.swatch[data-color="#dddddd"]{ background:#dddddd; }

.color-custom{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.color-custom input[type=color]{
  width:40px; height:30px; padding:2px;
  border:1px solid var(--mk-line); border-radius:var(--radius);
  background:none; cursor:pointer;
}
.color-custom label{
  margin:0; font-size:12px; font-weight:400; color:var(--mk-mute-2);
}

/* 정렬 세그먼트 */
.seg{ display:flex; gap:8px; margin-top:14px; }
.seg button{
  flex:1; padding:9px;
  border:1px solid var(--mk-line); border-radius:var(--radius);
  background:rgba(255,255,255,.5);
  font-size:13px; color:var(--mk-mute-2);
}
.seg button[aria-pressed="true"]{
  border-color:var(--mk-point-deep); background:#fff;
  color:var(--mk-ink); font-weight:700;
}

.panel .actions{ padding-top:6px; display:flex; flex-direction:column; gap:12px; }

/* ── 우 : 미리보기 = 인쇄 영역 (세이지 데스크 위 흰 종이) ── */
.preview-wrap{
  flex:1; min-width:0; overflow-y:auto;
  display:flex; flex-direction:column; align-items:center;
  padding:48px 56px;
  background:
    radial-gradient(130% 100% at 50% -6%, rgba(255,255,255,.05), transparent 55%),
    repeating-linear-gradient(to right,  rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    var(--mk-desk);
  background-attachment:fixed;   /* 스크롤해도 모눈이 고정 → 책상 위 종이처럼 */
}
/* A4 페이지들 (내용이 길면 실제로 여러 장으로 분리) */
/* ══ 편집 무대 : 종이(배경)와 글(편집)을 분리한다 ══
   글줄(.ln)이 페이지 컨테이너 사이를 '이동' 하면 그 순간 IME 조합이 끊어져
   "각" 이 "가ㄱ" 으로 갈라진다. 그래서 줄은 항상 #pages 의 직접 자식으로 고정하고,
   페이지 경계는 줄의 여백(margin-top)으로만 표현한다. A4 종이 모양은 편집 영역
   '밖' 의 배경 레이어(.sheets)에 그리므로 입력 중 편집 DOM 변화가 없다. */
.paper{ position:relative; width:794px; flex-shrink:0; }
.sheets{ position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none; }
.sheet{
  position:absolute; left:0; width:794px; height:1123px; box-sizing:border-box;
  background:var(--mk-sheet);
  border:1px solid #e4e7ee;
  box-shadow:0 18px 50px -34px rgba(59,57,54,.35);
}
/* 편집 중 초점 표시 : 미리보기 영역 전체가 아니라 실제 A4 시트를 감싸도록 한다 */
#pages:focus-visible{ outline:none; }
.paper:focus-within .sheet{ outline:3px solid #fff; outline-offset:3px; }
#pages{
  position:relative; z-index:1; width:794px; box-sizing:border-box;
  padding:0 76px;                                  /* ≈20mm A4 좌우 여백 (위아래는 줄 여백으로) */
  outline:none;
  --fs:48px; --lh:1.2; --pen:#3b3936; --ta:left;   /* 컨트롤이 갱신 */
  font-family:var(--brand-font);
  font-size:var(--fs); line-height:var(--lh); color:var(--pen); text-align:var(--ta);
  letter-spacing:normal;
  word-break:keep-all; overflow-wrap:anywhere; caret-color:var(--pen);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
#pages .ln{ white-space:pre-wrap; min-height:1em; }
/* 안내문 : 편집 DOM 에 빈 줄(.ln)을 미리 두기 때문에 :empty 를 쓸 수 없다.
   JS 가 #pages 에 .ph 클래스를 붙여 제어한다. */
#pages.ph::before{
  content:'여기에 텍스트를 입력하세요'; color:#8f8a78;
  position:absolute; left:76px; top:76px; pointer-events:none;
}

/* 푸터 : 왼쪽 320px 은 패널과 같은 크라프트, 나머지는 데스크와 이어지는 세이지 */
footer.foot{
  padding:14px 40px; text-align:right;
  background:
    linear-gradient(to right, var(--mk-kraft-3) 320px, transparent 320px),
    radial-gradient(130% 100% at 50% -6%, rgba(255,255,255,.05), transparent 55%),
    repeating-linear-gradient(to right,  rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    var(--mk-desk);
  background-attachment:scroll, fixed, fixed, fixed, scroll;
  border-top:none;
  font-size:13px; letter-spacing:.02em;
  color:rgba(240,236,222,.86);   /* 세이지 배경 위 명도대비 확보 */
}

.admin-page footer.foot{background:none;}
.admin-page footer.foot p{color:var(--mk-sub);}

/* ══════════════════════════════════════════
   관리자 승인 모달
══════════════════════════════════════════ */
.modal-back{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(43,42,40,.42);
}
.modal{
  width:660px; max-height:82vh; overflow:auto;
  padding:38px;
  background:#fff; border-radius:var(--radius);
  box-shadow:0 30px 70px -34px rgba(43,42,40,.5);
}
.modal h2{
  margin-bottom:6px;
  font-size:21px; font-weight:700; color:var(--mk-ink);
}
.modal .desc{ margin-bottom:24px; font-size:16px; color:var(--mk-mute-2); }

.utable{ font-size:14px; }
.utable th,
.utable td{
  padding:11px 8px; text-align:left; vertical-align:top;
  border-bottom:1px solid #e4e7ee;
  word-break:break-word; overflow-wrap:anywhere;
}
.utable th{ font-size:13px; font-weight:400; white-space:nowrap; color:var(--mk-mute-2); }
.utable th:nth-child(1){ width:24%; }
.utable th:nth-child(2){ width:12%; }
.utable th:nth-child(3){ width:27%; }
.utable th:nth-child(4){ width:13%; }
.utable th:nth-child(5){ width:24%; }
.utable .ta-r{ text-align:right; }
.utable td.ta-r{ white-space:nowrap; }
.utable td .btn.small{ margin-left:4px; }
.utable .uid{ color:var(--mk-mute-2); font-weight:400; }
.utable .sub{ display:block; margin-top:3px; font-size:13px; line-height:1.5; color:var(--mk-mute-2); }
.utable .sub.reason{ color:var(--mk-danger); }
.utable .empty{ padding:24px; text-align:center; color:var(--mk-mute-2); }

.tag{
  display:inline-block; padding:3px 10px; border-radius:0;
  font-size:13px; font-weight:600; white-space:nowrap;
}
.tag.pending { background:#f0ead9; color:#82591f; }
.tag.approved{ background:#e2ebda; color:var(--mk-ok); }
.tag.rejected{ background:#f0dcd6; color:#a8412f; }

/* 모달 안내문 : 승인·거절 결과 및 오류 (내용이 없으면 자리를 차지하지 않는다) */
#adminMsg{ margin-top:16px; text-align:left; }
#adminMsg:empty{ margin:0; min-height:0; }

.modal-close{
  display:flex; justify-content:flex-end; gap:8px;
  margin-top:24px;
}

/* 개인정보 수집·이용 동의 안내 모달 */
.modal.modal-privacy{ width:560px; }
.privacy-table{
  width:100%; border-collapse:collapse;
  border-top:1px solid #e4e7ee;
  font-size:15px;
}
.privacy-table th,
.privacy-table td{
  padding:13px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid #e4e7ee; line-height:1.6;
}
.privacy-table th{
  width:33%; white-space:nowrap;
  font-weight:600; color:var(--mk-ink);
  background:var(--mk-kraft-3);
}
.privacy-table td{ color:var(--mk-mute-2); word-break:keep-all; }
.privacy-note{
  margin-top:14px;
  font-size:14px; line-height:1.65; color:var(--mk-mute-2);
}
.privacy-note:first-of-type{ margin-top:20px; }

/* 비밀번호 변경처럼 폼만 있는 좁은 모달 */
.modal.modal-sm{ width:420px; padding:34px; }
.modal-sm .field:last-of-type{ margin-bottom:0; }
.modal-sm #pwMsg{ margin-top:18px; text-align:center; }

/* 모달 안 입력칸 : 모달은 흰 배경이라 테두리가 없으면 칸이 보이지 않는다.
   (로그인 카드는 미색이라 테두리 없이도 구분되지만 여기서는 라인이 필요하다) */
.modal .field{ margin-bottom:16px; }
.modal .field input,
.modal .field select{
  border:1px solid var(--mk-line-input);
  background:#fff;
}
.modal .field input:focus,
.modal .field select:focus{
  border-color:var(--mk-point);
  background:#fff;
  box-shadow:0 0 0 3px rgba(111,125,78,.18);
}
.modal .field input::placeholder{ color:var(--mk-hint); }

/* ══════════════════════════════════════════
   관리자 페이지 (/admin.html)
══════════════════════════════════════════ */
.admin-page{ background:var(--mk-kraft-3); }
.admin-page header.top .logo{ font-family:var(--brand-font); font-size:36px; line-height:1; color:var(--mk-ink); }
.admin-page header.top .slogan{ font-size:15px; }

/* 권한 확인 전 가림막 */
.gate{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:var(--mk-kraft-3);
}
.gate-msg{ font-size:16px; color:var(--mk-sub); }

.admin-main{
  max-width:1120px; margin:0 auto; padding:44px 40px 64px;
}
.page-title{ font-size:28px; font-weight:700; color:var(--mk-ink); }
.page-desc{ margin-top:10px; font-size:16px; color:var(--mk-sub); }
.page-desc b{ color:var(--mk-ink); font-weight:700; }

/* 상태별 집계 카드 */
.stats{ display:flex; gap:14px; margin-top:28px; }
.stat{
  flex:1; padding:18px 20px;
  background:#fff; border:1px solid var(--mk-line);
  border-top:3px solid var(--mk-line-3);
}
.stat.pending { border-top-color:#82591f; }
.stat.approved{ border-top-color:var(--mk-ok); }
.stat.rejected{ border-top-color:#a8412f; }
.stat-label{ display:block; font-size:13px; color:var(--mk-mute-2); }
.stat-num{
  display:block; margin-top:6px;
  font-size:28px; font-weight:700; color:var(--mk-ink);
  font-variant-numeric:tabular-nums;
}

/* 검색 · 필터 */
.toolbar{
  display:flex; align-items:center; gap:14px;
  margin-top:28px; padding:16px 18px;
  background:#fff; border:1px solid var(--mk-line);
}
.toolbar .seg{ margin-top:0; flex:0 0 auto; }
.toolbar .seg button{ flex:0 0 auto; padding:9px 16px; background:var(--mk-kraft-3); }
.toolbar .search{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.toolbar .search label{ margin:0; font-size:13px; font-weight:600; color:var(--mk-ink); white-space:nowrap; }
.toolbar .search input{
  width:280px; padding:10px 14px;
  border:1px solid var(--mk-line-2); background:#fff; color:var(--mk-ink-2);
  font-size:15px;
}
.toolbar .search input:focus{
  border-color:var(--mk-point);
  box-shadow:0 0 0 3px rgba(111,125,78,.18);
}

.result-count{ margin-top:20px; font-size:14px; color:var(--mk-mute-2); }
.admin-main #adminMsg{ margin-top:10px; text-align:left; }
.admin-main #adminMsg:empty{ margin:0; min-height:0; }

/* 회원 리스트 */
.admin-table{
  margin-top:12px; background:#fff;
  border:1px solid var(--mk-line);
}
.admin-table th,
.admin-table td{ padding:14px 16px; }
.admin-table thead th{ background:var(--mk-kraft-3); border-bottom:1px solid var(--mk-line); }
.admin-table th:nth-child(1){ width:20%; }
.admin-table th:nth-child(2){ width:9%; }
.admin-table th:nth-child(3){ width:16%; }
.admin-table th:nth-child(4){ width:9%; }
.admin-table th:nth-child(5){ width:10%; }
.admin-table th:nth-child(6){ width:36%; }   /* 승인·거절·비밀번호·삭제 4개 버튼 */
.admin-table td.date{ color:var(--mk-mute-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.admin-table td.ta-r{ white-space:nowrap; }
.admin-table td .btn.small{ margin-left:4px; }
.admin-table tbody tr:hover{ background:var(--gray-bg03); }

/* 필수 입력 표시 (색에만 의존하지 않도록 '(필수)' 글자로 명시) */
.req{ font-weight:400; color:var(--mk-danger); }

/* 삭제처럼 되돌릴 수 없는 조작은 색으로만 구분하지 않고 테두리도 달리한다 */
.btn.ghost.danger{ color:var(--mk-danger); border-color:var(--mk-danger); border-style:dashed; }
.btn.ghost.danger:hover{ background:var(--mk-danger); border-color:var(--mk-danger); border-style:solid; color:#fff; }

/* ══════════════════════════════════════════
   반응형 (index.html)
   ※ admin.html 은 viewport 가 width=1280 으로 고정되어 있어
     아래 미디어쿼리가 발동하지 않는다 → 데스크톱 레이아웃 유지.
══════════════════════════════════════════ */

/* ── 좁은 데스크톱 · 태블릿 가로 ── */
@media (max-width:1100px){
  .hero{ padding:52px 44px; }
  .hero .logo{ font-size:76px; margin-bottom:22px; }
  .hero h1{ font-size:28px; }
  .hero .desc{ margin-top:28px; font-size:16px; }
  .hero .sample{ margin-top:40px; }
  .hero-flowers{ width:110px; right:28px; top:8px; }
  .auth-side{ padding:44px 32px 60px; }

  header.top{ padding:16px 24px; }
  .panel{ width:266px; padding:22px 18px; }
  .preview-wrap{ padding:28px 24px; }
  /* 패널이 좁아졌으므로 푸터의 크라프트 밴드도 같은 폭으로 맞춘다 */
  footer.foot{
    padding:14px 24px;
    background:
      linear-gradient(to right, var(--mk-kraft-3) 266px, transparent 266px),
      radial-gradient(130% 100% at 50% -6%, rgba(255,255,255,.05), transparent 55%),
      repeating-linear-gradient(to right,  rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
      var(--mk-desk);
    background-attachment:scroll, fixed, fixed, fixed, scroll;
  }
}

/* ── 태블릿 세로 : 로그인 2단 → 세로 쌓기, 앱은 자연 스크롤로 전환 ── */
@media (max-width:900px){
  /* 로그인 / 회원가입 */
  #auth{ flex-direction:column; min-height:100vh; }
  .hero{
    flex:0 0 auto; width:100%;
    padding:48px 28px 44px;
  }
  .hero .eyebrow{ margin-bottom:28px; }
  .hero .desc{ max-width:none; }
  .hero .desc br{ display:none; }        /* 좁은 폭에선 자연스럽게 흐르도록 */
  .hero .sample{ max-width:520px; }
  .hero-flowers{ width:92px; right:18px; top:8px; }

  .auth-side{ padding:48px 24px 56px; }
  .auth-card{ width:100%; max-width:430px; }

  .credit{
    position:static; z-index:auto;
    padding:18px 20px 22px;
    text-align:center; color:var(--mk-mute);
    background:var(--mk-kraft-3);
  }

  /* 앱 : 화면 높이 고정 + 내부 스크롤 → 페이지 전체 스크롤로 */
  #app{ height:auto; min-height:100vh; overflow:visible; }
  .stage{ display:block; min-height:0; }

  header.top{ flex-wrap:wrap; gap:12px 16px; }
  header.top .right{ flex-wrap:wrap; gap:8px 12px; }
  header.top .print-note{
    width:100%; order:3;
    padding-right:0; border-right:none;
  }

  /* 조절 패널을 가로로 펼쳐 세로 길이를 줄인다 */
  .panel{
    width:100%; height:auto; overflow:visible;
    display:grid; grid-template-columns:1fr 1fr; gap:20px 26px;
    border-right:none; border-bottom:1px solid rgba(92,82,55,.18);
  }
  .panel .actions{
    grid-column:1 / -1;
    flex-direction:row; justify-content:flex-end;
  }
  .panel .actions .btn{ flex:0 0 auto; }

  /* 모바일 브라우저에서 background-attachment:fixed 는 성능·렌더 문제가 있어 해제 */
  .preview-wrap{
    overflow:visible; padding:26px 20px 40px;
    background-attachment:scroll;
  }
  /* 패널이 전체 폭이 되므로 푸터의 크라프트 밴드를 없앤다 */
  footer.foot{
    text-align:center;
    background:
      radial-gradient(130% 100% at 50% -6%, rgba(255,255,255,.05), transparent 55%),
      repeating-linear-gradient(to right,  rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
      var(--mk-desk);
    background-attachment:scroll;
  }
}

/* ── 모바일 ── */
@media (max-width:560px){
  .hero{ padding:36px 20px; }
  .hero .logo{ font-size:60px; margin-bottom:20px; }
  .hero h1{ font-size:23px; }
  .hero .desc{ margin-top:22px; font-size:15px; line-height:1.8; }
  .hero .sample{ margin-top:32px; padding:16px 12px 18px; }
  .wrow span{ font-size:19px; }
  .hero-flowers{ width:68px; right:10px; top:6px; }

  .auth-side{ padding:36px 16px 44px; }
  .auth-card{ padding:30px 22px; }
  .auth-card .title{ font-size:28px; }

  header.top{ padding:14px 16px; }
  header.top .logo{ font-size:30px; }
  header.top .slogan{ display:none; }    /* 좁은 폭에선 로고만 남긴다 */
  header.top .who{ font-size:15px; }

  .panel{ grid-template-columns:1fr; padding:20px 16px; }
  .panel .actions{ flex-direction:column; }
  .preview-wrap{ padding:18px 12px 32px; }
  footer.foot{ padding:14px 16px; text-align:center; }

  .btn{ padding:11px 18px; font-size:15px; }
  .btn.small{ padding:8px 13px; font-size:13px; }

  /* 모달 : 화면 밖으로 나가지 않도록 */
  .modal,
  .modal.modal-sm{
    width:100%; max-width:420px;
    max-height:88vh; padding:26px 22px;
  }
  .modal-back{ padding:16px; }
}

/* ══════════════════════════════════════════
   인쇄 : 각 .page = 실제 A4 1장
══════════════════════════════════════════ */
@media print{
  html, body{ height:auto; overflow:visible; }
  body{ background:#fff; }
  .skip-nav, #auth, header.top, .panel, footer.foot, .modal-back{ display:none !important; }
  /* 인쇄 시 화면 높이 제한/스크롤 해제 → 내용이 여러 페이지로 흐르도록 */
  #app{ height:auto; min-height:0; overflow:visible; display:block; }
  .stage{ display:block; min-height:0; }
  .preview-wrap{ padding:0; display:block; overflow:visible; background:none; }
  /* 좁은 화면에서 JS 가 넣은 축소(zoom)를 되돌려 항상 실제 A4 크기로 인쇄한다 */
  .paper{ width:auto !important; min-height:0 !important; zoom:1 !important; }
  .sheets{ display:none !important; }              /* 종이 배경은 화면 전용 */
  #pages{
    display:block; zoom:1 !important;
    width:auto !important; padding:0 !important;
    min-height:0 !important;
    outline:none !important;
    /* 화면에 보이는 색 그대로 인쇄 (브라우저 색 보정 방지) */
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  /* 화면에서 페이지 경계를 만들던 여백은 버리고 실제 페이지 나눔으로 대체한다
     → 화면에서 나뉜 그대로 인쇄된다 */
  #pages .ln{ margin-top:0 !important; }
  #pages .ln.pb{ break-before:page; page-break-before:always; }
  #pages .ln.pb:first-child{ break-before:auto; page-break-before:auto; }
  #pages.ph::before{ display:none; }               /* 인쇄에는 안내문 제외 */
  @page{ margin:20mm; }
}