/* ============================================================ 가게친구 도움말 — docs 사이트 스타일 ============================================================ */ /* 폰트는 index.html 의 로 로딩합니다 (렌더링 블로킹 방지) */ :root{ --ink: #1c2321; --ink-soft: #4b544f; --paper: #f6f5f0; --paper-raised: #ffffff; --line: #e3e0d4; --line-strong: #cfccbe; --accent: #e2790f; /* 브랜드 오렌지 */ --accent-ink: #7a3e05; --accent-soft: #fbe9d2; --green: #3f8f5f; --green-soft: #e3f2e8; --blue: #2f6fa8; --blue-soft: #e4eff9; --red: #b8442b; --red-soft: #f8e6e1; --radius-s: 6px; --radius-m: 10px; --sidebar-w: 280px; --toc-w: 240px; --font-ui: 'PretendardVariable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Newsreader', 'Pretendard', serif; } @media (prefers-color-scheme: dark){ :root{ --ink: #ece9e1; --ink-soft: #b7b2a4; --paper: #17181a; --paper-raised: #1f2123; --line: #33352f; --line-strong: #46493f; --accent: #f0973b; --accent-ink: #ffd9ac; --accent-soft: #3a2a12; --green: #6cbf8e; --green-soft: #16261d; --blue: #75aede; --blue-soft: #14232f; --red: #e08066; --red-soft: #2c1a15; } } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: var(--font-ui); background: var(--paper); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; } a{ color: var(--accent); text-decoration: none; } a:hover{ text-decoration: underline; } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- 앱 레이아웃 ---------- */ .app{ display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); align-items: start; min-height: 100vh; } @media (max-width: 1180px){ .app{ grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .toc{ display: none; } } /* ---------- 사이드바 ---------- */ .sidebar{ border-right: 1px solid var(--line); background: var(--paper-raised); padding: 22px 18px 40px; overflow-y: auto; height: 100vh; position: sticky; top: 0; } .brand{ display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .brand-mark{ width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; display: block; } .brand-text{ line-height: 1.2; } .brand-text .name{ font-weight: 700; font-size: 15px; color: var(--ink); } .brand-text .sub{ font-size: 12px; color: var(--ink-soft); } .search{ position: relative; margin-bottom: 20px; } .search input{ width: 100%; font-family: var(--font-ui); font-size: 13.5px; padding: 9px 12px 9px 32px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); } .search input:focus{ border-color: var(--accent); } .search svg{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-soft); } .search-count{ font-size: 11.5px; color: var(--ink-soft); margin: 6px 2px 0; min-height: 14px; } .nav-group-title{ font-size: 11.5px; color: var(--ink-soft); margin: 18px 6px 8px; letter-spacing: .01em; } .nav-group-title:first-of-type{ margin-top: 0; } .nav-group-title.hidden{ display: none; } .nav-list{ list-style: none; margin: 0; padding: 0; } .nav-item a{ display: flex; align-items: baseline; gap: 9px; padding: 7px 8px; border-radius: var(--radius-s); color: var(--ink-soft); font-size: 13.8px; text-decoration: none; } .nav-item a .num{ font-family: var(--font-display); font-style: italic; font-size: 12.5px; color: var(--ink-soft); min-width: 30px; flex: none; } .nav-item a:hover{ background: var(--accent-soft); color: var(--ink); } .nav-item.active a{ background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .nav-item.active a .num{ color: var(--accent); } .nav-item.hidden{ display: none; } .sidebar-footer{ margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); } .sidebar-footer a{ color: var(--ink-soft); text-decoration: underline; } /* ---------- 상단 모바일 바 ---------- */ .topbar{ display: none; position: sticky; top: 0; z-index: 20; align-items: center; gap: 12px; padding: 12px 16px; background: var(--paper-raised); border-bottom: 1px solid var(--line); } @media (max-width: 860px){ .topbar{ display: flex; } } .menu-btn{ border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--radius-s); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); } .topbar .name{ font-weight: 700; font-size: 14.5px; } .topbar-mark{ width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; } /* ---------- 본문 ---------- */ .content-col{ min-width: 0; } main.doc{ max-width: 760px; margin: 0 auto; padding: 56px 32px 120px; } @media (max-width: 860px){ main.doc{ padding: 20px 20px 90px; } } .doc-kicker{ font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 17px; margin-bottom: 6px; } .doc h1{ font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.25; margin: 0 0 6px; color: var(--ink); } .doc .lede{ color: var(--ink-soft); font-size: 15.5px; margin: 10px 0 40px; max-width: 62ch; } .doc h2{ font-family: var(--font-display); font-weight: 600; font-size: 23px; margin: 48px 0 14px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); scroll-margin-top: 20px; } .doc h2:first-of-type{ border-top: none; margin-top: 0; padding-top: 0; } .doc h3{ font-size: 17.5px; font-weight: 700; margin: 30px 0 10px; color: var(--ink); scroll-margin-top: 20px; } .doc p{ margin: 0 0 15px; font-size: 15.3px; } .doc ul, .doc ol{ margin: 0 0 15px; padding-left: 22px; font-size: 15.3px; } .doc li{ margin-bottom: 5px; } .doc li > p { margin-bottom: 6px; } .doc strong{ color: var(--ink); } .doc code{ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; background: var(--accent-soft); color: var(--accent-ink); padding: 1px 6px; border-radius: 4px; } .doc a{ text-underline-offset: 2px; } .doc img{ max-width: 100%; border-radius: var(--radius-m); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20,20,10,.06); display: block; margin: 18px 0 22px; } .doc hr{ border: none; border-top: 1px solid var(--line); margin: 44px 0; } /* 표 */ .doc table{ width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 13.8px; } .doc th, .doc td{ border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; } .doc th{ background: var(--paper); font-weight: 700; color: var(--ink); } .doc tr:nth-child(even) td{ background: rgba(0,0,0,.012); } /* 콜아웃 (blockquote 자동 분류) */ .doc blockquote{ margin: 0 0 20px; padding: 13px 16px; border-radius: var(--radius-m); background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); font-size: 14.3px; color: var(--ink-soft); } .doc blockquote p{ margin: 0; font-size: inherit; } .doc blockquote p + p{ margin-top: 8px; } .doc blockquote.callout-note{ background: var(--blue-soft); border-color: var(--blue); color: var(--ink); } .doc blockquote.callout-warning{ background: var(--red-soft); border-color: var(--red); color: var(--ink); } .doc blockquote.callout-important{ background: var(--accent-soft); border-color: var(--accent); color: var(--ink); } .doc blockquote.callout-tip{ background: var(--green-soft); border-color: var(--green); color: var(--ink); } /* FAQ 문단 (Q. / A. 로 시작하는 문단) */ .doc p.faq-q{ margin-top: 22px; margin-bottom: 4px; font-weight: 700; } .doc p.faq-a{ margin-bottom: 18px; color: var(--ink-soft); } /* 문서 하단 페이지 이동 */ .pager{ display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); } .pager a{ flex: 1; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; color: var(--ink); text-decoration: none; font-size: 13.5px; transition: border-color .15s ease; } .pager a:hover{ border-color: var(--accent); text-decoration: none; } .pager a .dir{ display: block; color: var(--ink-soft); font-size: 11.5px; margin-bottom: 4px; } .pager a .title{ font-weight: 600; font-size: 14px; } .pager .next{ text-align: right; } .pager .placeholder{ visibility: hidden; } /* ---------- 우측 TOC ---------- */ .toc{ border-left: 1px solid var(--line); padding: 56px 22px; height: 100vh; position: sticky; top: 0; overflow-y: auto; } .toc-title{ font-size: 11.5px; color: var(--ink-soft); margin-bottom: 10px; } .toc-list{ list-style: none; margin: 0; padding: 0; } .toc-list li a{ display: block; padding: 5px 0; font-size: 12.8px; color: var(--ink-soft); border-left: 2px solid transparent; padding-left: 10px; margin-left: -1px; } .toc-list li a:hover{ color: var(--ink); text-decoration: none; } .toc-list li a.active{ color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; } /* ---------- 로딩 / 빈 상태 ---------- */ .loading, .doc-error{ padding: 80px 10px; text-align: center; color: var(--ink-soft); font-size: 14px; } /* ============================================================ 반응형 오버라이드 — 항상 파일 맨 끝에 둡니다. 위쪽 컴포넌트 규칙(.sidebar, .topbar 등)과 동일한 선택자를 다시 선언하는 경우, CSS는 "나중에 나온 선언"을 적용하므로 이 블록이 먼저 오면 미디어쿼리가 무시되는 문제가 생깁니다. ============================================================ */ @media (max-width: 860px){ .app{ grid-template-columns: minmax(0, 1fr); } .sidebar{ position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 0 rgba(0,0,0,0); } .sidebar.open{ transform: translateX(0); box-shadow: 20px 0 40px rgba(0,0,0,.18); } .scrim{ display: none; position: fixed; inset: 0; z-index: 39; background: rgba(20,20,18,.35); } .scrim.show{ display: block; } }