/* npoerp — 플랫폼 공통 스타일
 *
 * 색·글꼴·간격은 :root 에만 정의하고, 아래에서는 그 값만 씁니다.
 * 색을 새로 쓰고 싶으면 여기에 이름을 만들고 그 이름을 쓰세요. (CLAUDE.md 5.4)
 *
 * 할 일 화면(/todo/)은 todolist 에서 옮겨온 자기 스타일을 따로 씁니다.
 */

:root {
  --bg:        #f6f7f9;
  --panel:     #ffffff;
  --line:      #e3e6ea;
  --ink:       #1c2024;   /* 본문 글자 */
  --ink-soft:  #5b6470;   /* 보조 설명 */
  --brand:     #14a574;   /* 주 색 */
  --brand-ink: #0d7a56;
  --danger:    #c0392b;
  --warn-bg:   #fff8e1;

  --radius: 10px;
  --gap:    16px;
  --wrap:   960px;

  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
          "맑은 고딕", system-ui, sans-serif;

  /* Figma Design System Tokens (DESIGN-figma.md) */
  --block-lilac: #c5b0f4;
  --block-lime:  #dceeb1;
  --block-mint:  #c8e6cd;
  --block-cream: #f4ecd6;
  --block-coral: #f3c9b6;
  --block-navy:  #1f1d3d;
  --block-soft:  #f7f7f5;
  --mono-font:   "JetBrains Mono", "SF Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  word-break: keep-all;
}

/* 키보드로 다니는 사람이 메뉴를 건너뛸 수 있게 */
.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 8px; top: 8px; z-index: 10;
  background: var(--panel); padding: 8px 12px; border-radius: var(--radius);
}

