/* 개발반장(codefix) 공용 스타일 — 첫 화면(landing.php)과 같은 토큰 체계 */

/* ── 토큰 ─────────────────────────────────────────────────
   ★ 2026-10-27: 첫 화면의 새 모습(흰 바탕 + 파란 주색)을 하위 화면·관리 화면 공용 토큰으로 옮겼다.
     옛 페트롤(#14282A)·앰버(#9F5907) 토큰은 이 값들로 바뀌었다. 이름(--ink·--signal 등)은 그대로라
     각 화면의 var(--…) 는 손대지 않아도 새 색을 받는다.
   ⚠ landing.php 는 이 파일을 읽지 않고 자체 <style> 에 같은 값을 들고 있다 — 색을 바꿀 때는 두 곳을 함께 볼 것.
   색·간격·글자 크기·모서리는 이름으로만 쓴다(규칙서 §8-1).
   대비(흰 바탕): --ink-3 #5F6B78 은 회청(--bg-alt) 바탕에서도 5.02, --signal #1B64DA 는 흰 5.41·옅은 파랑 4.72,
   단추 --brand #2563EB 위 흰 글자 5.17. --bad #C4320A 흰 5.52·제 칠 4.82, --warn #B45309 흰 5.02·제 칠 4.58, --ok #0F7B55 흰 5.27·제 칠 4.65.
   다크: --signal #6AA5FF 6.88, --ink-3 #8B95A1 카드(#1C222A) 5.27·--surface-2 4.63, --bad·--warn·--ok 제 칠 위 6.9 이상.

   판정 색(통과·문제·주의)은 초록·빨강·주황으로 서로 떨어뜨려 둔다 — 파란 주색 하나로 뭉개지 않는다. */
:root{
  color-scheme:light;   /* 스크롤바·입력 칸 같은 브라우저 기본 부품도 테마를 따르게 */
  --ink:#191F28; --ink-2:#4E5968; --ink-3:#5F6B78;
  --paper:#FFFFFF; --bg-alt:#F3F6FA; --surface:#FFFFFF; --surface-2:#F3F6FA;
  --line:#E5E8EB; --line-strong:#D1D6DB;
  --signal:#1B64DA; --signal-wash:#E8F0FD;
  --brand:#2563EB; --brand-hover:#1A4FC4; --on-brand:#FFFFFF;
  --ok:#0F7B55; --ok-wash:#E3F5EC;
  --warn:#B45309; --warn-wash:#FEF3E2;
  --bad:#C4320A; --bad-wash:#FDECE8;
  --shadow-sm:0 1px 2px rgba(25,31,40,.05),0 2px 8px -2px rgba(25,31,40,.06);
  --shadow:0 1px 2px rgba(25,31,40,.04),0 16px 40px -18px rgba(27,72,160,.28);
  --backdrop:rgba(25,31,40,.45);

  --font-sans:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Malgun Gothic",sans-serif;
  /* 고정폭은 코드·토큰·PIN 처럼 글자 하나하나를 읽어야 하는 곳에만. 웹 글꼴을 따로 받지 않고 시스템 글꼴을 쓴다
     (전에는 IBM Plex Mono 를 받았지만 한글 글리프가 없어 섞이면 벌어졌다). 숫자는 본문 서체 tabular-nums 로. */
  --font-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px;
  --text-xs:12px; --text-sm:13px; --text-md:14px; --text-base:15px; --text-lg:17px; --text-xl:20px; --text-2xl:24px; --text-3xl:32px;
  --leading-tight:1.25; --leading-normal:1.7;
  /* 모서리: 칩·알약 / 단추·입력 / 작은 카드·표·알림 / 큰 카드 */
  --r-full:999px; --r-sm:10px; --r:14px; --r-md:18px; --r-lg:24px;
  --r-touch:var(--r); --r-card:var(--r-md);
  --control-h-sm:36px; --control-h-md:48px; --control-h-lg:56px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#E9EDF2; --ink-2:#B0B8C1; --ink-3:#8B95A1;
    --paper:#0F1318; --bg-alt:#151A21; --surface:#1C222A; --surface-2:#252C36;   /* --ink-3 위 4.63 */
    --line:#2A313B; --line-strong:#3A4350;
    --signal:#6AA5FF; --signal-wash:#16243A;
    --brand:#2B6FE6; --brand-hover:#1F5FD6; --on-brand:#FFFFFF;
    --ok:#4CC38A; --ok-wash:#11291E;
    --warn:#F2A23A; --warn-wash:#2B1F0E;
    --bad:#FF8A73; --bad-wash:#2E1712;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -18px rgba(0,0,0,.7);
    --backdrop:rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E9EDF2; --ink-2:#B0B8C1; --ink-3:#8B95A1;
  --paper:#0F1318; --bg-alt:#151A21; --surface:#1C222A; --surface-2:#252C36;
  --line:#2A313B; --line-strong:#3A4350;
  --signal:#6AA5FF; --signal-wash:#16243A;
  --brand:#2B6FE6; --brand-hover:#1F5FD6; --on-brand:#FFFFFF;
  --ok:#4CC38A; --ok-wash:#11291E;
  --warn:#F2A23A; --warn-wash:#2B1F0E;
  --bad:#FF8A73; --bad-wash:#2E1712;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -18px rgba(0,0,0,.7);
  --backdrop:rgba(0,0,0,.62);
}

