/* ============================================================
   coden 공통 크롬 — 모든 페이지가 함께 쓰는 머리글(헤더), 앱 메뉴 막대, 바닥글(푸터)과 그 토큰.

   마크업은 생성기(scripts/build-coden-pages.py)가 한 곳에서 만들어 모든 페이지에 똑같이 넣는다.
   이 파일은 coden 페이지(입구·앱·오픈소스·인생샷), 문서 페이지(지원·개인정보), 그리고
   예전 스타일을 그대로 쓰는 Storage Medic·Nits 제품 페이지와 인생샷 데모가 모두 불러온다.

   왜 이렇게 막아 두나
   - 예전 스타일(styles-title-mobile-left.css, 제품 스타일)은 .display-options, .mode-button,
     nav a, h2, svg 같은 이름을 넓게 꾸미고, --ink·--bg 같은 토큰도 제품마다 다른 값으로 덮는다.
   - 그래서 1) 토큰은 --cd-* 이름으로 따로 두고, 2) 모든 규칙을 크롬의 id(#top, #product-bar,
     #site-footer) 아래에 둬서 어떤 클래스 선택자보다도 이기게 하고, 3) 크롬 안의 요소는 먼저
     all: revert 로 브라우저 기본값으로 되돌린 뒤 필요한 것만 다시 정한다. 예전 스타일이 정한 속성 중
     여기서 건드리지 않은 것이 새어 들어오지 않게 하려는 것이다.
   - SVG 안쪽은 되돌리지 않는다. path 의 d, rect 의 x·y·width 같은 모양 속성도 CSS 속성이라
     되돌리면 브라우저 기본값(없음)이 되어 그림이 사라진다.
   ============================================================ */

/* ------------------------------------------------------------ 토큰
   밝은 값이 기본이다. 어두운 값과 고대비 값은 같은 이름을 덮는다. coden.css 는 이 값을 별칭으로 쓴다. */