/* ── 상단 띠 ───────────────────────────────────────── */
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px var(--gap);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* 상단바 로고 — 뇌 마크(작은 남색 배지) + 이름은 글자.
   이름을 글자로 두면 또렷하고, 확대해도 안 깨지고, 검색·읽어주기에도 잡힙니다.
   그림에 width/height 를 적어두어 늦게 와도 줄이 밀리지 않습니다. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  border-radius: 8px;
}
.brandmark { height: 32px; width: 32px; display: block; }
.brandname {
  font-weight: 800; font-size: 21px;
  color: #000000;
  letter-spacing: -0.5px;
}
@media (max-width: 560px) {
  .brand { gap: 8px; }
  .brandmark { height: 26px; width: 26px; }
  .brandname { font-size: 18px; }
}
.mainnav { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.mainnav a {
  color: #000000; text-decoration: none; font-weight: 600;
  padding: 8px 16px; border-radius: 50px; transition: background 0.2s;
}
.mainnav a:hover { background: #f0f0f0; }
.mainnav a[aria-current="page"] {
  background: #000000; color: #ffffff; font-weight: 600;
}
.adminlink { color: var(--brand-ink); font-weight: 600; }

.logout { display: flex; align-items: center; gap: 8px; margin: 0; }

/* =========================================================
   v14b — 좁은 화면에서 상단 메뉴 접기
   근거: prd-v14b-모바일상단메뉴.md

   ★★ **여기의 기본값은 "펼쳐진 상태"** 입니다. ★★
     아래 규칙들은 전부 `html.js-nav` 안에서만 듭니다.
     `public/nav.js` 가 떠야 그 class 가 붙습니다. 못 뜨면 v14b 이전과 똑같이
     여러 줄로 보입니다 — 보기 싫을 뿐, 못 쓰지는 않습니다.

   ★ 접는 폭 **860px** 는 nav.js 의 matchMedia 와 **같은 값이어야 합니다.**
     다르면 버튼은 보이는데 메뉴가 안 접히거나, 그 반대가 됩니다.

   ★★ 접히는 것은 `.mainnav` 가 아니라 **`.mainnav-full`** 입니다. ★★
     로그인 전 화면(`로그인`·`가입신청`)의 `.mainnav` 에는 **여는 버튼이 없습니다.**
     거기까지 접으면 링크가 **열 방법 없이 사라집니다.**
     nav.js 도 버튼이 없으면 `js-nav` 를 아예 안 붙이지만, 한쪽만 믿지 않습니다.
   ========================================================= */

/* 버튼은 기본이 '없음'. 좁은 화면 + js 일 때만 나타납니다. */
.navtoggle { display: none; }

/* ★ v14b 에서 `.logout` 이 `.mainnav` **안으로** 들어왔습니다.
     넓은 화면에서 예전과 같은 간격으로 보이게 조금 띄웁니다
     (예전에는 `.topbar-in` 의 gap 12px 이 이 자리를 맡았습니다).

   ★★ **넓은 화면에서만** 겁니다. ★★
     그냥 걸면 클래스 두 개(0,2,0)라, 좁은 화면 규칙의 `.logout`(0,1,0)을 이겨
     **js 가 안 뜬 폴백 화면**에서 로그아웃이 오른쪽 끝으로 안 밀립니다. */
@media (min-width: 861px) {
  .mainnav .logout { margin-left: 4px; }
}

@media (max-width: 860px) {
  /* ★ 손가락으로 누르는 자리는 44×44px 아래로 내려가지 않습니다. */
  .js-nav .navtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-left: auto;              /* 로고 반대쪽 끝으로 */
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .js-nav .navtoggle:hover { border-color: var(--ink-soft); }

  /* ☰ 는 가로줄 셋. 가운데 줄이 본체이고 위아래는 그림자로 만듭니다 —
     요소 하나로 끝나서 마크업이 안 늘어납니다. */
  .js-nav .navtoggle-bars,
  .js-nav .navtoggle-bars::before,
  .js-nav .navtoggle-bars::after {
    display: block;
    width: 20px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
  }
  .js-nav .navtoggle-bars { position: relative; }
  .js-nav .navtoggle-bars::before,
  .js-nav .navtoggle-bars::after { content: ""; position: absolute; left: 0; }
  .js-nav .navtoggle-bars::before { top: -6px; }
  .js-nav .navtoggle-bars::after  { top: 6px; }

  /* 열려 있으면 ✕ 로 바뀝니다. 가운데 줄을 지우고 위아래를 겹쳐 X 를 만듭니다.
     ★ 모양만 바꿉니다 — 무슨 뜻인지는 aria-label 이 말합니다 (nav.js). */
  .js-nav .nav-open .navtoggle-bars { background: transparent; }
  .js-nav .nav-open .navtoggle-bars::before { top: 0; transform: rotate(45deg); }
  .js-nav .nav-open .navtoggle-bars::after  { top: 0; transform: rotate(-45deg); }

  /* 접힌 메뉴 — 상단바 아래로 통째로 펼쳐집니다. */
  .js-nav .mainnav-full {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    /* ★ 좌우는 `.topbar-in` 의 var(--gap) 을, 아래는 **14px** 을 되돌립니다.
         `.topbar-in { padding: 14px var(--gap) }` 이라 위아래와 좌우가 다릅니다.
         여기에 var(--gap) 을 쓰면 아래로 삐져나옵니다. */
    margin: 10px calc(var(--gap) * -1) -14px;
    padding: 8px var(--gap) 12px;
    border-top: 1px solid var(--line);
    /* ★ 가로 화면처럼 낮은 창에서도 맨 아래 항목에 닿을 수 있게.
         body 를 잠가 두므로 여기서 스크롤되지 않으면 갇힙니다. */
    /* ★ `100vh` 는 iOS 사파리에서 **주소창을 감춘** 큰 높이라, 실제 보이는 것보다
         80~90px 큽니다. body 를 잠가 뒀으므로 넘친 부분은 못 봅니다.
         `100dvh` 는 지금 보이는 높이입니다. 못 읽는 브라우저를 위해 vh 를 먼저 둡니다. */
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
  }
  .js-nav .nav-open .mainnav-full { display: flex; }

  /* 한 줄짜리 알약이 아니라 **줄 전체**가 누르는 자리가 됩니다. */
  .js-nav .mainnav-full a {
    padding: 12px 14px;
    border-radius: var(--radius);
  }
  /* ★ 지금 보는 화면은 배경 + 글자 굵기 **둘 다**로 알립니다.
       색만으로 구분하지 않습니다 (CLAUDE.md 5.3). */
  .js-nav .mainnav-full a[aria-current="page"] { font-weight: 800; }

  /* 이름·로그아웃은 메뉴 맨 아래, 선 하나 아래로. */
  .js-nav .mainnav-full .logout {
    margin-top: 8px;
    padding: 10px 14px 0;
    border-top: 1px solid var(--line);
    justify-content: space-between;
  }
  .js-nav .mainnav-full .who { font-size: 14px; }

  /* 열려 있는 동안 뒤 본문이 안 밀립니다. */
  .js-nav .nav-open { overflow: hidden; }
}
.who { color: var(--ink-soft); font-size: 14px; }
.linkbtn {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 5px 10px; border-radius: var(--radius); cursor: pointer; font: inherit;
  font-size: 14px;
}
.linkbtn:hover { border-color: var(--ink-soft); }

/* ── 안쪽 메뉴 (v16) ───────────────────────────────
   `CRM` 과 `단체` 처럼 아래에 화면이 여럿인 메뉴가 답니다. `subnav()` 가 그립니다.

   ★ 여기(공통 style.css)에 두는 이유 — **두 메뉴가 함께 씁니다.**
     CRM 전용 파일에 넣으면 「단체」 화면에서 서브바만 스타일 없이 나옵니다.
   ★ 좁은 화면에서는 **가로로 밀립니다.** 접지 않습니다 — 항목이 넷뿐이고,
     접으면 여는 버튼이 상단 메뉴 버튼과 헷갈립니다.
   ========================================================= */
.subnav {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--gap);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.subnav a {
  padding: 10px 14px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
/* ★ 색만으로 구분하지 않습니다 — 밑줄과 굵기를 함께 씁니다 (CLAUDE.md 5.3) */
.subnav a[aria-current="page"] {
  color: var(--brand-ink);
  border-bottom-color: var(--brand);
  font-weight: 700;
}

/* ── 본문 ──────────────────────────────────────────── */
.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--gap);
}
h1 { font-size: 22px; margin: 8px 0 4px; }
h2 { font-size: 18px; margin: 24px 0 8px; }
.lead { color: var(--ink-soft); margin-top: 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
}

.flash {
  background: var(--warn-bg);
  border: 1px solid #f0d99a;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 var(--gap);
}
.flash.error {
  background: #fdecea; border-color: #f5c2bd; color: var(--danger);
}

/* ── 폼 ────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.hint { color: var(--ink-soft); font-size: 13px; }
.field .hint { margin: 4px 0 0; }

input[type="text"], input[type="email"], input[type="password"],
textarea, select {
  width: 100%;
  padding: 10px;
  /* WCAG 1.4.11 — 입력칸 경계는 3:1 이상 */
  border: 1px solid #949494;
  border-radius: var(--radius);
  font: inherit;
  background: var(--panel);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
textarea { min-height: 120px; resize: vertical; }

.checkline { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.checkline input { margin-top: 4px; }

.btn {
  display: inline-block;
  /* ★ 흰 글자를 --brand(#14a574) 위에 올리면 3.15:1 로 AA 미달이다.
     진한 쪽(--brand-ink)을 바탕으로 쓰고, --brand 는 테두리·강조에만 쓴다. */
  background: var(--brand-ink); color: #fff;
  border: 0; border-radius: var(--radius);
  padding: 11px 18px;
  font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: #0a5f43; }
.btn.wide { width: 100%; text-align: center; }
.btn.ghost {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
}
.btn.danger { background: var(--danger); }

/* ── 소셜 로그인 버튼 ──────────────────────────────── */
.social { display: grid; gap: 8px; margin-top: 12px; }
.social a {
  display: block; text-align: center; text-decoration: none;
  padding: 11px; border-radius: var(--radius); font-weight: 600;
  border: 1px solid var(--line); color: var(--ink); background: var(--panel);
}
/* ★ 네이버 버튼은 흰 글자/#03c75a 가 2.25:1 로 AA 미달이지만 **일부러 그대로 둡니다.**
   네이버가 정한 공식 버튼 색이라 바꾸면 브랜드 사용 규정을 어깁니다.
   대신 글자를 키우거나(18.5px 이상이면 큰 글씨 기준 3:1 적용) 아이콘을 함께 쓰는 쪽으로 보완하세요. */
.social .naver  { background: #03c75a; border-color: #03c75a; color: #fff; }
.social .kakao  { background: #fee500; border-color: #fee500; color: #191600; }

/* ── 표 ────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: var(--bg); font-size: 14px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.tablewrap table { min-width: max-content; }
.tablewrap select { min-width: 8em; }

.msgbody {
  white-space: pre-wrap; word-break: break-all;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; margin: 0 0 12px;
  font: inherit;
}

.orgnow { font-weight: 600; }
/* 표 안에서 줄바꿈을 막습니다 (msg/index.php 가 씁니다).
   정의가 없어 날짜·번호가 두 줄로 접히고 있었습니다 — bin/check_css.php 가 찾음 */
.nowrap { white-space: nowrap; }
.inline-form { display: inline; }
.inline-form + .inline-form { margin-left: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tag {
  display: inline-block; font-size: 13px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
}
.tag.ok   { border-color: var(--brand); color: var(--brand-ink); }
.tag.wait { border-color: #d6a41e; color: #8a6400; }
.tag.no   { border-color: var(--danger); color: var(--danger); }

/* ── 바닥 ──────────────────────────────────────────── */
.foot {
  max-width: 1140px; margin: 0 auto;
  padding: 24px var(--gap); color: var(--ink-soft); font-size: 13px;
  border-top: 1px solid var(--line);
}
.footlinks { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.footlinks a { color: var(--ink); text-decoration: none; font-size: 13.5px; }
.footlinks a:hover { text-decoration: underline; }
.footbiz { margin: 0; line-height: 1.7; }
.footbiz a { color: var(--ink-soft); }

/* ── 약관·방침 같은 긴 글 ──────────────────────────── */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: 28px; margin-bottom: 4px; }
.legal h2 { font-size: 19px; margin: 32px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal h3 { font-size: 16px; margin: 20px 0 8px; }
.legal p, .legal li { line-height: 1.75; }
.legal ol, .legal ul { padding-left: 22px; }
.legal ol > li, .legal ul > li { margin-bottom: 6px; }
.legal table { margin-bottom: 12px; }

/* 약관·처리방침의 표는 두 종류입니다. **규칙을 나눠 걸어야 합니다.**
   섞어 걸면 한쪽이 반드시 망가집니다 — 실제로 그랬습니다.

     ① 머리칸이 왼쪽에 있는 2칸 표  (보유기간 · 안전조치 · 보호책임자)
        <tbody><tr><th>항목</th><td>설명</td></tr>
     ② 머리줄이 위에 있는 3칸 표    (수집 항목 1.1 · 처리 위탁 4장)
        <thead><tr><th>구분</th><th>항목</th><th>왜</th></tr>

   ①의 `width: 30%` 를 ②에도 걸면 머리 세 칸이 각각 30% 를 요구해서,
   "필수" 두 글자짜리 칸이 화면의 3분의 1을 차지합니다. */

/* ① 왼쪽 머리칸 — 여기만 너비를 고정합니다 */
.legal tbody th {
  width: 30%;
  white-space: nowrap;
  vertical-align: top;
}

/* ② 위쪽 머리줄 — **너비를 정하지 않습니다.** 칸마다 내용이 다르므로
      브라우저가 글자 양에 맞춰 나누게 둡니다 */
.legal thead th {
  width: auto;
  white-space: nowrap;
  vertical-align: bottom;
}

/* 본문 칸은 위로 붙입니다. 줄 수가 다른 칸끼리 가운데 정렬되면 읽기 나쁩니다 */
.legal td { vertical-align: top; }

/* 표 안에서 **줄바꿈을 허용합니다.**
   .tablewrap 의 `min-width: max-content` 는 관리자 화면의 데이터 표(날짜·번호가
   접히면 안 되는 것)를 위한 규칙입니다. 여기는 문장이 들어가는 표라,
   그대로 두면 표가 화면 밖으로 밀려 가로 스크롤이 생깁니다. */
.legal .tablewrap table { min-width: 0; }
.legal-meta { color: var(--ink-soft); font-size: 13.5px; }
.legal-star {
  background: var(--warn-bg); border: 1px solid #f0d99a;
  border-radius: var(--radius); padding: 10px 12px;
}

@media (max-width: 560px) {
  .topbar-in { gap: 8px; }
  .mainnav { order: 3; width: 100%; }
  .mainnav a { padding: 6px 8px; font-size: 14px; }
  .logout { margin-left: auto; }
  h1 { font-size: 20px; }
}

.narrow { max-width: 420px; margin: 0 auto; }

/* 키보드 포커스 — 버튼·링크에도 같은 표시를 준다 */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.figma-btn-primary:focus-visible, .figma-btn-secondary:focus-visible,
.color-block:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}


/* ==========================================================================
   FIGMA EDITORIAL DESIGN SYSTEM (DESIGN-figma.md)
   ========================================================================== */

.figma-landing {
  color: #000000;
  word-break: keep-all;
  padding-bottom: 40px;
}

/* Monospace Eyebrow */
.figma-eyebrow {
  font-family: var(--mono-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #1f1d3d;
  display: inline-block;
  margin-bottom: 12px;
}
.figma-eyebrow.light {
  color: #c5b0f4;
}

/* Figma Pill Buttons */
.figma-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.figma-btn-primary:hover {
  background-color: #222222;
  transform: translateY(-2px);
}

.figma-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #000000 !important;
  font-size: 17px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid #000000;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.figma-btn-secondary:hover {
  background-color: #f7f7f5;
  transform: translateY(-2px);
}

/* Status Badges */
.badge-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #ffffff;
  color: #0d7a56;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid #14a574;
}
.badge-active::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #14a574;
  border-radius: 50%;
}

.badge-comingsoon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #c5b0f4;
  color: #1f1d3d;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
}

/* Oversized Color Block Sections */
.color-block {
  border-radius: 24px;
  padding: 48px 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  /* ★ 블록 자체가 <a> 인 경우가 있다 (home.php 의 서비스 카드).
     CSP 가 인라인 style 속성을 막으므로 여기서 링크 기본값을 지운다.
     안 하면 카드 전체가 파란 밑줄로 나오고 밑줄이 자손까지 번진다. */
  color: inherit;
  text-decoration: none;
}

/* Hero Block (Lilac) */
.hero-block {
  background-color: var(--block-lilac);
  padding: 60px 44px;
}
.hero-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1.2px;
  margin: 12px 0 20px;
  color: #000000;
}
.hero-lead {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  color: #1f1f1f;
  max-width: 820px;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Marquee Strip */
.marquee-strip {
  background-color: #000000;
  color: #ffffff;
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono-font);
  font-size: 14px;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.marquee-item.ok { color: #dceeb1; }
.marquee-item.soon { color: #c5b0f4; }

/* Grid Layout for Feature Blocks */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}
@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 30px; }
  .color-block { padding: 32px 24px; }
}
/* 특정도가 더 높은 변형들은 정의가 끝난 파일 맨 아래에서 한 번 더 덮는다. */

.block-lime { background-color: var(--block-lime); }
.block-mint { background-color: var(--block-mint); }
.block-cream { background-color: var(--block-cream); }
.block-coral { background-color: var(--block-coral); }

/* Dark Navy Block (Accounting Coming Soon) */
.block-navy {
  background-color: var(--block-navy);
  color: #ffffff;
  padding: 56px 44px;
}
.block-navy h2,
.block-navy h3 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin: 12px 0 16px;
  color: #ffffff;
}
/* 남색 위에서는 검정 테두리가 보이지 않는다 */
.block-navy .figma-btn-secondary { border-color: #ffffff; }
.navy-note { font-size: 14px; color: #c9c7e0; }
.block-navy p {
  font-size: 17px;
  line-height: 1.65;
  color: #e2e1f0;
  max-width: 780px;
  margin-bottom: 28px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-title {
  font-size: 25px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  color: #000000;
}
.card-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: #2c2c2c;
  margin-bottom: 20px;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  font-size: 14.5px;
  font-weight: 600;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1a1a1a;
}
.feature-list li::before {
  content: '✓';
  font-weight: 800;
}

/* FAQ Block */
.faq-block {
  background-color: var(--block-soft);
  border: 1px solid var(--line);
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
}
.faq-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--line);
}
.faq-item h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
}
.faq-item p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────
   인라인 style 을 대신하는 것들.
   CSP 가 style="…" 속성을 통째로 버리므로(app/bootstrap.php),
   화면에서 크기·색을 조절하고 싶으면 반드시 여기에 이름을 만들어 씁니다.
   ────────────────────────────────────────────────────────── */

.section-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 40px 0 20px;
}
.section-title.sm { font-size: 26px; margin: 0; }