*,*::before,*::after{box-sizing:border-box}
/* 본문이 짧은 화면에서 바닥글 아래 남는 자리는 바닥글과 같은 흰 바탕으로 */
html{-webkit-text-size-adjust:100%; background:var(--paper)}
/* 하위 화면은 회청 바탕(--bg-alt) 위에 흰 카드를 올린다 — 첫 화면의 회청 구역(.alt)과 같은 짝. 머리글·바닥글은 흰 바탕. */
body{
  margin:0; background:var(--bg-alt); color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px; line-height:1.75; letter-spacing:-.011em;
  word-break:keep-all; overflow-wrap:break-word;   /* 한글 단어가 줄 끝에서 쪼개지지 않게(긴 주소는 overflow-wrap 이 끊는다) */
  -webkit-font-smoothing:antialiased;
}
/* 번호·날짜·금액 — 고정폭 글꼴 대신 같은 서체의 같은 폭 숫자로 줄을 맞춘다 */
.mono{font-variant-numeric:tabular-nums; letter-spacing:0}
/* 코드·토큰·PIN·증거 문자열처럼 글자 하나하나를 읽어야 하는 것만 */
.code,code,kbd{font-family:var(--font-mono); letter-spacing:0}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.035em; line-height:var(--leading-tight); font-weight:700}
p{margin:0}
a{color:inherit}
a,button,summary,input,label{touch-action:manipulation}   /* 휴대폰 두 번 탭 확대 지연을 없앤다 */
:focus-visible{outline:3px solid var(--signal); outline-offset:3px}
/* 본문으로 건너뛰기 — 평소에는 화면 위로 숨었다가 키보드 초점이 오면 내려온다(Tab 첫 번째). */
.skip{position:absolute; left:.75rem; top:-4rem; z-index:100; padding:.6rem 1rem;
  background:var(--ink); color:var(--paper); border-radius:var(--r); font-weight:600; text-decoration:none}
.skip:focus{top:.75rem}
main[tabindex="-1"]:focus{outline:none}   /* 건너뛰기로 받은 초점 — 테두리는 링크 자리에서 이미 보였다 */
/* 화면 폭.
   앱 화면이 랜딩(1150px)보다 좁아서(1080/720) 표와 카드가 눌렸다.
   글이 주인 화면(로그인·가입)은 여전히 좁게 두어야 읽히므로, 그런 화면은
   각자 style="max-width:…" 로 좁힌다. 여기서는 기본값만 넉넉히 잡는다.
   본문 한 줄이 너무 길어지는 것은 .page-head > p 가 40em 으로 따로 막는다. */
.wrap{width:min(1280px,100% - 2.5rem); margin-inline:auto}
.narrow{width:min(1080px,100% - 2.5rem); margin-inline:auto}
/* 글을 읽는 화면용. 필요한 곳에서 class="narrow reading" 으로 쓴다. */
.narrow.reading{width:min(760px,100% - 2.5rem)}

/* 작은 머리 글자. 하위 화면 h1 위에서는 뺐다(제목이 이미 말한다) — 지금은 관리 화면과 접수번호 같은 값 표시에만 남아 있다.
   ★ 전에는 IBM Plex Mono + 자간 .18em + 대문자였다. Plex 에는 한글 글리프가 없어
     "자 주 묻 는 것" 처럼 벌어진 시스템 글꼴로 그려졌다(2026-10-09 점검 B5). 한글에는 본문 서체만. */
.eyebrow{
  font-size:.82rem; font-weight:600; letter-spacing:0; color:var(--signal); margin:0;
}

/* 헤더
   ★ 2026-10-27: 하위 화면도 첫 화면과 같은 토큰을 쓰게 되어, 헤더 전용 값(--top-*)은 공용 토큰을 가리키기만 한다
     (라이트·다크 모두 landing.php 의 --top-* 값과 같다). landing.php 의 헤더 CSS 와 모양이 같아야 한다 —
     한쪽만 고치면 홈과 하위 화면의 헤더가 다시 갈린다. 로고 앞 심볼은 assets/brand-mark.svg. */
.top{
  --top-bg:var(--paper); --top-line:var(--line); --top-ink:var(--ink); --top-ink-2:var(--ink-2); --top-ink-3:var(--ink-3);
  --top-accent:var(--signal); --top-accent-wash:var(--signal-wash);
  border-bottom:1px solid var(--top-line); background:var(--top-bg); color:var(--top-ink);
  /* 본문 글자 크기·줄간격(랜딩 17px/1.7, 하위 16px/1.75)을 물려받지 않게 고정 — 물려받으면 메뉴가 2~3px 어긋난다 */
  font-size:16px; line-height:1.75; letter-spacing:-.011em;
  position:sticky; top:0; z-index:20}
.top .wrap{display:flex; align-items:center; gap:1.5rem; height:66px}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem; letter-spacing:-.045em; text-decoration:none; color:var(--top-ink)}
.brand::before{content:""; width:28px; height:28px; flex:none; border-radius:8px;
  background:url(/assets/brand-mark.svg) center/contain no-repeat}
.brand small{font-family:inherit; font-size:.8rem; font-weight:500; letter-spacing:0; color:var(--top-ink-3)}
.top nav{margin-left:auto; display:flex; gap:1.4rem; align-items:center}
.top nav a{font-size:.92rem; font-weight:500; color:var(--top-ink-2); text-decoration:none; white-space:nowrap}
.top nav a:hover{color:var(--top-ink)}
/* 메뉴는 includes/nav_account.php 한 조각을 랜딩과 함께 쓴다. 헤더 모양(폭·높이·로그인 알약)도
   landing.php 의 헤더 CSS 와 같은 값이다 — 한쪽만 고치면 홈과 하위 화면의 헤더가 다시 갈린다. */
.top nav a[aria-current="page"]{color:var(--top-ink); font-weight:700}
.top nav a.nav-login{color:var(--top-accent); font-weight:700; background:var(--top-accent-wash);
  border:1px solid transparent; border-radius:999px; padding:.38rem .9rem}
.top nav a.nav-login:hover{border-color:var(--top-accent)}
/* 관리자 진입 — 관리자에게만 렌더된다.
   평범한 텍스트 링크로 두면 마이페이지·로그아웃과 구분이 안 돼
   "관리 화면으로 가는 길이 없다"고 느끼게 된다. 그래서 알약 형태로 띄운다. */
.top nav a.nav-admin{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--top-accent-wash); color:var(--top-accent);
  border:1px solid var(--top-accent); border-radius:999px;
  padding:.34rem .8rem; font-weight:600; font-size:.85rem;
}
.top nav a.nav-admin:hover{background:var(--top-accent); color:var(--top-bg)}
.top nav a.nav-admin svg{flex:0 0 auto}

