/* 묘수랩스 Myosu Labs 공통 스타일 (홈 · 소개 · 개인정보처리방침). 색 · 머리 부분은 계산기(template.html)와 같게 맞춤 */
:root{
  color-scheme: light;
  --page:#f9f9f7; --surface:#fcfcfb; --raised:#ffffff;
  --text:#0b0b0b; --text-2:#52514e; --tick:#72716b;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.10);
  --ref:#52514e; --seg:#f0efec; --focus:#2a78d6;
  --g1:#104281; --g2:#256abf; --g3:#5598e7; --g4:#86b6ef;
  --g1-ink:#ffffff; --g2-ink:#ffffff; --g3-ink:#0b0b0b; --g4-ink:#0b0b0b;
  --shadow:0 6px 24px rgba(11,11,11,.10);
  --err:#b42f2f;
  --hero-bg:#eef4fc; --hero-line:#b9d3f3;
  --me:#ff4d8d; --me-badge:#ff4d8d; --me-ink:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --raised:#242423;
    --text:#ffffff; --text-2:#c3c2b7; --tick:#898781;
    --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
    --ref:#c3c2b7; --seg:#262625; --focus:#3987e5;
    --g1:#b7d3f6; --g2:#6da7ec; --g3:#256abf; --g4:#184f95;
    --g1-ink:#0b0b0b; --g2-ink:#0b0b0b; --g3-ink:#ffffff; --g4-ink:#ffffff;
    --shadow:0 6px 24px rgba(0,0,0,.5);
    --err:#ff8a8a;
    --hero-bg:#1e2936; --hero-line:#2f5788;
    --me:#ff4d8d; --me-badge:#ff4d8d; --me-ink:#ffffff;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --raised:#242423;
  --text:#ffffff; --text-2:#c3c2b7; --tick:#898781;
  --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
  --ref:#c3c2b7; --seg:#262625; --focus:#3987e5;
  --g1:#b7d3f6; --g2:#6da7ec; --g3:#256abf; --g4:#184f95;
  --g1-ink:#0b0b0b; --g2-ink:#0b0b0b; --g3-ink:#ffffff; --g4-ink:#ffffff;
  --shadow:0 6px 24px rgba(0,0,0,.5);
  --err:#ff8a8a;
  --hero-bg:#1e2936; --hero-line:#2f5788;
  --me:#ff4d8d; --me-badge:#ff4d8d; --me-ink:#ffffff;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  font-size:14px; line-height:1.5; word-break:keep-all;
}
.page{max-width:1080px; margin:0 auto; padding:28px 16px 40px}

.head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px 24px; flex-wrap:wrap}
.head-text{flex:1 1 320px; min-width:0}
.head-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto}
.head-row{display:flex; align-items:center; gap:16px}
.theme-btn{display:inline-grid; place-items:center; flex-shrink:0; width:40px; height:40px; padding:0; border-radius:50%; border:1px solid var(--ring); background:var(--surface); color:var(--text); cursor:pointer}
.theme-btn:hover{background:var(--seg)}
.theme-btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.theme-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.theme-btn .ico-sun{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:block}
:root[data-theme="dark"] .theme-btn .ico-moon{display:none}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{display:block; width:60px; height:60px}
.brand-r{display:flex; flex-direction:column; align-items:flex-start; gap:7px}
.brand-name{display:block; font-size:19px; line-height:26px; font-weight:800; letter-spacing:-.01em; white-space:nowrap}
.sns{display:flex; align-items:center; gap:8px}
.sns a{display:block; line-height:0; border-radius:7px; transition:transform .12s}
.sns a:hover{transform:translateY(-1px)}
.sns a[href="#"]{opacity:.32; filter:grayscale(.85); cursor:default}
.sns a[href="#"]:hover{transform:none}
.sns a:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.sns img{display:block; height:24px; width:auto}
:root[data-theme="dark"] .sns a[data-sns="threads"] img{filter:drop-shadow(0 0 1px rgba(255,255,255,.55))}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .ico-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .ico-moon{display:none}
  :root:not([data-theme="light"]) .sns a[data-sns="threads"] img{filter:drop-shadow(0 0 1px rgba(255,255,255,.55))}
}
@media (max-width:640px){
  .head-side{order:-1; width:100%}
  .head-row{width:100%; justify-content:space-between}
  .brand-logo{width:52px; height:52px}
  .brand-name{font-size:17px; line-height:22px}
  .sns img{height:22px}
}
@media (prefers-reduced-motion: reduce){.sns a{transition:none}}
.head h1{margin:0 0 6px; font-size:24px; line-height:1.3; font-weight:700; letter-spacing:-.01em}
.lede{margin:0; max-width:64ch; color:var(--text-2)}
.brand-home{display:block; line-height:0; border-radius:50%}
.brand-home:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* ---------- 홈: 도구 목록 (site.json의 tools) */
.tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin:28px 0 0}
.tool{display:flex; flex-direction:column; gap:6px; padding:18px 18px 16px; border-radius:14px; border:1px solid var(--ring); background:var(--surface); color:var(--text); text-decoration:none; transition:transform .12s, box-shadow .12s}
.tool:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.tool:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.tool-title{font-size:17px; line-height:1.35; font-weight:700}
@media (prefers-reduced-motion: reduce){.tool{transition:none}}

/* ---------- 소개 · 개인정보처리방침: 읽는 글 */
.doc{max-width:68ch; margin-top:24px; font-size:15px; line-height:1.7}
.doc h2{margin:28px 0 8px; font-size:17px; line-height:1.4}
.doc p, .doc ul{margin:0 0 12px}
.doc ul{padding-left:1.2em}
.doc li{margin:4px 0}
.doc a{color:var(--focus)}

/* ---------- 모든 페이지 맨 아래: 사이트 메뉴 (계산기 template.html에도 같은 규칙) */
.site-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:40px; padding-top:14px; border-top:1px solid var(--grid); font-size:13px; color:var(--tick)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:4px 16px}
.site-foot a{color:var(--text-2); text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot a:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}

/* ---------- 홈(.hub): 링크트리처럼 가운데 한 줄 — 인스타 · 스레드 프로필 링크로 들어오는 첫 화면 */
.hub{position:relative; max-width:520px; padding-top:56px}
.hub .hub-theme{position:absolute; top:16px; right:16px}
.hub-head{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.hub-logo{display:block; width:192px; height:192px}
.hub-head h1{margin:6px 0 0; font-size:26px; line-height:1.3; font-weight:700; letter-spacing:-.01em}
.hub-head h1 span{display:block}            /* 한글 · 영문 이름을 두 줄로 */
.hub .sns{gap:14px; margin-top:6px}
.hub .sns img{height:32px}
.hub .sns a[href="#"]{display:none}
.hub .tools{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:32px}
.hub .tool{align-items:center; padding:16px 20px; border-radius:16px; text-align:center}
.hub .site-foot{flex-direction:column; justify-content:center; margin-top:40px; text-align:center}
.hub .site-foot nav{justify-content:center}