/* ═══════════════════════════════════════════════════════════
   BENCH 57 — 화면 색·글자 층      2026-08-28
   ───────────────────────────────────────────────────────────
   [이 파일이 하는 일]
     화면에 쓰는 색과 글자 크기를 ★여기 한 자리에만 적어둔다.
     화면들은 색을 직접 적지 않고 ★여기 이름을 불러 쓴다.
     그래서 톤을 바꿀 일이 생기면 ★이 파일만 고치면 된다.

   [왜 만들었나]
     2026-08-28 전수 검사 — 색값 자체는 여섯 가지뿐인데
     ★글자 밝기가 열다섯 단계로 흩어져 있었다.
     0.6 과 0.62, 0.45 와 0.42 는 눈으로 구별이 안 된다.
     단계가 없어서가 아니라 ★너무 많아서 단계 구실을 못 했다.
     그래서 화면이 단조롭고 어디부터 읽을지 눈이 못 잡았다.

   [정한 규칙 넷 — 명식 확정]
     ① 화면마다 할 일 하나를 가장 크게
     ② 설명은 한 줄. 나머지는 접거나 뺀다
     ③ ★금색은 누르는 곳에만. 제목·테두리는 쓰지 않는다
     ④ 덩어리는 밝기로 나눈다
   ═══════════════════════════════════════════════════════════ */