/* 로그인 뒤 홈의 인사 블록 — 랜딩보다 낮고 좌우로 나뉜다 */
.hero-block.compact { padding: 44px 40px; margin-bottom: 28px; }
.hero-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-title.sm { font-size: 36px; margin: 8px 0 12px; }
.hero-lead.sm  { font-size: 17px; margin-bottom: 20px; }
.hero-alert    { color: #7f1d1d; font-weight: 700; }

/* 카드 맨 아래의 "열기 →" */
.card-cta {
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  margin-top: 12px;
}

/* 공지 목록 */
.faq-block.tight { padding: 32px 36px; }
.link-quiet { font-size: 14px; font-weight: 700; color: #000000; text-decoration: underline; }

.notice-list { border-radius: 14px; overflow: hidden; }
/* ★ .tablewrap 의 min-width:max-content 를 되돌린다.
   그대로 두면 .notice-list 의 overflow:hidden 과 만나 긴 제목이 스크롤도 없이 잘린다. */
.notice-list table { background: #ffffff; min-width: 0; }
.notice-list td:first-child { word-break: keep-all; }
.notice-list td { padding: 14px 16px; }
.notice-list a { font-weight: 700; color: #000000; text-decoration: none; }
.notice-list a:hover { text-decoration: underline; }
.notice-list .date {
  width: 120px;
  text-align: right;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-family: var(--mono-font);
  padding-right: 16px;
  white-space: nowrap;
}
.badge-active.sm { padding: 3px 10px; font-size: 12px; margin-right: 6px; }

/* ──────────────────────────────────────────────────────────
   홈 — 오늘 할 일
   매일 여는 화면이라 **누르기 전에** 보여야 합니다.
   ────────────────────────────────────────────────────────── */
.today { padding: 32px 36px; }
.today-empty { font-size: 15.5px; color: #2c2c2c; margin: 0; }
.today-empty a { color: #000000; }

.today-count { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.today-count span {
  font-size: 13px; font-weight: 700;
  padding: 5px 12px; border-radius: 50px;
  background: #ffffff; border: 1px solid #b8dabf;
}
/* 색만으로 구분하지 않습니다 — 글자가 뜻을 말합니다 (CLAUDE.md 5.3) */
.cnt-over  { color: #8c1d1d; border-color: #e0a5a5 !important; }
.cnt-today { color: #7a4e00; border-color: #e0c48a !important; }
.cnt-open  { color: #2c2c2c; }

.today-list { list-style: none; margin: 0; padding: 0; }
.today-item {
  display: flex; align-items: baseline; gap: 12px;
  background: #ffffff;
  border: 1px solid #b8dabf;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.today-item.over { border-color: #e0a5a5; }
.today-when {
  flex: 0 0 auto;
  font-family: var(--mono-font);
  font-size: 12.5px; font-weight: 700;
  color: #2c2c2c;
  min-width: 5.5em;
}
.today-item.over .today-when { color: #8c1d1d; }
.today-title { flex: 1 1 auto; font-size: 15px; font-weight: 600; color: #000000; }
.today-cat {
  flex: 0 0 auto; font-size: 12.5px; color: var(--ink-soft);
}

/* 카드 오른쪽 위의 큰 숫자 */
.stat-big {
  font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -1px; color: #1f1d3d;
}

/* 내 정보 카드 — 파스텔이 넷이면 시끄러워서 종이색으로 */
.block-soft-card { background-color: var(--block-soft); border: 1px solid var(--line); }

/* 준비 중인 것을 한 줄로 */
.soon-line {
  text-align: center; font-size: 14px; color: var(--ink-soft);
  margin: 8px 0 0;
}
.soon-line a { color: var(--ink); }

@media (max-width: 768px) {
  .today { padding: 24px 20px; }
  .today-item { flex-wrap: wrap; gap: 4px 10px; }
  .today-title { flex: 1 1 100%; order: 3; }
}

/* 모바일 — 위의 변형 클래스들은 특정도가 (0,2,0) 이라
   앞쪽 미디어쿼리의 .color-block (0,1,0) 으로는 덮이지 않는다.
   정의가 모두 끝난 여기서 한 번 더 적는다. */
@media (max-width: 768px) {
  .hero-block.compact,
  .faq-block.tight,
  .block-navy { padding: 32px 24px; }
  .hero-title.sm { font-size: 28px; }
  .section-title { font-size: 24px; margin: 28px 0 16px; }
  .section-title.sm { font-size: 22px; }
}

/* =========================================================
   휴대폰 인증 (v9) — 가입 화면
   ========================================================= */

/* 입력칸 + 버튼을 한 줄에. 좁은 화면에서는 버튼이 아래로 접힙니다. */
.inline-pair {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
/* .field 안의 input 은 width:100% 라, 여기서 다시 잡아야 버튼 자리가 납니다. */
.inline-pair input {
  flex: 1 1 12em;
  min-width: 0;
  width: auto;
}
.inline-pair .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .inline-pair .btn { flex: 1 1 100%; }
}

/* 라벨 옆의 '(선택)' 처럼 덜 중요한 글자 */
.dim { color: var(--ink-soft); font-weight: 400; }

/* =========================================================
   구글 캘린더 연동 (v6) — 마이페이지에서만 씁니다
   ========================================================= */

/* 켜짐·꺼짐을 **색만으로** 구분하지 않습니다. 글자를 함께 넣습니다 (CLAUDE.md 5.3). */
.badge-on,
.badge-off {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid;
}
.badge-on  { color: #14532d; background: #dcfce7; border-color: #86efac; }
.badge-off { color: #4b5563; background: #f3f4f6; border-color: #d1d5db; }

/* 버튼 여러 개를 한 줄에. 좁은 화면에서는 접힙니다. */
.btnrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* 되돌릴 수 없는 동작 앞의 동의 체크. 확인은 서버가 합니다 —
   브라우저의 confirm() 은 CSP(script-src 'self') 가 막습니다. */
.danger-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #4b5563;
  cursor: pointer;
}
.check input { width: 16px; height: 16px; }

/* 주의를 끌어야 하는 안내. 빨강만 쓰지 않고 왼쪽에 굵은 선을 함께 둡니다. */
.warn {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 4px solid #dc2626;
  background: #fef2f2;
  color: #991b1b;
  font-size: 14px;
  border-radius: 0 6px 6px 0;
}

/* ===== 움직임을 줄여달라는 설정을 존중한다 ===== */
/* 목록을 훑을 때 카드가 계속 튀어오르는 것이 어지러운 사람이 있다. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   v11 — 로그인 화면 (/login.php · /find-id.php)
   =========================================================
   ★ 이 묶음은 **로그인·찾기 화면만** 씁니다. 다른 화면에서 쓰지 마세요.
   ★ 색만으로 상태를 구분하지 않습니다 (CLAUDE.md 5.3) —
     "준비중" 은 색이 아니라 **글자**로 알립니다.
   ========================================================= */

.login-card { padding: 22px 20px 20px; }
.login-card .field input { width: 100%; }

.login-keep { margin: 2px 0 4px; }
/* 공용 PC 경고. 체크박스 바로 아래 붙어야 읽힙니다. */
.login-keep-hint { margin: 0 0 16px; font-size: 12.5px; }

/* ── 또는 ── — 가운데 글자, 양옆으로 선 */
.login-or {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px; color: var(--ink-soft); font-size: 13px;
}
.login-or::before,
.login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ── 소셜 원형 셋 ── */
.login-social {
  display: flex; justify-content: center; gap: 18px;
  margin: 0 0 10px;
}
/* 배지가 원 위에 붙으므로 자리를 미리 비워둡니다 — 배지가 있고 없고에 따라
   원의 높이가 달라지면 셋이 어긋나 보입니다. */
.login-social-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 78px; justify-content: flex-end;
}

.login-last {
  font-size: 11px; font-weight: 600; line-height: 1;
  color: #fff; background: #4a4a4a;
  padding: 4px 7px; border-radius: 4px;
  white-space: nowrap;
}

.login-circle {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); cursor: pointer;
  text-decoration: none;
}
.login-circle:hover { filter: brightness(0.96); }
.login-circle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 각 사의 공식 색. 브랜드 규정이 있으므로 임의로 바꾸지 마세요. */
.login-circle.p-google { background: #fff; }
.login-circle.p-kakao  { background: #fee500; border-color: #fee500; }
.login-circle.p-naver  { background: #03c75a; border-color: #03c75a; }

.login-mark { display: block; }

/* ── 준비중 안내 ── login.js 가 글자를 넣기 전에는 자리를 차지하지 않습니다 */
.login-soon { margin: 0; font-size: 13px; color: var(--danger); text-align: center; }
.login-soon:empty { display: none; }
.login-soon.on { margin: 4px 0 0; }

.login-signup { margin: 18px 0 0; text-align: center; font-size: 14px; }
.login-find { margin-top: 14px; text-align: center; }

/* ── 아이디 찾기 결과 ── */
.findid-result {
  margin: 0 0 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
}
.findid-email {
  display: block; margin: 6px 0 0;
  font-size: 18px; font-weight: 700; word-break: break-all;
}

@media (max-width: 400px) {
  .login-social { gap: 12px; }
  .login-circle { width: 48px; height: 48px; }
}

/* =========================================================
   v12 — AI 로 할 일 만들기 (/ai.php · /org/ai.php)
   =========================================================
   ★ 이 화면에서 제일 눈에 띄어야 하는 것은 기능이 아니라 **경고**입니다.
     우리도 안 읽기로 한 데이터를 밖으로 내보내는 자리이기 때문입니다.
   ★ 색만으로 구분하지 않습니다 (CLAUDE.md 5.3) — 경고에는 ★ 글자가 붙습니다.
   ========================================================= */

/* 입력칸·작은 라벨 — 관리자 화면(admin.css)에도 같은 이름이 있지만
   **화면군이 다르므로 각자 정의합니다.** 한 파일을 나눠 쓰면 한쪽을 손볼 때
   다른 쪽이 조용히 무너집니다 (CLAUDE.md 5.3). */
.fld {
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: inherit;
}
.fld:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.pill {
  display: inline-block; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); font-size: 12.5px; line-height: 1.7; white-space: nowrap;
}

.ai-h2 { margin: 0 0 12px; font-size: 17px; }

.ai-text { width: 100%; min-height: 180px; resize: vertical; font: inherit; line-height: 1.6; }

/* 전송 경고 — 붙여넣기 칸과 동의 체크 사이에 놓아 반드시 지나가게 합니다. */
.ai-warn {
  margin: 12px 0 0; padding: 10px 12px;
  border: 1px solid var(--danger); border-radius: var(--radius);
  background: #fff5f4; color: var(--ink); font-size: 13.5px; line-height: 1.65;
}

.ai-agree {
  margin: 12px 0 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); font-weight: 600;
}

/* 제안 하나 */
.ai-item {
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ai-item:last-of-type { border-bottom: 0; }
.ai-meta { margin: 6px 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px; }

/* 넣기 전에 고치는 칸 — 셋을 한 줄에. 좁으면 접힙니다. */
.ai-edit { margin: 8px 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.ai-edit .fld { width: auto; min-width: 0; flex: 0 1 auto; padding: 6px 8px; font-size: 13.5px; }
.ai-memo {
  margin: 6px 0 0 26px; color: var(--ink-soft); font-size: 13.5px;
  white-space: pre-wrap; word-break: break-word;
}

/* 되돌리기 — 맨 위에 두고 눈에 띄게 */
.ai-undo {
  border-color: var(--danger);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ai-undo p { margin: 0; }

.ai-jobs { margin: 0; padding-left: 18px; line-height: 2; font-size: 13.5px; }
.ai-bad { color: var(--danger); font-weight: 600; }
.ai-bad::before { content: "\26A0 "; }

@media (max-width: 480px) {
  .ai-meta, .ai-memo { margin-left: 0; }
}