@media (max-width:920px){   /* 랜딩과 같은 꺾는 폭. 메뉴가 8개라 760~920 사이에서 한 줄이 넘쳤다 */
  /* 좁은 화면에서 메뉴를 통째로 숨기면 갈 곳이 없어진다.
     전에는 hide-sm 이 거의 전부에 붙어 있어 비회원에게는 "로그인" 하나만 남았다 —
     접수 버튼조차 안 보였다. 이제는 줄바꿈으로 내려 보여 준다. */
  /* ★ height:66px 를 반드시 풀어야 한다.
       메뉴가 두 줄로 내려가도 상자 높이는 66px 에 묶여 있어 아래 줄이
       본문 위로 넘쳐 겹쳐 보였다. 높이를 내용에 맡긴다. */
  /* 메뉴 8개가 두세 줄로 내려가 헤더가 150px 안팎이 된다. 그대로 따라붙으면
     360×560 같은 화면에서 본문 자리의 4분의 1을 가린다 → 좁은 화면에서는 따라붙지 않게. */
  .top{position:static}
  .top .wrap{flex-wrap:wrap; height:auto; row-gap:.5rem;
    padding-top:.75rem; padding-bottom:.75rem; gap:.9rem}
  .top nav{gap:.75rem 1.05rem; flex-wrap:wrap; width:100%;
    margin-left:0; justify-content:flex-start;
    border-top:1px solid var(--top-line); padding-top:.6rem}
  .top nav a{font-size:.88rem; padding-block:.3rem}   /* 손끝 높이 24px 이상 */
  .top nav a.nav-login{padding:.3rem .8rem}
  .top nav a.nav-admin{padding:.3rem .6rem}
  .top nav a.nav-admin .lbl{display:none}   /* 좁은 화면에선 아이콘만 */
}
@media (max-width:420px){
  /* 아주 좁은 화면에서만 부차적인 것을 접는다 */
  .top nav a.hide-xs{display:none}
}

main{padding:clamp(2rem,5vw,3.5rem) 0 4.5rem}
.page-head{margin-bottom:2rem}
.page-head h1{font-size:clamp(1.6rem,3.6vw,2.25rem); margin-top:.7rem; font-weight:800}
.page-head h1:first-child{margin-top:0}
.page-head > p{margin-top:.8rem; color:var(--ink-2); max-width:40em}

/* 버튼 — 첫 화면과 같은 모양(파란 주 단추·옅은 보조 단추·둥근 14px). 높이는 손끝 기준 48px */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none;
  min-height:var(--control-h-md); padding:0 1.35rem; font-size:.96rem; font-weight:700; line-height:1.2; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand); color:var(--on-brand); border-color:var(--brand); box-shadow:0 8px 20px -12px rgba(37,99,235,.7)}
.btn-primary:hover{background:var(--brand-hover); border-color:var(--brand-hover); color:var(--on-brand)}
/* 보조 단추 — 회청 바탕 위에 놓이는 일이 많아 첫 화면(회청 칠)과 달리 흰 칠 + 선으로 */
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-block{display:flex; width:100%}
.btn-sm{min-height:var(--control-h-sm); padding:0 .9rem; font-size:.86rem; border-radius:var(--r-sm)}
.btn-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem}

/* 탭 — 밑줄 대신 알약 칸(첫 화면의 칩 줄과 같은 결) */
.tabs{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:2rem; padding:.3rem; width:fit-content; max-width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.tabs a{
  padding:.55rem 1.1rem; text-decoration:none; font-weight:600; font-size:.94rem; line-height:1.5;
  color:var(--ink-2); border-radius:var(--r-sm); transition:background .15s ease, color .15s ease;
}
.tabs a.on{color:var(--signal); background:var(--signal-wash); font-weight:700}
.tabs a:hover{color:var(--ink)}
.tabs a.on:hover{color:var(--signal)}

/* 카드 · 폼 */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.75rem; box-shadow:var(--shadow-sm)}
.card + .card{margin-top:1.2rem}
/* 카드를 폼이 감싼 경우(내 계정 등) — 형제가 .card 가 아니어서 사이가 붙었다. 모서리가 둥글어져 더 눈에 띈다 */
.narrow > .card + form, .narrow > form + .card, .narrow > form + form{margin-top:1.2rem}
.card > h2{font-size:1.12rem; font-weight:700; margin-bottom:1.25rem}

.field{margin-bottom:1.4rem}
label.field{display:block}
.field:last-child{margin-bottom:0}
/* PIN·번호처럼 한 자씩 읽는 입력 칸 */
.pin-input{font-family:var(--font-mono); letter-spacing:.3em}
.pin-input::placeholder{letter-spacing:0}   /* 안내 글자(「숫자 6자리」)는 띄우지 않는다 — 띄우면 「숫 자 6 자 리」로 읽힌다 */
.field > label,.field > .lbl{
  display:block; font-size:.9rem; font-weight:600; margin-bottom:.45rem;
}
.field .hint{display:block; font-size:.82rem; color:var(--ink-3); font-weight:400; margin-top:.35rem; line-height:1.6}
.req{color:var(--signal); font-weight:700}

input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; min-height:var(--control-h-md); padding:.7rem .95rem; font-size:.96rem; font-family:inherit; line-height:1.55;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  transition:border-color .15s ease;
}
input[type=text]:hover,input[type=tel]:hover,input[type=email]:hover,input[type=password]:hover,
input[type=number]:hover,input[type=date]:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
/* 초점: 테두리 자리에 2px 파란 선(안쪽으로 겹쳐 그려 칸이 커 보이지 않게) */
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal); outline-offset:-1px; border-color:var(--signal)}
/* 펼침 목록 화살표 — 운영체제 기본 화살표 대신 같은 모양으로(그림은 data: 로 안에 둔다, 외부 파일 없음) */
select{appearance:none; -webkit-appearance:none; padding-right:2.6rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95A1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:16px}
select[multiple]{background-image:none; padding-right:.95rem}
textarea{min-height:8rem; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
input[type=file]{font-size:.9rem; font-family:inherit; color:var(--ink-2); max-width:100%}   /* 16px 로 커지는 폰에서 버튼+파일 이름이 폭을 넘었다(344·360) */
input[type=file]::file-selector-button{margin-right:.75rem; padding:.5rem .95rem; font:inherit; font-weight:600; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-sm); cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--ink-3)}

/* ★ iOS 는 글자 16px 미만인 입력칸을 누르면 화면을 **자동으로 확대**한다.
     그리고 되돌아오지 않는다 — 접수 폼에서 첫 칸을 누른 순간 나머지를 채우기가 괴로워진다.
   ⚠ meta viewport 에 user-scalable=no 를 넣어 막는 방법도 있지만, 그건
     확대가 필요한 사람의 확대까지 막는다. 글자를 키우는 쪽이 맞다.
   폰 크기에서만 올린다 — 데스크톱은 .96rem 이 더 어울린다. */