:root{

  /* ── 바탕 세 단 ────────────────────────────────────────
     이 셋이 규칙 ④ 다. 덩어리를 선이 아니라 ★밝기로 가른다.
     ★★[2026-08-29 명식 확정] ★흰 바탕으로 간다 — 홈피(bench57.com)와 같게.
       [왜] 홈피는 흰 바탕인데 앱은 크림이라 ★다른 서비스로 보였다.
       [크림은 어디로] 사라진 게 아니라 ★한 단씩 내려갔다. */
  --bg:      #FFFFFF;   /* 화면 전체 바탕 — 홈피와 같다 */
  --card:    #F7F3EC;   /* 상자 — 안내 상자, 목록 한 줄, 통계 칸 */
  --frame:   #F0EAE0;   /* 액자 — 미리보기를 감싸는 칸 */
  --paper-in:#FFFFFF;   /* ★글 쓰는 칸 — 흰 바탕 위 흰 칸이라 ★테두리로 구분한다.
                           1.5px --line-strong 을 쓴다. */

  /* ── 글자 네 단 ────────────────────────────────────────
     ★네 단만 쓴다. 다섯째를 만들고 싶어지면 그건 층이 아니라 예외다. */
  --t1:      #26221E;   /* 제목 — 큰 제목·작은 제목 */
  --t2:      #4A443C;   /* 본문 — 읽는 글 */
  /* ★★[2026-08-30] ★t3·t4 를 한 단씩 내린다 — ★흰 바탕이 되면서 흐려졌다.
     [무엇이 잘못됐었나] 이 값들은 ★크림 바탕(#F6F2EC)에 맞춰 정한 것이다.
       흰 바탕으로 올리자 ★바탕만 밝아지고 글자는 그대로라 차이가 벌어졌다.
       실측 대비(흰 바탕) — ★t3 3.74:1 · ★t4 2.55:1.
       읽기 기준은 ★4.5:1 이다. 둘 다 미달이었다.
       명식: "어떤 것은 조금 미미하고 글자가 흐리게 느껴져."
     [지금] t3 ★5.62:1 · t4 ★3.74:1 (t4 는 예전 t3 자리로 내려온 것).
     [t4 를 더 안 올리는 이유] 빈 칸 예시글이 너무 진하면
       손님이 ★"이미 뭐가 쓰여 있나" 하고 헷갈린다. */
  --t3:      #6E675C;   /* 안내 — 설명·날짜·상태 */
  --t4:      #8B8378;   /* 아주 흐림 — 빈 칸 예시글 정도. 아껴 쓴다 */

  /* ── 선 두 단 ──────────────────────────────────────────
     선도 넉 단까지 흩어져 있었다. 둘이면 넉넉하다. */
  --line:        #E6E0D4;   /* 보통 선 — 상자 테두리, 나눔선 */
  --line-strong: #C9C1B2;   /* 진한 선 — 누를 수 있는 것의 테두리 */

  /* ── 누르는 곳 ────────────────────────────────────────
     ★금색은 한 화면에 ★채워진 버튼 하나. 그 외에는 어디에도 안 쓴다.
       제목에도, 숫자에도, 링크에도, 진행바에도, 테두리에도. */
  --gold:    #8F6214;   /* 지금 눌러야 할 것 하나.
                           ★명식이 2026-08-09 에 정한 값 — #C8902A 는 밝은 바탕에서
                           2.52:1 로 안 읽혀 #8F6214(4.80:1)로 낮춘 것이다. */
  --on-gold: #FFFFFF;   /* 그 버튼 위의 글자 */

  /* 고른 것 표시 — 탭, 눌린 항목. 금색이 아니라 ★어두운 채움이다.
     금색을 여기까지 쓰면 한 화면에 금색이 둘이 된다. */
  --sel:     #3A342C;
  --on-sel:  #FFFFFF;

  /* ── 종이 ─────────────────────────────────────────────
     초대장·표지 미리보기의 종이색. 화면 색이 아니라 ★물건 색이라
     톤을 바꿔도 이건 그대로 둔다. */
  --paper:      #F5EFE4;
  --paper-line: #D8D0C0;
  --paper-ink:  #26221E;

  /* ── 글자 크기 네 단 ──────────────────────────────────
     이것도 넷이다. 규칙 ① ② 가 여기서 나온다. */
  --fs-h1:   22px;   /* 큰 제목 — 화면에 하나만 */
  --fs-h2:   16px;   /* 작은 제목 — 덩어리 머리 */
  --fs-body: 15px;   /* 본문 */
  --fs-note: 13px;   /* 안내 */

  /* ── 머리띠 ────────────────────────────────────────────
     ★[2026-08-29] 화면 맨 위 어두운 띠. 홈피 네비와 같은 색.
     헤더(_brand_header.html)가 ★이 이름들을 먼저 본다. 없으면 예전 색으로
     떨어지므로, ★아직 어두운 방 화면은 이 파일을 안 불러도 안 바뀐다. */
  --band:        #3A342C;              /* 띠 바탕 */
  --on-band:     #C8902A;              /* 띠 위 로고 — ★로고만 금색 예외 */
  --on-band-dim: rgba(248,244,238,.68);/* 띠 위 작은 글자 */

  /* 헤더가 찾는 이름 — 위 셋을 그대로 이어준다 */
  --bh-name:       var(--on-band);
  --bh-sub:        var(--t2);
  --bh-line:       var(--line);
  --bh-line-strong:var(--line-strong);
  --bh-hover:      rgba(143,98,20,.10);

  /* ── 알림·상태 ────────────────────────────────────────
     너무 길다·형식이 틀렸다 같은 말. ★금색으로 쓰면 누르는 곳으로 오해된다. */
  --warn:    #9B2C2C;   /* 잘못됐다·주의 */
  --ok:      #5C7A4E;   /* 끝났다·됐다 (마이페이지 완료 표시) */

  /* ── 여백·모서리 ──────────────────────────────────── */
  --gap:    16px;
  --radius: 8px;
  --radius-card: 10px;
  --radius-pill: 999px;
}


/* ═══════════════════════════════════════════════════════════
   자주 쓰는 부품
   화면마다 새로 그리지 않도록 여기 모아둔다.
   ═══════════════════════════════════════════════════════════ */

/* ── 글자 ─────────────────────────────────────────────── */
.b-h1{ font-size:var(--fs-h1); color:var(--t1); font-weight:500;
       line-height:1.35; margin:0 0 4px; word-break:keep-all }
.b-h2{ font-size:var(--fs-h2); color:var(--t1); font-weight:500;
       line-height:1.5;  margin:0 0 6px; word-break:keep-all }