:root {
  --cd-bg: #ffffff;
  --cd-surface: #f3f4f6;
  --cd-surface-2: #e8eaee;
  --cd-ink: #0e1014;
  --cd-ink-2: #4b515c;
  --cd-ink-3: #6b717c;
  --cd-line: #e3e5e9;
  --cd-line-strong: #c9ccd3;
  --cd-signal: #ff4f1f;          /* 로고의 네모 마침표. '고른 것' 표시에만 쓴다 */
  --cd-signal-text: #c43a0e;     /* 흰 바탕 위 글자용(대비 5.3:1) */
  --cd-on-signal: #0e1014;
  --cd-night: #0a0e18;           /* 테마와 상관없이 늘 어두운 면(오픈소스 문, 그래프 히어로) */
  --cd-night-2: #151c2c;
  --cd-on-night: #f5f6f8;
  --cd-on-night-2: #a7afc0;
  --cd-focus: var(--cd-signal);
  --cd-shadow-lift: 0 1px 2px rgba(14, 16, 20, 0.06), 0 18px 40px -18px rgba(14, 16, 20, 0.28);
  --cd-font-sans: "Wanted Sans", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --cd-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cd-wrap: 1200px;
  --cd-gutter: clamp(16px, 4vw, 40px);
  --cd-header-height: 64px;
}
html[data-resolved-theme="dark"] {
  --cd-bg: #0c0e12;
  --cd-surface: #15181e;
  --cd-surface-2: #1d2129;
  --cd-ink: #f2f3f5;
  --cd-ink-2: #aab0bb;
  --cd-ink-3: #8a909b;
  --cd-line: #252931;
  --cd-line-strong: #3a3f4a;
  --cd-signal-text: #ff7a52;
  --cd-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
/* 고대비: 검은 바탕 한 벌로 고정한다. 선은 노란색으로 두껍게, 회색 글자는 거의 흰색으로 올린다. */
html[data-contrast="high"] {
  --cd-bg: #000000;
  --cd-surface: #0b0d10;
  --cd-surface-2: #14171c;
  --cd-ink: #ffffff;
  --cd-ink-2: #f0f2f5;
  --cd-ink-3: #d8dce2;
  --cd-line: #8a909b;
  --cd-line-strong: #f4d35e;
  --cd-signal: #ff6a3d;
  --cd-signal-text: #ff9a7a;
  --cd-on-signal: #000000;
  --cd-night: #000000;
  --cd-night-2: #0b0d10;
  --cd-on-night: #ffffff;
  --cd-on-night-2: #e6e9ee;
  --cd-focus: #f4d35e;
  --cd-shadow-lift: none;
}
/* Nits 처럼 고대비에서도 밝은 바탕을 고를 수 있는 페이지(data-high-contrast-color-scheme="theme")의 밝은 고대비 */
html[data-contrast="high"][data-high-contrast-color-scheme="theme"][data-resolved-theme="light"] {
  --cd-bg: #ffffff;
  --cd-surface: #f2f2f2;
  --cd-surface-2: #e6e6e6;
  --cd-ink: #000000;
  --cd-ink-2: #111111;
  --cd-ink-3: #222222;
  --cd-line: #444444;
  --cd-line-strong: #000000;
  --cd-signal: #c43a0e;
  --cd-signal-text: #9a2c08;
  --cd-on-signal: #ffffff;
  --cd-focus: #000000;
}

/* ------------------------------------------------------------ 격리
   크롬 안의 모든 요소(SVG 안쪽 제외)를 브라우저 기본값으로 되돌린다. 아래 규칙은 이보다 구체적이라 이긴다. */
:is(#top, #product-bar, #site-footer),
:is(#top, #product-bar, #site-footer) :not(svg, svg *) {
  all: revert;
  box-sizing: border-box;
}
:is(#top, #product-bar, #site-footer) {
  font-family: var(--cd-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;              /* coden 본문과 같은 줄 높이(푸터 목록 간격이 여기서 나온다) */
  letter-spacing: -0.006em;
  color: var(--cd-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:is(#top, #product-bar, #site-footer) :focus-visible {
  outline: 2.5px solid var(--cd-focus);
  outline-offset: 3px;
  border-radius: 8px;
}
:is(#top, #product-bar, #site-footer) [hidden] { display: none; }
:is(#top, #product-bar, #site-footer) .wrap {
  display: block;
  width: 100%;
  max-width: var(--cd-wrap);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
}

/* ------------------------------------------------------------ 헤더 */
#top.site-header {
  display: block;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  margin: 0;
  background: color-mix(in srgb, var(--cd-bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--cd-line) 70%, transparent);
}
html[data-contrast="high"] #top.site-header { background: var(--cd-bg); border-bottom-color: var(--cd-line); }
/* 본문으로 건너뛰기: 헤더 맨 앞에 두고, 키보드로 닿을 때만 보인다 */
#top .skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--cd-ink); color: var(--cd-bg); padding: 10px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.9375rem;
}
#top .skip-link:focus { top: 12px; }
#top .header-row { display: flex; align-items: center; gap: 28px; height: var(--cd-header-height); }
#top .brand { display: inline-flex; align-items: center; color: var(--cd-ink); text-decoration: none; border-radius: 8px; }
#top .brand svg { display: block; width: 92px; height: auto; }
:is(#top, #site-footer) .wordmark-ink { fill: currentColor; }
:is(#top, #site-footer) .wordmark-dot { fill: var(--cd-signal); }
#top .site-nav { display: flex; gap: 4px; margin-right: auto; }
#top .site-nav a {
  text-decoration: none; font-weight: 650; font-size: 0.9375rem; color: var(--cd-ink-2);
  padding: 8px 12px; border-radius: 999px; transition: background-color 0.15s, color 0.15s;
}
#top .site-nav a:hover { color: var(--cd-ink); background: var(--cd-surface); }
#top .site-nav a[aria-current="page"] { color: var(--cd-ink); background: var(--cd-surface); }
html[data-contrast="high"] #top .site-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--cd-line-strong); }
#top .header-tools { display: flex; gap: 6px; align-items: center; }
#top .tool-button {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; margin: 0;
  border: 1px solid var(--cd-line); border-radius: 999px; background: var(--cd-bg); color: var(--cd-ink);
  cursor: pointer; font-family: inherit; font-weight: 750; font-size: 0.8125rem; line-height: inherit; letter-spacing: 0.02em;
  list-style: none; transition: border-color 0.15s, background-color 0.15s;
}
#top .tool-button::-webkit-details-marker { display: none; }
#top .tool-button:hover { border-color: var(--cd-line-strong); background: var(--cd-surface); }
#top .tool-button svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-contrast="high"] #top .tool-button { border-color: var(--cd-line-strong); }
/* 고대비는 검은 바탕 한 벌이라 테마 버튼을 숨긴다(밝은 고대비를 고를 수 있는 페이지는 남긴다) */
html[data-contrast="high"]:not([data-high-contrast-color-scheme="theme"]) #top [data-theme-toggle] { display: none; }

/* 언어 버튼은 '바꿀 언어'를 보여 준다. 한국어 화면이면 EN, 영어 화면이면 한.
   이름(aria-label)은 공용 스크립트가 맞추므로 글자는 화면용으로만 쓴다. */
#top .lang-label-ko { display: none; }
html[data-site-lang="en"] #top .lang-label-ko { display: inline; }
html[data-site-lang="en"] #top .lang-label-en { display: none; }
/* 테마 아이콘은 지금 테마의 반대쪽을 보여 준다(.tool-button svg 의 display 보다 구체적이어야 이긴다) */
#top .theme-toggle .theme-icon-sun { display: none; }
html[data-resolved-theme="dark"] #top .theme-toggle .theme-icon-sun { display: block; }
html[data-resolved-theme="dark"] #top .theme-toggle .theme-icon-moon { display: none; }

/* 글자·대비 설정. 여닫기·바깥 클릭·Esc 처리는 공용 스크립트(details.display-options)가 맡는다. */
#top .display-options { display: block; position: relative; }
#top .display-options > summary { cursor: pointer; }
#top .display-options[open] > summary { border-color: var(--cd-ink); }
#top .display-options-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: grid; gap: 14px; padding: 16px; min-width: 232px;
  background: var(--cd-bg); border: 1px solid var(--cd-line-strong); border-radius: 16px; box-shadow: var(--cd-shadow-lift);
}
#top .mode-group { display: inline-grid; grid-template-columns: repeat(2, max-content); gap: 6px; align-items: center; }
#top .mode-label { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 700; color: var(--cd-ink-2); }
#top .mode-button {
  min-height: 36px; padding: 0 14px; margin: 0; border-radius: 999px; border: 1px solid var(--cd-line-strong);
  background: var(--cd-bg); color: var(--cd-ink); font-family: inherit; font-weight: 650; font-size: 0.875rem; cursor: pointer;
}
#top .mode-button:hover { background: var(--cd-surface); }
#top .mode-button[aria-pressed="true"] { background: var(--cd-ink); color: var(--cd-bg); border-color: var(--cd-ink); }

@media (max-width: 560px) {
  #top .header-row { gap: 10px; }
  #top .brand svg { width: 78px; }
  #top .site-nav { gap: 0; }
  #top .site-nav a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 9px; font-size: 0.875rem; }
  #top .header-tools { gap: 4px; }
  #top .tool-button { min-width: 36px; height: 36px; padding: 0 8px; }
  /* 좁은 화면에서는 헤더 아래 화면 폭에 맞춰 띄운다 */
  #top .display-options-panel { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--cd-header-height) + 8px); left: 16px; right: 16px; min-width: 0; }
}

/* ------------------------------------------------------------ 앱 메뉴 막대
   앱 하나에 딸린 페이지(소개·데모·지원·개인정보)를 오가는 막대. 헤더 바로 아래에 두고 따라 내려오지 않는다.
   왼쪽은 앱 이름, 가운데는 그 앱의 페이지, 오른쪽은 받기 같은 바로가기 하나. */
#product-bar.product-bar { display: block; background: var(--cd-bg); border-bottom: 1px solid var(--cd-line); }
#product-bar .product-bar-row { display: flex; align-items: center; gap: 8px 18px; min-height: 60px; padding-block: 10px; }
#product-bar .product-bar-name {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--cd-ink); text-decoration: none; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; border-radius: 8px;
}
#product-bar .product-bar-name img { display: block; width: 30px; height: 30px; border-radius: 7px; }
#product-bar .product-bar-links {
  display: flex; gap: 2px; margin: 0 auto 0 0; padding: 0 0 0 16px; list-style: none;
  border-left: 1px solid var(--cd-line); min-width: 0; overflow-x: auto; scrollbar-width: none;
}
#product-bar .product-bar-links::-webkit-scrollbar { display: none; }
#product-bar .product-bar-links:empty { display: none; }
#product-bar .product-bar-links li { display: block; flex: none; }
#product-bar .product-bar-links a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 999px;
  color: var(--cd-ink-2); text-decoration: none; font-weight: 650; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