@media (max-width:640px){
  input[type=text],input[type=tel],input[type=email],input[type=password],
  input[type=number],input[type=date],select,textarea{ font-size:16px }
  input[type=file]{ font-size:16px }
}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
@media (max-width:640px){ .grid2,.grid3{grid-template-columns:1fr} }
/* 칸 안의 넓은 표가 칸을 키워 좁은 화면에서 페이지가 옆으로 밀렸다(관리 티켓 상세 360) — 표는 제 상자 안에서 밀린다 */
.grid2 > *,.grid3 > *{min-width:0}

/* 라디오 카드 */
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem}
.choice{position:relative}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice span{
  display:block; padding:.75rem .9rem; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-size:.92rem; cursor:pointer; background:var(--surface); text-align:center;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.choice input:checked + span{border-color:var(--signal); background:var(--signal-wash); color:var(--signal); font-weight:700;
  box-shadow:inset 0 0 0 1px var(--signal)}
.choice input:focus-visible + span{outline:2px solid var(--signal); outline-offset:2px}
.choice span:hover{border-color:var(--ink-3)}

/* 개인정보 수집·이용 동의 — 가입·접수 폼.
   항목·목적·보유 기간을 표로 먼저 보여 주고, 체크는 그 아래에 둔다(무엇에 동의하는지 보고 누르게). */
.consent{margin-top:1.2rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r-card);
         background:var(--surface-2); font-size:.86rem; line-height:1.65; color:var(--ink-2)}
.card > .consent:first-child{margin-top:0}
.consent dl{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; margin:0 0 .8rem}
.consent dt{font-weight:600; color:var(--ink)}
.consent dd{margin:0}
.consent-check{display:flex; align-items:flex-start; gap:.55rem; font-weight:600; color:var(--ink); cursor:pointer}
.consent-check input{width:1.1rem; height:1.1rem; margin:.25rem 0 0; flex:0 0 auto; accent-color:var(--brand)}
.consent-note{margin-top:.45rem; font-size:.82rem; color:var(--ink-2)}   /* 동의 상자(--surface-2) 위라 --ink-3 은 4.39 → --ink-2 */
.consent a{color:var(--ink); font-weight:600; text-underline-offset:3px}
@media (max-width:420px){ .consent dl{grid-template-columns:1fr; gap:.1rem} .consent dd{margin-bottom:.4rem} }

/* 허니팟 — 사람 눈에는 안 보이고 스크린리더에도 안 읽히게 */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* 알림 */
/* 알림 — 전에는 왼쪽 3px 굵은 띠(side-tab)였다. 바탕색 + 같은 색 1px 테두리로 종류를 보인다(2026-10-09) */
.alert{padding:1rem 1.2rem; border-radius:var(--r-card); border:1px solid transparent; font-size:.92rem; line-height:1.65; margin-bottom:1.5rem}
.alert-bad{background:var(--bad-wash); border-color:color-mix(in srgb,var(--bad) 30%,transparent); color:var(--bad)}
.alert-ok{background:var(--ok-wash); border-color:color-mix(in srgb,var(--ok) 30%,transparent); color:var(--ok)}
.alert-warn{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 30%,transparent); color:var(--ink)}
.alert-info{background:var(--signal-wash); border-color:color-mix(in srgb,var(--signal) 25%,transparent); color:var(--ink-2)}
.alert ul{margin:.4rem 0 0; padding-left:1.1rem}

/* 빈 상태 — 목록이 비었을 때. 가운데 맞춤 + 옅은 바탕으로 "없음"을 조용히 알린다 */
.empty{padding:2.2rem 1.2rem; text-align:center; color:var(--ink-3); font-size:.92rem; line-height:1.7;
  background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--r-card)}
.empty strong{display:block; color:var(--ink-2); font-size:1rem; margin-bottom:.25rem}

/* 접수증 (완료 화면) — 옛 톱니 모양 아래 끝·점선은 걷고 둥근 카드로 */
.receipt{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); position:relative; border-radius:var(--r-lg); overflow:hidden}
.receipt-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding:1.1rem 1.4rem 1rem; background:var(--signal-wash); border-bottom:1px solid var(--line);
}
.receipt-head strong{display:block; font-size:1rem; letter-spacing:.2em; color:var(--signal)}
.receipt-head .sub{display:block; margin-top:.28rem; font-size:.78rem; letter-spacing:.12em; color:var(--ink-3)}
.receipt-head .no{font-size:.84rem; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.receipt dl{margin:0; padding:.3rem 0; display:grid; grid-template-columns:4.5rem 1fr}
.receipt dt{font-size:.84rem; color:var(--ink-3); letter-spacing:0; padding:.72rem 0 .72rem 1.4rem; border-bottom:1px solid var(--line)}
.receipt dd{margin:0; font-size:.92rem; line-height:1.55; padding:.72rem 1.4rem .72rem .85rem; border-bottom:1px solid var(--line)}
.receipt dl > :nth-last-child(1),.receipt dl > :nth-last-child(2){border-bottom:none}

/* 표 — 둥근 테두리 상자 안에, 머리 줄은 회청 칠 */
.tablewrap{overflow-x:auto; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-card)}
table.data{width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px}
table.data th,table.data td{padding:.85rem 1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
/* 머리글은 한글이라 본문 서체로(고정폭 대문자·자간이면 한글이 벌어진 대체 글꼴로 그려졌다) */
table.data thead th{font-size:.8rem; letter-spacing:0; color:var(--ink-3); font-weight:600; background:var(--surface-2); border-bottom:1px solid var(--line)}
table.data td.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr{transition:background .12s ease}
table.data tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}

