/* 한글웹 가족 공용 겉모양(맨 위 줄·리본·아래 상태 줄)의 모양 — family.js 에서 뺌(2026-10-23 '100점을 원해').
   index.html 머리에서 미리 읽어, 맨 위 줄을 붙일 때 페이지 전체 모양을 다시 계산하지 않게 함. 세 폴더(image·pdf·media)에 똑같이 복사 */
  :root { --fam-tabs: #e7e7ea; --fam-tab-ink: #5c5c62; --fam-tab-hover: rgba(0,0,0,.05); --fam-ribbon: #fafafb; --fam-status: #f6f6f7;
    --fam-line: rgba(0,0,0,.07); --fam-on: rgba(0,0,0,.09); --fam-icon: var(--brand, #626d7b); }
  :root[data-theme="dark"] { --fam-tabs: #1c1c1f; --fam-tab-ink: #a3a3aa; --fam-tab-hover: rgba(255,255,255,.06); --fam-ribbon: #2c2c30; --fam-status: #26262a;
    --fam-line: rgba(255,255,255,.07); --fam-on: rgba(255,255,255,.12); --fam-icon: var(--brand, #c6cdd8); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fam-tabs: #1c1c1f; --fam-tab-ink: #a3a3aa; --fam-tab-hover: rgba(255,255,255,.06); --fam-ribbon: #2c2c30; --fam-status: #26262a;
    --fam-line: rgba(255,255,255,.07); --fam-on: rgba(255,255,255,.12); --fam-icon: var(--brand, #c6cdd8); } }
  body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", system-ui, sans-serif; }
  .fam-top { display: flex; align-items: stretch; flex: none; min-height: 42px; background: var(--fam-tabs); position: relative; z-index: 4; }
  .fam-brand { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 14px; border: 0; background: none; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; flex: none; cursor: default; }
  button.fam-brand { cursor: pointer; }
  .fam-brand img { width: 24px; height: 24px; border-radius: 6px; }
  .fam-brand small { font-weight: 500; font-size: 13px; color: var(--muted); }
  /* 탭 줄은 남는 폭만 쓰고 모자라면 옆으로 밀림(휠로도), 오른쪽 덩어리는 줄지 않음(사무엘님 확정 2026-10-22 '창 폭 바꿔') */
  .fam-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .fam-tabs::-webkit-scrollbar { display: none; }
  .fam-tab { flex: none; height: 36px; min-width: 64px; padding: 0 18px; border: 0; border-radius: 8px 8px 0 0; background: none; color: var(--fam-tab-ink); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; }
  .fam-tab:hover { background: var(--fam-tab-hover); color: var(--text); }
  .fam-tab.on { background: var(--fam-ribbon); color: var(--text); font-weight: 600; }
  .fam-tab:focus-visible, .fam-rb:focus-visible { outline: 2px solid var(--brand, #0f8f94); outline-offset: -2px; }
  .fam-right { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 4px 12px; flex: none; }
  /* 폭 1,024px 미만: 로고 옆 제품 이름을 빼고 로고만(일곱 제품 같은 기준, 휴대폰 판은 그대로) */
  @media (max-width: 1023px) { html:not(.is-mobile) .fam-brand { gap: 0; } html:not(.is-mobile) .fam-brand .fam-name, html:not(.is-mobile) .fam-brand small { display: none; } }
  .fam-ribbon { display: flex; align-items: stretch; flex: none; min-height: 0; padding: 8px 12px 6px; background: var(--fam-ribbon); border-bottom: 1px solid var(--fam-line); overflow-x: auto; scrollbar-width: none; position: relative; z-index: 3; }
  .fam-ribbon::-webkit-scrollbar { display: none; }
  .fam-group { display: flex; flex-direction: column; flex: none; padding: 0 12px; border-right: 1px solid var(--fam-line); }
  .fam-group:first-child { padding-left: 2px; }
  .fam-group:last-child { border-right: 0; }
  .fam-items { display: flex; align-items: flex-start; gap: 6px; flex: 1; }
  /* 리본 묶음 이름 줄은 두지 않음 — 묶음은 구분선으로 알 수 있음(한글웹·셀웹·슬라이드웹과 같음, 사무엘님 지시 2026-10-19 '카테고리 분류 텍스트 라벨 다 없애, 디바이더로 알 수 있어', 2026-10-21 '탭들 하단에 사진 저장형식 이런거 하지 말라고 했잖아') */
  .fam-gname { display: none; }
  .fam-rb { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 72px; padding: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
  .fam-rb .ic { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--fam-icon); transition: transform .12s ease; }
  .fam-rb .ic svg, .fam-rb .ic img { width: 28px; height: 28px; }
  .fam-rb:hover { background: color-mix(in srgb, var(--panel, #fff) 52%, transparent); box-shadow: inset 0 0 0 1px var(--fam-line), 0 1px 2px rgba(0,0,0,.035); }
  .fam-rb:active .ic { transform: scale(.95); }
  .fam-rb.on { background: color-mix(in srgb, var(--fam-icon) 13%, transparent); box-shadow: none; }
  .fam-rb:disabled { opacity: .4; cursor: default; background: none; box-shadow: none; }
  @media (prefers-reduced-motion: reduce) { .fam-rb, .fam-rb .ic { transition: none; } }
  .fam-status { display: flex; align-items: center; gap: 14px; flex: none; min-height: 28px; padding: 3px 10px; background: var(--fam-status); border-top: 1px solid var(--fam-line); color: var(--muted); font-size: 12.5px; position: relative; z-index: 3; }
  .fam-status .fam-left { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fam-status .fam-sp { flex: 1; }
  .fam-status select { height: 22px; padding: 0 4px; border: 1px solid var(--line, #d3d7dd); border-radius: 6px; background: var(--panel, #fff); color: var(--text); font-family: inherit; font-size: inherit; }
  .fam-status .fam-link { border: 0; background: none; padding: 0 2px; color: var(--muted); font-family: inherit; font-size: inherit; cursor: pointer; opacity: .75; }
  .fam-status .fam-link:hover { opacity: 1; text-decoration: underline; }
  @media (max-width: 760px) {
    .fam-brand { padding: 0 6px 0 12px; }
    .fam-tab { min-width: 0; padding: 0 12px; font-size: 15px; height: 38px; }
    .fam-ribbon { min-height: 0; padding: 6px 8px 4px; }
    .fam-group { padding: 0 6px; }
    .fam-rb { min-width: 58px; padding: 4px; gap: 4px; font-size: 12.5px; }
    .fam-rb .ic { width: 28px; height: 28px; }
    .fam-rb .ic svg, .fam-rb .ic img { width: 24px; height: 24px; }
    .fam-gname { display: none; }
    .fam-status { flex-wrap: wrap; row-gap: 2px; }
  }

/* 스크롤 막대: 가늘고 둥근 회색 막대, 화살표·흰 바탕 칸 없음 — 가족 공통 모양(2026-10-26 사무엘님 지시 '스크롤도 우리 디자인 시스템에 맞게', '전부 다 적용해').
   크롬·엣지·사파리는 ::-webkit-scrollbar, 파이어폭스는 scrollbar-width·color. 숨긴 곳(scrollbar-width:none·display:none)은 그대로 숨김 */
:root { --sb-thumb: rgba(60, 64, 72, .28); --sb-thumb-hover: rgba(60, 64, 72, .46); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-thumb: rgba(235, 237, 242, .24); --sb-thumb-hover: rgba(235, 237, 242, .42); } }
:root[data-theme="dark"] { --sb-thumb: rgba(235, 237, 242, .24); --sb-thumb-hover: rgba(235, 237, 242, .42); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); background-clip: padding-box; border: 2px solid transparent; border-radius: 999px; min-height: 32px; min-width: 32px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } }