/* 남영 마선생 — 보조 페이지 공용 토큰(소개·약관·가이드·예시·일간).
   정본은 web/index.html <style>의 :root(본편은 단일 파일 PWA 원칙으로 인라인 유지).
   아래 첫 블록은 그 정본의 복사본이며 scripts/check_site_tokens.py가 일치를 검사한다.
   2026-09-07 UI 감사 4단계: 옛 세대 토큰(#f1ede3/#2c4a40/#3a5a52/#a8843e)을 걷어내고 본편과 한 팔레트로. */
:root{
  color-scheme:light;
  --paper-0:#FBF8F3; --paper-1:#F5F0E7; --paper-2:#EDE6D9;
  --ink-1:#100E0C; --ink-2:#211E1A; --ink-3:#4A453D; --ink-4-solid:#6F685C;
  --surface-0:#FFFFFF; --surface-1:#FCFAF6;
  --wood:#4F726B; --fire:#B25B49; --earth:#BD954C; --metal:#9A958C; --water:#3C4654;
  --wood-soft:#DCE6E2; --fire-soft:#F0DDD6; --earth-soft:#EFE6CF; --metal-soft:#ECE9E2; --water-soft:#DCE0E6;
  --gold:#A8803A; --gold-soft:#EFE4CE;
  --gold-tx:color-mix(in srgb,var(--gold) 72%,var(--ink-2));
  --oh-tx-wood:var(--wood); --oh-tx-fire:var(--fire); --oh-tx-water:var(--water);
  --oh-tx-earth:color-mix(in srgb,var(--earth) 62%,var(--ink-2));
  --oh-tx-metal:color-mix(in srgb,var(--metal) 72%,var(--ink-2));
  --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --fs-1:.625rem; --fs-2:.6875rem; --fs-3:.75rem; --fs-4:.8125rem; --fs-5:.90625rem; --fs-6:1rem; --fs-7:1.125rem; --fs-8:1.25rem;
  --bg:var(--paper-0); --bg-top:var(--paper-0); --card:var(--surface-0); --ink:var(--ink-2); --muted:var(--ink-4-solid);
  --line:var(--paper-2); --accent:var(--ink-2); --accent-soft:var(--paper-1); --warn:var(--fire);
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  --hanja:"Noto Serif KR",serif;
  --shadow:0 4px 12px rgba(33,30,26,.08), 0 1px 3px rgba(33,30,26,.05);
  --shadow-sm:0 1px 3px rgba(33,30,26,.07), 0 1px 2px rgba(33,30,26,.04);
  --ease-quick:cubic-bezier(.4,0,.2,1); --ease-standard:cubic-bezier(.32,.72,0,1); --ease-enter:cubic-bezier(.16,.6,.3,1);
}
/* 보조 페이지 별칭 — 페이지 안 규칙이 쓰는 옛 이름을 정본 토큰에 붙인다 */
:root{
  color-scheme:light;
  --cream:var(--paper-0);
  --ink2:var(--ink-3);
}

/* @shared:bar */
  .bar{position:sticky;top:0;background:rgba(248,244,236,.84);backdrop-filter:blur(12px) saturate(1.1);max-width:520px;margin:0 auto;
    display:flex;align-items:center;gap:7px;padding:calc(env(safe-area-inset-top) + 13px) 13px 13px;z-index:10;
    border-bottom:1px solid color-mix(in srgb,var(--gold) 32%,transparent);box-shadow:0 3px 0 -2px color-mix(in srgb,var(--gold) 14%,transparent)}  /* 금니 이중선 */
  .bar .barlogo{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .bar .barplaque{height:32px;width:auto;display:block;border-radius:5px;flex:0 0 auto}
  .bar #barTitle{font-family:var(--serif);font-size:var(--fs-6);font-weight:700;margin:0;letter-spacing:0;color:var(--ink);flex:0 0 auto;white-space:nowrap}
  /* justify-content:flex-end + overflow-x는 넘친 내용을 '왼쪽'으로 밀어내 로고를 덮는다(플렉스 기지 동작).
     margin-left:auto로 오른쪽 정렬하면 넘침이 정상적으로 오른쪽에 생겨 스크롤로 닿을 수 있다. */
  .bar .navgrp{display:flex;align-items:center;gap:4px;flex:0 1 auto;margin-left:auto;overflow-x:auto;scrollbar-width:none}
  .bar .navbtn{flex:0 0 auto}
  /* 좁은 화면에서는 버튼 줄을 통째로 아래로 내린다 — 한 줄에 욱여넣으면 글자가 잘리거나
     로고를 덮는다(플렉스에서 justify-content:flex-end + overflow는 넘침을 왼쪽으로 민다).
     데스크톱은 지금처럼 로고 오른쪽 한 줄. */
  @media (max-width:440px){
    .bar{flex-wrap:wrap;row-gap:7px}
    .bar .barlogo{flex:1 1 100%}
    .bar .navgrp{flex:1 1 100%;margin-left:0;justify-content:flex-start;overflow-x:visible}
  }
  .bar .navgrp::-webkit-scrollbar{display:none}
  .bar .navbtn{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.6);border-radius:999px;padding:5px 8px;
    font-size:var(--fs-2);color:var(--muted);cursor:pointer;font-family:inherit;flex:0 0 auto;white-space:nowrap;transition:background .15s ease,border-color .15s ease}
  .bar .navbtn::before{content:"";position:absolute;inset:-9px -3px}  /* 탭 타깃 26→44px, 겉모양 불변 */
  .bar .navbtn svg{width:13px;height:13px;margin-right:2px}
  .bar .navbtn:hover{border-color:var(--accent);color:var(--accent)}
  .bar .navbtn:active{transform:translateY(1px)}
/* @/shared:bar */
/* 보조 페이지용 — 본편과 같은 바를 본문 폭(760)에 맞추고 button 대신 a를 쓴다 */
.bar{max-width:760px}
.bar a.barlogo{text-decoration:none;color:inherit}
.bar a.navbtn{text-decoration:none;display:inline-flex;align-items:center;color:var(--muted)}
.bar a.navbtn.on{color:var(--ink);border-color:var(--ink)}

/* @shared:footer */
  .sitedisc{max-width:620px;margin:26px auto 0;padding:0 4px;font-size:var(--fs-3);line-height:1.7;color:var(--muted);opacity:.8;text-align:center}
  .copyr{text-align:center;font-size:var(--fs-2);color:var(--muted);opacity:.65;padding:18px 0 2px;letter-spacing:.02em}
  .copyr .flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin-bottom:9px}
  .copyr .flinks a{color:var(--accent);text-decoration:none;opacity:.95;padding:6px 9px;border-right:1px solid var(--line)}
  .copyr .flinks a:last-child{border-right:none}
/* @/shared:footer */

/* 개념↔사례 횡적 링크(2026-09-08) — 세 시리즈(가이드·일간·예시)가 홈에서만 이어지던 평면을
   주제 축으로 잇는다. .xlink는 개념 페이지의 사례 묶음이자 예시 페이지의 개념 묶음으로,
   본문이 아니라 CTA 뒤 한 곳에만 둔다. @shared 블록 밖이라 check_site_tokens와 무관. */
.xlink{margin:30px 0 0;padding:15px 17px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.xlink b{display:block;font-family:var(--serif);font-size:var(--fs-1);margin-bottom:9px}
.xlink ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px 12px}
.xlink li{font-size:var(--fs-2)}
.xlink a{color:var(--accent);text-decoration:none}
.xlink a:hover{text-decoration:underline}