#product-bar .product-bar-links a:hover { color: var(--cd-ink); background: var(--cd-surface); }
#product-bar .product-bar-links a[aria-current="page"] { color: var(--cd-ink); background: var(--cd-surface); }
html[data-contrast="high"] #product-bar .product-bar-links a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--cd-line-strong); }
#product-bar .product-bar-action {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 0 16px; margin-left: auto;
  border-radius: 999px; border: 1.5px solid var(--cd-ink); background: var(--cd-ink); color: var(--cd-bg);
  text-decoration: none; font-weight: 750; font-size: 0.875rem; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
#product-bar .product-bar-action:hover { background: color-mix(in srgb, var(--cd-ink) 86%, var(--cd-signal)); }
#product-bar .product-bar-action svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 언어 바꾸기처럼 가벼운 바로가기는 테두리만 */
#product-bar .product-bar-action.is-quiet { background: transparent; color: var(--cd-ink); border-color: var(--cd-line-strong); }
#product-bar .product-bar-action.is-quiet:hover { border-color: var(--cd-ink); background: transparent; }
html[data-contrast="high"] #product-bar .product-bar-action { border-color: var(--cd-line-strong); }

@media (max-width: 640px) {
  /* 좁은 화면: 첫 줄에 앱 이름과 바로가기, 둘째 줄에 페이지(넘치면 옆으로 민다) */
  #product-bar .product-bar-row { flex-wrap: wrap; padding-block: 10px 6px; }
  #product-bar .product-bar-links { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--cd-gutter)); padding: 2px var(--cd-gutter) 4px; border-left: 0; }
  #product-bar .product-bar-links a { min-height: 40px; padding: 0 11px; font-size: 0.875rem; }
  #product-bar .product-bar-links li:first-child a { margin-left: -11px; }
  #product-bar .product-bar-action { min-height: 36px; padding: 0 14px; font-size: 0.8125rem; }
}