/* 상태 알약 — 색으로 구분(진행 파랑·완료 초록·주의 주황·문제 빨강·끝남 회색) */
.pill{display:inline-flex; align-items:center; font-size:.75rem; font-weight:700; line-height:1.5; padding:.12rem .6rem; border-radius:var(--r-full); border:1px solid transparent; background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.pill-open{color:var(--signal); background:var(--signal-wash)}
.pill-done{color:var(--ok); background:var(--ok-wash)}
.pill-warn{color:var(--warn); background:var(--warn-wash)}

/* 바닥글 — 첫 화면과 같은 값(흰 바탕) */
footer{padding:2.6rem 0 3.6rem; font-size:.88rem; color:var(--ink-3); background:var(--paper); border-top:1px solid var(--line)}
footer .wrap{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between}
footer .mono{font-weight:500; letter-spacing:0}
/* 정책 링크 — 처리방침은 다른 글과 구분되게 굵게(개인정보 보호법 시행령 제31조) */
.foot-links{flex:0 0 100%}
.foot-links a{color:var(--ink-2); font-weight:700; text-underline-offset:3px}
.foot-links a:hover{color:var(--ink)}
/* ── 사업자 정보 ───────────────────────────────────────────
   전자상거래법상 표시 항목. includes/business.php 를 채우면 나온다.
   비어 있으면 이 블록 자체가 출력되지 않으므로 빈 여백이 생기지 않는다.

   푸터가 flex 라서, 여기에 flex-basis:100% 를 주지 않으면
   기존 두 항목 옆에 끼어들어 한 줄이 세 토막 난다. */
.biz-info{flex:0 0 100%; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line);
          display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; font-size:.8rem; line-height:1.7}
.biz-info .k{color:var(--ink-3); margin-right:.25rem}   /* opacity .75 는 2.95(다크 3.55) — 뺐다 */

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none !important; animation:none !important} }

/* ── 말풍선 안내(툴팁) ─────────────────────────────────────
   브라우저 기본 툴팁은 나타나는 데 1~2초 걸리고, 생김새가 운영체제마다 달라
   사이트와 따로 논다. 글씨도 작아 읽기 힘들다.
   그래서 data-tip 을 쓰면 우리 모양으로 띄운다.

   쓰는 법:  <button data-tip="이 항목만 복사">…</button>
   여러 줄이 필요하면 문장을 짧게 나누는 편이 낫다 — 말풍선은 짧을수록 읽힌다.

   ⚠ title 속성은 그대로 두어도 된다. 다만 둘을 같이 쓰면 말풍선이 두 개 뜬다.
     data-tip 을 붙일 때는 title 을 뺀다. */
[data-tip]{position:relative}
[data-tip]::after,
[data-tip]::before{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  position:absolute; z-index:50;
}
[data-tip]::after{
  content:attr(data-tip);
  left:50%; bottom:calc(100% + 8px); transform:translate(-50%, 3px);
  background:var(--ink); color:var(--paper);
  font-size:.78rem; font-weight:400; line-height:1.55; letter-spacing:-.01em;
  padding:.45rem .7rem; border-radius:var(--r-sm);
  width:max-content; max-width:min(260px, 78vw); text-align:left;
  white-space:normal; word-break:keep-all;
  box-shadow:0 6px 18px -8px rgba(25,31,40,.55);
}
[data-tip]::before{           /* 꼬리 */
  content:""; left:50%; bottom:calc(100% + 3px); transform:translate(-50%, 3px);
  border:5px solid transparent; border-top-color:var(--ink);
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
/* 화면 위쪽에 붙은 것은 아래로 띄운다 — 위로 띄우면 잘린다 */
[data-tip][data-tip-pos="down"]::after{
  bottom:auto; top:calc(100% + 8px); transform:translate(-50%, -3px);
}
[data-tip][data-tip-pos="down"]::before{
  bottom:auto; top:calc(100% + 3px); transform:translate(-50%, -3px);
  border-top-color:transparent; border-bottom-color:var(--ink);
}
[data-tip][data-tip-pos="down"]:hover::after,
[data-tip][data-tip-pos="down"]:hover::before,
[data-tip][data-tip-pos="down"]:focus-visible::after,
[data-tip][data-tip-pos="down"]:focus-visible::before{ transform:translate(-50%, 0); }
/* 손가락으로 쓰는 화면에서는 말풍선이 오히려 방해가 된다 */
@media (hover:none){ [data-tip]::after, [data-tip]::before{ display:none } }
@media (prefers-reduced-motion:reduce){ [data-tip]::after, [data-tip]::before{ transition:none } }

/* ── 자주 묻는 것 (answers) ────────────────────────────────
   검색으로 들어온 사람이 읽을 화면이라, 읽는 것 자체가 편해야 한다.
   본문 폭을 문자 수로 묶어 둔다 — 넓으면 줄을 놓친다. */
.answer, .answers-index{max-width:44rem; margin:0 auto; padding:0 0 1rem}
.crumb{font-size:.82rem; color:var(--ink-3); margin:0 0 1.4rem}
.crumb a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent}
.crumb a:hover{color:var(--ink); border-bottom-color:var(--line)}
.crumb span{margin:0 .4rem; opacity:.5}

.answer-head{margin:0 0 2.4rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line)}
.answer-head h1{margin:0 0 .8rem; line-height:1.3}
.answer-head .lead{font-size:1.06rem; line-height:1.75; color:var(--ink-2); margin:0 0 .9rem}
.answer-head .dim{font-size:.8rem; color:var(--ink-3); margin:0}

.answer-body{font-size:1rem; line-height:1.85; color:var(--ink)}
.answer-body h2{margin:2.6rem 0 .9rem; font-size:1.24rem; line-height:1.4}
.answer-body h3{margin:1.9rem 0 .5rem; font-size:1.02rem; line-height:1.5}
.answer-body p{margin:0 0 1.05rem}
.answer-body ul, .answer-body ol{margin:0 0 1.2rem; padding-left:1.35rem}
.answer-body li{margin:0 0 .5rem}
.answer-body li > ul, .answer-body li > ol{margin-top:.5rem}
.answer-body code{font-size:.88em; padding:.1em .4em; border-radius:6px;
                  background:var(--surface); border:1px solid var(--line)}
.answer-body .dim{color:var(--ink-3); font-size:.9rem}
.answer-body table.data{width:100%; margin:.4rem 0 1.4rem}
.answer-body table.data td, .answer-body table.data th{vertical-align:top; line-height:1.6}
.answer-body .num{white-space:nowrap; font-variant-numeric:tabular-nums}