.b-body{ font-size:var(--fs-body); color:var(--t2);
         line-height:1.75; margin:0 0 10px; word-break:keep-all }
.b-note{ font-size:var(--fs-note); color:var(--t3);
         line-height:1.7;  margin:0 0 8px; word-break:keep-all }

/* ── 상자 ─────────────────────────────────────────────── */
.b-card{ background:var(--card); border:0.5px solid var(--line);
         border-radius:var(--radius-card); padding:13px 14px }

/* 미리보기 액자 — 안에 종이를 넣는다 */
.b-frame{ background:var(--frame); border-radius:var(--radius-card);
          padding:10px }

/* ── 누르는 것 ───────────────────────────────────────── */

/* 지금 눌러야 할 것 하나. ★한 화면에 하나만 둔다. */
.b-btn{ display:block; width:100%; padding:13px;
        font-size:var(--fs-body); font-weight:500; text-align:center;
        text-decoration:none; border:0; border-radius:var(--radius-pill);
        background:var(--gold); color:var(--on-gold);
        font-family:inherit; cursor:pointer }

/* 그 다음 것들 — 채우지 않고 테두리만 */
.b-btn2{ display:block; width:100%; padding:13px;
         font-size:var(--fs-body); text-align:center; text-decoration:none;
         border:0.5px solid var(--line-strong); border-radius:var(--radius-pill);
         background:transparent; color:var(--t2);
         font-family:inherit; cursor:pointer }

/* 알약 — 탭, 항목 버튼. 한 줄에 늘어놓고 ★넘치면 다음 줄로 감싼다.
   (옆으로 밀리면 뒤에 뭐가 더 있는지 손님이 모른다) */
.b-pills{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 var(--gap) }
.b-pill{ font-size:var(--fs-note); color:var(--t1);
         background:var(--card); border:0.5px solid var(--line-strong);
         border-radius:var(--radius-pill); padding:7px 13px;
         white-space:nowrap; font-family:inherit; cursor:pointer }
.b-pill.on{ background:var(--sel); color:var(--on-sel);
            border-color:var(--sel); font-weight:500 }

/* 글자 링크 — 금색을 쓰지 않는다. 밑줄이 누를 수 있다는 표시다. */
.b-link{ color:var(--t2); text-decoration:underline;
         text-underline-offset:3px }

/* ── 목록 한 줄 ──────────────────────────────────────── */
.b-row{ background:var(--card); border:0.5px solid var(--line);
        border-radius:var(--radius); padding:11px 12px; margin-bottom:6px;
        display:flex; align-items:center; justify-content:space-between;
        gap:10px }
.b-row .name{ font-size:var(--fs-body); color:var(--t1) }
.b-row .side{ font-size:var(--fs-note); color:var(--t3); flex:none }

/* ── 화면 맨 아래 돌아가는 줄 ───────────────────────── */
.b-foot{ display:flex; gap:10px; margin:26px 0 0;
         padding-top:16px; border-top:0.5px solid var(--line) }
.b-foot a{ flex:1; text-align:center; padding:11px;
           font-size:var(--fs-note); color:var(--t2); text-decoration:none;
           border:0.5px solid var(--line-strong);
           border-radius:var(--radius-pill) }


/* ═══════════════════════════════════════════════════════════
   ★머리띠 — 2026-08-29 명식 확정. C안 보류는 끝났다.
   ───────────────────────────────────────────────────────────
   홈피(bench57.com) 네비와 같은 모습. 어두운 갈색 + 금색 로고.
   ★_brand_header.html 에서 {% set band = true %} 로 켠다.
   ★손님 길 화면에만 켠다 — 아직 어두운 방 화면에 얹으면 구분이 안 된다.
   ═══════════════════════════════════════════════════════════ */
.b-band{ background:var(--band); margin:0 -20px 16px; padding:16px 20px }
.b-band .b-h1{ color:var(--on-band) }
.b-band .b-note{ color:var(--on-band-dim) }