/* ------------------------------------------------------------ 푸터 */
#site-footer.site-footer { display: block; border-top: 1px solid var(--cd-line); padding-block: 56px 40px; background: var(--cd-bg); color: var(--cd-ink); }
#site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
#site-footer .footer-brand { display: grid; gap: 14px; align-content: start; }
#site-footer .footer-brand svg { display: block; width: 104px; height: auto; color: var(--cd-ink); }
#site-footer .footer-brand p { margin: 0; color: var(--cd-ink-2); max-width: 22em; }
#site-footer .footer-col { display: block; }
#site-footer .footer-col h2 { display: block; font-size: 0.875rem; font-weight: 750; margin: 0 0 12px; color: var(--cd-ink); }
#site-footer .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#site-footer .footer-col li { display: block; }
#site-footer .footer-col a { color: var(--cd-ink-2); text-decoration: none; font-size: 0.9375rem; }
#site-footer .footer-col a:hover { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 0.2em; }
#site-footer .footer-base {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--cd-line); color: var(--cd-ink-3); font-size: 0.875rem;
}
#site-footer .footer-base p { margin: 0; }
#site-footer .foot-contact { color: var(--cd-ink-2); text-decoration: none; }
#site-footer .foot-contact:hover { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 0.2em; }
#site-footer .foot-top { color: var(--cd-ink-3); text-decoration: none; margin-right: auto; }
#site-footer .foot-top:hover { color: var(--cd-ink); }
@media (max-width: 860px) {
  #site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  #site-footer .footer-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#top, #product-bar, #site-footer) * { transition-duration: 0.01ms; }
}