/* 시간당 단가가 전부 같을 때 쓰는 한 줄 표시 */
.rate-one{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem;
          margin:.4rem 0 1.4rem; padding:1rem 1.2rem;
          background:var(--signal-wash); border:1px solid transparent; border-radius:var(--r-card)}
.rate-one strong{font-size:1.3rem; font-weight:800; color:var(--signal)}
.rate-one span{font-size:.86rem; color:var(--ink-3); line-height:1.7}

/* 이전 순서처럼 '차례' 를 보여줄 때 */
.answer-body pre.steps{margin:.4rem 0 1.4rem; padding:1.1rem 1.2rem; overflow-x:auto;
                       background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
                       font-size:.88rem; line-height:1.9; white-space:pre}

/* 꼭 읽어야 할 한 덩어리 — 흰 카드(회청 바탕 위) */
.answer-body .callout{margin:1.4rem 0; padding:1.15rem 1.3rem; border-radius:var(--r-card);
                      background:var(--surface); border:1px solid var(--line);
                      line-height:1.75}   /* 왼쪽 굵은 주황 띠는 뺐다 — 바탕색만으로 구분된다 */

/* 글 끝 문의 판 — 첫 화면 #intake 판처럼 옅은 파랑 */
.answer-cta{margin:3rem 0 0; padding:1.7rem 1.6rem; border-radius:var(--r-lg);
            background:var(--signal-wash); border:1px solid transparent}
.answer-cta h2{margin:0 0 .5rem; font-size:1.15rem; font-weight:800}
.answer-cta p{margin:0 0 1.1rem; line-height:1.75; color:var(--ink-2)}

.answer-rel{margin:2.4rem 0 0}
.answer-rel h2{font-size:1rem; margin:0 0 .8rem; color:var(--ink-3)}
.answer-rel ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.answer-rel a{display:block; padding:1rem 1.2rem; border:1px solid var(--line); background:var(--surface);
              border-radius:var(--r-card); text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease}
.answer-rel a:hover{border-color:var(--signal); box-shadow:var(--shadow-sm)}
.answer-rel strong{display:block; margin-bottom:.25rem; line-height:1.45}
.answer-rel span{display:block; font-size:.85rem; color:var(--ink-3); line-height:1.65}

.answer-list{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.9rem}
.answer-list a{display:block; padding:1.35rem 1.5rem; border:1px solid var(--line); background:var(--surface);
               border-radius:var(--r-lg); text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease}
.answer-list a:hover{border-color:var(--signal); box-shadow:var(--shadow-sm)}
.answer-list h2{margin:0 0 .45rem; font-size:1.06rem; line-height:1.45}
.answer-list p{margin:0; font-size:.9rem; color:var(--ink-3); line-height:1.7}

@media (max-width:640px){
  .answer-body h2{font-size:1.14rem}
  .answer-cta{padding:1.3rem 1.1rem}
}

/* 금액 열은 오른쪽 정렬인데 머리글만 왼쪽이면 눈이 어긋난다. 같이 맞춘다. */
.answer-body table.data th:last-child,
.answer-body table.data td:last-child{text-align:right}
.answer-body table.data th:last-child{padding-right:1rem}
.answer-body table.data td.num{padding-right:1rem}

/* ── 개인정보처리방침 (privacy.php) ────────────────────────
   답변 글(answer-head·answer-body)의 읽기 틀을 그대로 쓴다. 표는 글이라 왼쪽 정렬로 되돌리고,
   한글 머리글이 mono 대문자로 벌어지지 않게 본문 서체로 둔다. */
.policy .tablewrap{margin:.4rem 0 1.4rem}
.policy table.data{min-width:0; margin:0}
.policy table.data th:last-child,
.policy table.data td:last-child{text-align:left}
.policy table.data thead th{font-family:inherit; font-size:.82rem; letter-spacing:0; text-transform:none; font-weight:600}
.policy table.data tbody th{width:8.5rem; font-weight:600; white-space:nowrap}
/* 국외 이전 표 — 받는 곳마다 한 장. 제목은 표 안 첫 줄로 */
.policy table.data caption{caption-side:top; text-align:left; padding:.8rem 1rem; font-weight:700;
  background:var(--surface-2); border-bottom:1px solid var(--line-strong); line-height:1.5}
.policy .answer-body h3{margin-top:1.6rem}
/* #p3 같은 앵커로 들어오면 제목이 고정 머리말 밑에 숨었다. 머리말 높이만큼 띄운다
   (좁은 화면은 메뉴가 두 줄로 내려가 머리말이 145px 안팎까지 커진다) */
.policy [id]{scroll-margin-top:5.5rem}
@media (max-width:640px){ .policy [id]{scroll-margin-top:10rem} }
@media (max-width:520px){
  .policy table.data th,.policy table.data td{padding:.7rem .75rem}
  .policy table.data tbody th{width:auto; white-space:normal}
  /* 보관 기간 표(3칸)는 좁은 폭에서 줄마다 카드처럼 쌓는다. 칸 이름은 data-k 에서 */
  .policy table.stack thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .policy table.stack tr{display:block; border-bottom:1px solid var(--line)}
  .policy table.stack tbody tr:last-child{border-bottom:none}
  .policy table.stack th,.policy table.stack td{display:block; border-bottom:none}
  .policy table.stack tbody th{padding-bottom:.2rem}
  .policy table.stack td{padding-top:.25rem; padding-bottom:.25rem}
  .policy table.stack td:last-child{padding-bottom:.8rem}
  .policy table.stack td::before{content:attr(data-k); display:block; font-size:.8rem; color:var(--ink-3)}
}

/* ── 카카오톡 상담 버튼 ────────────────────────────────────
   화면 어디에 있든 한 번에 물어볼 수 있게 떠 있는다.
   ★ 색은 카카오 노랑(#FEE500)과 글자 검정을 그대로 쓴다.
     이 조합이 아니면 사람들이 카톡 버튼으로 못 알아본다. */
.kko-fab{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:40;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.72rem 1.05rem; border-radius:2rem;
  background:#FEE500; color:#191600; text-decoration:none;
  font-size:.9rem; font-weight:700; line-height:1;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.35);
  transition:transform .15s, box-shadow .15s;
}
.kko-fab:hover{transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.kko-fab:focus-visible{outline:3px solid var(--signal); outline-offset:3px}
.kko-fab svg{flex:0 0 auto}
/* 아래에 고정 막대가 있는 화면에서는 그 위로 올린다 */
/* 고정 막대(실측 87px)에 가리지 않게. 막대 높이는 글자 크기에 따라 달라져 여유를 둔다 */
.kko-fab.lifted{bottom:7rem}
@media (max-width:520px){
  .kko-fab{right:.8rem; bottom:.8rem; padding:.7rem .85rem}
  .kko-fab span{display:none}   /* 좁은 화면에서는 동그란 아이콘만 */
}
@media (prefers-reduced-motion:reduce){ .kko-fab{transition:none} }

/* 본문 안의 카카오톡 버튼 — 떠 있는 버튼과 달리 줄 안에 들어간다 */
.btn-kko{background:#FEE500; color:#191600; border:1px solid #F2DA00}
.btn-kko:hover{background:#F7DE00; color:#191600}

/* ── 회원 탈퇴 (withdraw.php) · 탈퇴 표시 ────────────────────
   위험한 버튼은 --bad 한 색으로만. 다크에서는 --bad 가 밝은 빨강이라 글자를 바탕색(어두움)으로 뒤집는다. */
.narrow.slim{width:min(560px,100% - 2.5rem)}
.btn-danger{background:var(--bad); color:var(--surface); border-color:var(--bad)}
.btn-danger:hover{background:color-mix(in srgb,var(--bad) 85%,var(--ink)); border-color:color-mix(in srgb,var(--bad) 85%,var(--ink)); color:var(--surface)}
.wd-facts{display:grid; grid-template-columns:auto 1fr; gap:.7rem 1.1rem; margin:0; font-size:.92rem; line-height:1.7}
.wd-facts dt{font-weight:600; color:var(--ink); white-space:nowrap}
.wd-facts dd{margin:0; color:var(--ink-2)}
.wd-facts a{color:var(--ink); font-weight:600; text-underline-offset:3px}
@media (max-width:520px){ .wd-facts{grid-template-columns:1fr; gap:.15rem} .wd-facts dd{margin-bottom:.7rem} }
.wd-block{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
.wd-block li{padding:.85rem 1.05rem; border:1px solid color-mix(in srgb,var(--bad) 30%,transparent); background:var(--bad-wash); border-radius:var(--r-card)}
.wd-block strong{display:block; color:var(--bad)}
.wd-block span{display:block; font-size:.88rem; color:var(--ink-2); margin-top:.15rem}
.field .hint.wd-err{color:var(--bad); font-weight:600}
input[aria-invalid="true"]{border-color:var(--bad)}
.pill-bad{color:var(--bad); background:var(--bad-wash)}
.pill-mute{color:var(--ink-3); background:var(--surface-2)}
/* 내 계정 맨 아래 — 눈에 띄지 않게, 그러나 찾을 수 있게 */
.my-leave{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin-top:2rem;
  padding-top:1.2rem; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink-3)}
.my-leave a{color:var(--ink-2); font-weight:600; text-underline-offset:3px; padding:.55rem 0}
.my-leave a:hover{color:var(--bad)}
/* 표 칸 안의 두 번째 줄(아이디·이메일·탈퇴일) */
.u-sub{display:block; font-size:.8rem; color:var(--ink-3)}

/* ── 확인 대화상자 (assets/confirm.js) ────────────────────
   브라우저 confirm() 대신. 관리자·사용자 화면 공용 — admin 도 style.css 를 먼저 불러온다.
   버튼은 기존 .btn-ghost / .btn-primary / .btn-danger 를 그대로 쓴다. */
.cf-dlg{width:min(420px,100% - 2rem); padding:1.6rem 1.6rem 1.35rem; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); overscroll-behavior:contain}
/* ::backdrop 은 :root 토큰을 못 받는 브라우저가 있어 값을 직접 쓴다. 어두운 화면 두 벌도 같이. */
.cf-dlg::backdrop{background:rgba(25,31,40,.45)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cf-dlg::backdrop{background:rgba(0,0,0,.62)} }
:root[data-theme="dark"] .cf-dlg::backdrop{background:rgba(0,0,0,.62)}
.cf-title{margin:0; font-size:1.08rem; font-weight:700; letter-spacing:-.01em}
.cf-body{margin:.6rem 0 0; color:var(--ink-2); font-size:.94rem; line-height:1.65; white-space:pre-line; overflow-wrap:anywhere}
.cf-row{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.6rem; margin-top:1.4rem}
.cf-row .btn{padding:.65rem 1.15rem; min-height:44px}
@media (max-width:520px){ .cf-row .btn{flex:1 1 0} }

/* ── 유틸 · 화면별 조각 (옛 인라인 style="" 을 옮긴 것, 2026-10-28) ────────
   규칙서 §8-1: HTML 에 style="" 을 쓰지 않는다. 화면마다 흩어져 있던 인라인 값을 이 아래로 모았다.
   ★ 모두 !important — 인라인 style 은 어떤 선택자보다 앞섰다. 클래스로 옮기면서 모습이 그대로이려면
     (예: .card p · .field label 같은 더 구체적인 규칙에 지지 않게) 같은 우선순위가 필요하다.
     새로 쓰는 화면에서는 부품 클래스를 먼저 쓰고, 한 번 쓰는 여백·글자 크기만 여기 유틸로.
   이름의 숫자는 rem 의 1/100 이다 — u-fs-88 = .88rem, u-mt-140 = 1.4rem. 값은 옮기기 전 그대로(모습을 바꾸지 않으려고
   단계 토큰으로 합치지 않았다 — 합치는 것은 모습이 바뀌는 별도 작업).
   관리 화면에만 쓰는 조각은 admin.css 맨 아래. 데이터 값이 들어가는 폭(진행 막대 등)만 style="--pct:…" 로 남는다. */
.u-ink{color:var(--ink) !important}
.u-ink2{color:var(--ink-2) !important}
.u-ink3{color:var(--ink-3) !important}
.u-signal{color:var(--signal) !important}
.u-ok{color:var(--ok) !important}
.u-bad{color:var(--bad) !important}
.u-fw400{font-weight:400 !important}
.u-fw500{font-weight:500 !important}
.u-fw600{font-weight:600 !important}
.u-fw700{font-weight:700 !important}
.u-fs-75{font-size:.75rem !important}
.u-fs-78{font-size:.78rem !important}
.u-fs-80{font-size:.8rem !important}
.u-fs-82{font-size:.82rem !important}
.u-fs-84{font-size:.84rem !important}
.u-fs-85{font-size:.85rem !important}
.u-fs-86{font-size:.86rem !important}
.u-fs-87{font-size:.87rem !important}
.u-fs-88{font-size:.88rem !important}
.u-fs-90{font-size:.9rem !important}
.u-fs-92{font-size:.92rem !important}
.u-fs-100{font-size:1rem !important}
.u-mt-0{margin-top:0 !important}
.u-mt-20{margin-top:.2rem !important}
.u-mt-25{margin-top:.25rem !important}
.u-mt-30{margin-top:.3rem !important}
.u-mt-40{margin-top:.4rem !important}
.u-mt-50{margin-top:.5rem !important}
.u-mt-60{margin-top:.6rem !important}
.u-mt-90{margin-top:.9rem !important}
.u-mt-100{margin-top:1rem !important}
.u-mt-110{margin-top:1.1rem !important}
.u-mt-120{margin-top:1.2rem !important}
.u-mt-130{margin-top:1.3rem !important}
.u-mt-140{margin-top:1.4rem !important}
.u-mt-150{margin-top:1.5rem !important}
.u-mt-160{margin-top:1.6rem !important}
.u-m-0{margin:0 !important}
.u-ml-auto{margin-left:auto !important}
.u-block{display:block !important}
.u-nowrap{white-space:nowrap !important}
.u-prewrap{white-space:pre-wrap !important}
.u-right{text-align:right !important}
.u-nodeco{text-decoration:none !important}
.u-minw-0{min-width:0 !important}
.u-w-auto{width:auto !important}
.u-w-full{width:100% !important}
/* 글이 주인 화면의 폭 — .narrow 의 기본 폭(1080px)을 좁힌다(옛 style="max-width:…") */
.u-maxw-420{max-width:420px !important}
.u-maxw-480{max-width:480px !important}
.u-maxw-520{max-width:520px !important}
.u-maxw-560{max-width:560px !important}
.u-maxw-620{max-width:620px !important}
.u-maxw-760{max-width:760px !important}
.u-maxw-820{max-width:820px !important}
.u-maxw-860{max-width:860px !important}
/* 표 칸 폭 */
.u-col-1{width:1% !important}
.u-col-10{width:10% !important}
.u-col-16{width:16% !important}
.u-col-48{width:48% !important}
/* 데이터로 정해지는 폭 — style="--pct:62%" 로 값만 넘긴다(진행 막대) */
.u-pct{width:var(--pct) !important}

/* 화면별 조각 — 사용자 화면. 앞머리는 화면 이름: tk-=track · sv-=servers · sc-=서버 카드(includes/server_card.php) ·
   nf-=404 · in-=intake · ind-=intake_done · my-=mypage · ins-=install · fp-=find_password · rg-=register · lg-=login · si-=server_install.
   관리 화면 조각은 admin.css 맨 아래. 인쇄 문서(quote_view·server_report_view)는 이 파일을 읽지 않아 각자 <style> 에. */
/* track.php */
.tk-ml60{margin-left:.6rem !important}
.tk-ml50{margin-left:.5rem !important}
.tk-hi{border-color:var(--signal) !important}
.tk-fs110{font-size:1.1rem !important}
.tk-quote-row{display:flex !important; justify-content:space-between !important; align-items:baseline !important; gap:1rem !important; flex-wrap:wrap !important}
.tk-amount{font-size:1.5rem !important; letter-spacing:-.03em !important}
.tk-decide{margin-top:1.3rem !important; padding-top:1.2rem !important; border-top:1px solid var(--line) !important}
.tk-col-time{width:11rem !important}
.tk-msg{padding:1rem 0 !important; border-bottom:1px solid var(--line) !important}
.tk-msg-meta{margin-bottom:.35rem !important}
.tk-reply{min-height:6rem !important}
/* servers.php */
.sv-lh175{line-height:1.75 !important}
.sv-mb30{margin-bottom:.3rem !important}
.sv-mb60{margin-bottom:.6rem !important}
.sv-para{margin:0 0 .9rem !important}
.sv-empty-title{margin:0 0 .4rem !important}
.sv-steps{line-height:1.9 !important; padding-left:1.2rem !important}
.sv-note{margin:.9rem 0 0 !important}
/* includes/server_card.php — 관리 화면(admin/contracts.php)에서도 쓴다. admin_layout 도 이 파일을 먼저 읽는다 */
.sc-cc{color:currentColor !important}
.sc-trend{padding:.75rem 1.3rem .2rem !important}
.sc-h{height:var(--h) !important}   /* 막대 높이는 데이터 — style="--h:…px" */
.sc-btn-sm{padding:.35rem .7rem !important}
/* 404.php */
.nf-lead{line-height:1.75 !important; margin:0 0 1rem !important}
.nf-btns{gap:.6rem !important; flex-wrap:wrap !important}
/* intake.php · intake_done.php · mypage.php · install.php */
.in-mb0{margin-bottom:0 !important}
.ind-mt220{margin-top:2.2rem !important}
.my-col-label{width:9rem !important}
.ins-fail{border-color:var(--bad) !important; color:var(--bad) !important}
.ins-mb120{margin-bottom:1.2rem !important}
/* find_password.php · register.php · login.php · server_install.php */
.fp-lead{color:var(--ink-2) !important; line-height:1.75 !important; font-size:.92rem !important}
.fp-code-gap{margin-top:.7rem !important}
.fp-pick{display:block !important; margin:.25rem 0 !important}
.rg-lead{color:var(--ink-2) !important; line-height:1.75 !important; font-size:.92rem !important}
.rg-rest{margin-top:1rem !important; border:1px solid var(--line) !important}
.lg-lead{color:var(--ink-2) !important; font-size:.92rem !important; line-height:1.75 !important}
.si-intro{color:var(--ink-2) !important; line-height:1.75 !important}   /* .si-lead 는 server_install.php 안의 안내 상자 이름 — 겹치지 않게 */
.si-auth-kinds{display:flex !important; gap:1.2rem !important; margin-top:.3rem !important}
.si-req-h{font-size:1rem !important; margin:0 0 .3rem !important}