/* =========================================================================
   Relume 계열 테마 레이어 (사이트 v1.6.0, 2026-10-26 사용자 요청)
   design-system.css(DESIGN.md) 뒤에 불러와 아래 7가지만 덮어씁니다.
   1 배경 웜그레이  2 글자·사이드바 중성 검정  3 강조색 바이올렛
   4 제목 굵기 500  5 Geist + Pretendard, 라벨은 Geist Mono 대문자
   6 카드 인셋 헤어라인 + 호버 시 떠오름  7 바이올렛 모눈·빛 번짐 히어로
   그 밖의 DESIGN.md 규칙(12px 이상 글자, 44px 터치 영역, 간격, 로고)은 유지합니다.
   되돌리려면 src/layout.mjs에서 이 파일 링크 한 줄을 지우세요.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

:root{
  /* 1·2 배경과 글자 */
  --color-paper:#F1F0EE;
  --color-ink:#101010;
  --color-slate:#5C5C5C;
  --color-line:rgba(27,25,25,.1);
  --color-fill:color-mix(in srgb,#101010 5%,#F1F0EE);
  --color-border-strong:rgba(27,25,25,.22);
  /* 3 강조색: 디자인서랍 바이올렛. 주요 버튼·작은 라벨·링크·선택 상태에만 */
  --color-blue:#5B33F0;
  --color-blue-soft:color-mix(in srgb,#5B33F0 9%,#FFFFFF);
  --color-primary-hover:#4A24D8;
  --accent-soft:#CBBDFF;
  /* 5 글꼴 */
  --font-sans:"Geist","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-label:"Geist Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;
  --fw-heavy:500;
  /* 6 카드 */
  --line-inset:inset 0 0 0 1px var(--color-line);
  --lift:inset 0 0 0 1px var(--color-line),0 3px 10px -4px rgba(22,22,22,.2);
  /* 동작 */
  --duration-fast:.2s;--duration-base:.2s;
}

/* 4 제목: 굵기 500, 한글 자간 -0.02~-0.03em */
h1,h2,h3,.hero h1,.page-intro h1,.guide-heading h1,.detail-heading h1,.info-article h1,.not-found h1,.section-heading h2,.prose h2,.guide-section h2,.article-section h2,.article-faq>h2,.related-section h2,.info-article h2,.editor-note h2,.card-title h3,.insight-card h3,.group-card h3,.collection-card h3,.key-summary h2,.source-box h2,.resource-summary h2{font-weight:500}
.hero h1{letter-spacing:-.03em}
.page-intro h1,.guide-heading h1,.detail-heading h1,.info-article h1,.section-heading h2,.prose h2{letter-spacing:-.025em}
.card-title h3,.insight-card h3,.group-card h3,.collection-card h3,.prose h3,.faq-item summary h3{letter-spacing:-.02em;font-weight:500}
.hero .stat-num{font-weight:400;letter-spacing:-.03em}
.tool-name,.side-link.active,.header-nav a[aria-current=page],.category-tab.active{font-weight:500}

/* 5 작은 라벨: Geist Mono 대문자, 바이올렛 */
.eyebrow,.hero-eyebrow,.section-heading .eyebrow,.collection-card .eyebrow,.editor-note .eyebrow,.detail-heading .eyebrow,.page-intro>.eyebrow,.guide-heading>.eyebrow,.info-article>.eyebrow,.summary-label,.article-toc>span,.editor-tip>span,.section-number,.article-section>.section-number{font-family:var(--font-label);font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:var(--color-primary)}
.insight-cat,.media-category,.price-badge,.count-badge,.side-link small,.tool-domain,.insight-meta,.group-count{font-family:var(--font-label)}
.collection-dark .eyebrow{color:var(--accent-soft)}

/* 2 사이드바: 중성 검정 + 흰 로고 */
.sidebar{background:var(--color-ink);color:#C9C7C2;scrollbar-color:#3a3a3a transparent}
.sidebar-label{font-family:var(--font-label);text-transform:uppercase;color:#8A8986}
.side-link{color:#C9C7C2}
.side-link>.icon{color:#8A8986}
.side-link:hover{background:rgba(241,240,238,.07);color:#F1F0EE}
.side-link.active{background:rgba(241,240,238,.12);color:#F1F0EE}
.side-link.active>.icon{color:var(--accent-soft)}
.side-link small{background:rgba(255,255,255,.08);color:#C9C7C2}
.side-link.active small{background:rgba(255,255,255,.14);color:#F1F0EE}
.sidebar-divider{background:#2A2A2A}
.sidebar-bottom p{color:#F1F0EE}
.sidebar-bottom>span,.sidebar-bottom>span:last-of-type{color:#8A8986}
.sidebar-bottom>a{color:var(--accent-soft)}
.top-search{background:transparent;border:0;box-shadow:inset 0 0 0 1px #3A3A3A}
.top-search input,.top-search input::placeholder,.top-search>.icon,.top-search button{color:#C9C7C2}
.top-search button:hover{background:rgba(255,255,255,.08);color:#F1F0EE}
.top-search .kbd{background:#1D1D1D;border-color:#3A3A3A;color:#8A8986}
.content-wrap{border-left:0}
@media(max-width:900px){.sidebar.mobile-open{background:var(--color-ink);border:1px solid #2A2A2A}}

/* 3 강조색 */
::selection{background:var(--accent-soft)}
.status-dot,.dot-live{background:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,#5B33F0 18%,transparent)}
.prose blockquote,.editor-tip{border-left-color:var(--color-primary)}

/* 6 카드: 16px, 얇은 안쪽 선만. 호버 때만 살짝 떠오름 */
.resource-card,.group-card,.insight-card,.tool-link,.collection-card,.resource-summary,.key-summary,.article-toc,.source-box,.contact-note,.editor-note,.empty-state,.table-wrap{border:0;box-shadow:var(--line-inset);border-radius:16px}
.resource-card,.group-card,.insight-card,.tool-link,.collection-card{background:rgba(255,255,255,.72);transition:background var(--duration-fast) ease,box-shadow var(--duration-fast) ease,transform var(--duration-fast) ease-out}
.resource-card:hover,.group-card:hover,.insight-card:hover,.tool-link:hover,.collection-card:hover{background:#FFFFFF;box-shadow:var(--lift);transform:translateY(-2px)}
.collection-dark{background:var(--color-ink);box-shadow:none}.collection-dark:hover{background:var(--color-ink)}
.detail-cover{border:0;box-shadow:var(--line-inset)}
@media (prefers-reduced-motion:reduce){.resource-card:hover,.group-card:hover,.insight-card:hover,.tool-link:hover,.collection-card:hover{transform:none}}

/* 버튼: 주 버튼 바이올렛, 보조 버튼은 투명 바탕 + 얇은 선 */
.button,.save-button,.icon-button,.view-button,.circle-link,.header-saved,.category-tab,.tag{background:transparent;border:0;box-shadow:var(--line-inset)}
.button:hover,.save-button:hover,.icon-button:hover,.view-button:hover,.circle-link:hover,.header-saved:hover,.category-tab:hover{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.button.primary{background:var(--color-primary);color:#fff;box-shadow:none}
.button.primary:hover{background:var(--color-primary-hover);color:#fff;box-shadow:none}
.card-media>.save-button{background:rgba(255,255,255,.88);border:0}
.save-button[aria-pressed=true],.card-media>.save-button[aria-pressed=true],.category-tab.active,.category-tab[aria-pressed=true],.category-tab[aria-current]{background:var(--color-blue-soft);color:var(--color-primary);border:0;box-shadow:inset 0 0 0 1px var(--color-primary)}
.search-form button{background:var(--color-primary)}
.search-form button:hover{background:var(--color-primary-hover)}

/* 7 첫 화면: 바이올렛 모눈 + 은은한 빛 번짐 + 반투명 흰 검색창 */
.hero{background:
  radial-gradient(60% 55% at 50% 0%,rgba(203,189,255,.38) 0%,transparent 70%),
  linear-gradient(90deg,rgba(91,51,240,.1) 1.25px,transparent 0) 0 0/28px 28px,
  linear-gradient(rgba(91,51,240,.1) 1.25px,transparent 0) 0 0/28px 28px,
  var(--color-paper)}
.hero-search,.page-intro .search-form,.search-form:not(.top-search){background:rgba(255,255,255,.8);border:0;box-shadow:inset 0 0 0 1px var(--color-line),0 3px 10px -4px rgba(22,22,22,.14);border-radius:16px}
.search-form:not(.top-search):focus-within{box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 3px var(--color-blue-soft);outline:0}
.quick-search>a{background:rgba(255,255,255,.7);border:0;box-shadow:var(--line-inset)}
.quick-search>a:hover{background:#fff}

/* 헤더: 웜그레이 반투명 */
.site-header,body[data-page=home] .site-header{background:color-mix(in srgb,#F1F0EE 88%,transparent);border-bottom:1px solid var(--color-line)}

/* 보정: 사이드바 검색 버튼은 채우지 않음. 모노 라벨 속 한글은 Geist Mono의 넓은 공백을 줄임 */
.top-search button,.top-search button:hover{background:transparent}
.eyebrow,.hero-eyebrow,.section-heading .eyebrow,.collection-card .eyebrow,.editor-note .eyebrow,.detail-heading .eyebrow,.page-intro>.eyebrow,.guide-heading>.eyebrow,.info-article>.eyebrow,.summary-label,.article-toc>span,.editor-tip>span,.sidebar-label,.insight-cat,.media-category{word-spacing:-.3em}

/* 도구 카드의 사이트 리뷰 링크 (v1.7.0) */
.tool-item.has-review{position:relative}
.tool-item.has-review .tool-name{padding-right:84px}
.tool-review-link{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;font-family:var(--font-label);font-size:12px;font-weight:500;color:var(--color-primary);background:var(--color-blue-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,#5B33F0 30%,transparent);text-decoration:none;z-index:1}
.tool-review-link::before{content:"";position:absolute;inset:-6px}
.tool-review-link:hover{background:var(--color-primary);color:#fff}

/* =========================================================================
   도구 미리보기 팝업 (v1.8.0)
   첫 화면과 같은 바이올렛 모눈·빛 번짐 무대 위에 사이트 아이콘을 올리고,
   아래에 정보 → 방문 버튼 순서로 읽히게 합니다. 휴대폰에서는 아래에서 올라오는 시트입니다.
   ========================================================================= */
html.sheet-open{overflow:hidden}
dialog.tool-sheet{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:24px;background:#FFFFFF;color:var(--color-ink);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;box-shadow:inset 0 0 0 1px var(--color-line),0 40px 80px -24px rgba(16,16,16,.38),0 12px 24px -12px rgba(16,16,16,.18)}
dialog.tool-sheet::backdrop{background:rgba(16,16,16,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.tool-sheet[open]{animation:sheet-in .26s cubic-bezier(.2,.8,.2,1)}
dialog.tool-sheet[open]::backdrop{animation:sheet-fade .26s ease-out}
dialog.tool-sheet.is-closing{animation:sheet-out .18s ease-in forwards}
dialog.tool-sheet.is-closing::backdrop{animation:sheet-fade .18s ease-in reverse forwards}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheet-out{to{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}

/* 무대: 모눈 + 빛 번짐 + 떠 있는 아이콘 */
.tool-sheet-stage{position:relative;display:grid;place-items:center;height:176px;border-bottom:1px solid var(--color-line);background:
  radial-gradient(55% 80% at 50% 100%,rgba(203,189,255,.55) 0%,transparent 70%),
  linear-gradient(90deg,rgba(91,51,240,.09) 1.25px,transparent 0) 0 0/24px 24px,
  linear-gradient(rgba(91,51,240,.09) 1.25px,transparent 0) 0 0/24px 24px,
  var(--color-paper)}
.tool-sheet-mark{display:grid;place-items:center}
.tool-sheet-mark .tool-mark{width:84px;height:84px;border:0;border-radius:22px;font-size:34px;font-weight:500;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--color-line),0 18px 32px -14px rgba(91,51,240,.45),0 4px 10px -4px rgba(16,16,16,.18)}
.tool-sheet-mark .tool-mark.has-favicon img{width:48px;height:48px;border-radius:10px}
dialog.tool-sheet[open] .tool-sheet-mark{animation:sheet-float .5s .05s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheet-float{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.tool-sheet-host{position:absolute;left:20px;bottom:16px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.82);box-shadow:var(--line-inset);font-family:var(--font-label);font-size:12px;font-weight:500;color:var(--color-slate);text-transform:lowercase}
.tool-sheet-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.72);color:var(--color-ink);box-shadow:var(--line-inset);cursor:pointer;transition:background var(--duration-fast) ease,transform var(--duration-fast) ease}
.tool-sheet-close svg{width:18px;height:18px}
.tool-sheet-close:hover{background:#FFFFFF;transform:rotate(90deg)}

/* 정보 */
.tool-sheet-body{padding:28px 32px 4px}
.tool-sheet-eyebrow{display:block;font-family:var(--font-label);font-size:12px;font-weight:500;letter-spacing:.02em;word-spacing:-.3em;text-transform:uppercase;color:var(--color-primary)}
.tool-sheet-body h2{margin:10px 0 0;font-size:32px;line-height:1.15;font-weight:500;letter-spacing:-.03em;color:var(--color-ink);overflow-wrap:anywhere}
.tool-sheet-desc{margin:12px 0 0;font-size:16px;line-height:1.7;color:var(--color-slate)}
.tool-sheet-facts{display:grid;grid-template-columns:1fr 1fr;margin:24px 0 0;border-top:1px solid var(--color-line)}
.tool-sheet-facts>div{padding:14px 0;border-bottom:1px solid var(--color-line);min-width:0}
.tool-sheet-facts>div:nth-child(2){padding-left:16px;border-left:1px solid var(--color-line)}
.tool-sheet-facts .tool-sheet-places{grid-column:1/-1}
.tool-sheet-facts .tool-sheet-places[hidden]{display:none}
.tool-sheet-facts dt{font-family:var(--font-label);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;word-spacing:-.3em;color:var(--color-slate)}
.tool-sheet-facts dd{margin:6px 0 0;font-size:15px;color:var(--color-ink);overflow-wrap:anywhere}
.tool-sheet-facts dd .price-badge{font-size:12px;line-height:24px;padding:0 8px}
.tool-sheet-places dd{display:flex;flex-wrap:wrap;gap:6px}
.tool-sheet-places dd span{padding:4px 10px;border-radius:999px;background:var(--color-paper);box-shadow:var(--line-inset);font-size:13px;color:var(--color-ink)}
.tool-sheet-note{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--color-slate)}
.tool-sheet-dot{flex-shrink:0;margin-top:8px;width:6px;height:6px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,#5B33F0 18%,transparent)}

/* 버튼: 주 버튼 바이올렛 알약, 보조 버튼 투명 + 얇은 선 */
.tool-sheet-actions{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:8px;padding:20px 32px 28px;background:linear-gradient(rgba(255,255,255,0),#FFFFFF 24%)}
.tool-sheet-go{flex:1 1 220px;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 10px 0 22px;border-radius:999px;background:var(--color-primary);color:#FFFFFF;font-size:16px;font-weight:500;text-decoration:none;transition:background var(--duration-fast) ease}
.tool-sheet-go svg{width:32px;height:32px;padding:7px;border-radius:999px;background:rgba(255,255,255,.16);transition:transform var(--duration-fast) ease-out}
.tool-sheet-go:hover{background:var(--color-primary-hover);color:#FFFFFF}
.tool-sheet-go:hover svg{transform:translate(2px,-2px)}
.tool-sheet-go:focus-visible,.tool-sheet-ghost:focus-visible,.tool-sheet-close:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.tool-sheet-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border:0;border-radius:999px;background:transparent;box-shadow:var(--line-inset);color:var(--color-ink);font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;transition:background var(--duration-fast) ease,box-shadow var(--duration-fast) ease}
.tool-sheet-ghost:hover{background:var(--color-paper);box-shadow:inset 0 0 0 1px var(--color-border-strong);color:var(--color-ink)}
.tool-sheet-ghost[hidden]{display:none}

/* 휴대폰: 아래에서 올라오는 시트 */
@media(max-width:600px){
  dialog.tool-sheet{width:100%;max-width:100%;max-height:90dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
  dialog.tool-sheet[open]{animation:sheet-up .3s cubic-bezier(.2,.8,.2,1)}
  dialog.tool-sheet.is-closing{animation:sheet-down .18s ease-in forwards}
  .tool-sheet-stage{height:148px}
  .tool-sheet-stage::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:rgba(16,16,16,.18)}
  .tool-sheet-mark .tool-mark{width:72px;height:72px;border-radius:20px}
  .tool-sheet-mark .tool-mark.has-favicon img{width:42px;height:42px}
  .tool-sheet-body{padding:22px 20px 0}
  .tool-sheet-body h2{font-size:26px}
  .tool-sheet-desc{font-size:15px}
  .tool-sheet-actions{padding:16px 20px calc(20px + env(safe-area-inset-bottom))}
  .tool-sheet-go{flex-basis:100%}
  .tool-sheet-ghost{flex:1 1 0}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){dialog.tool-sheet[open],dialog.tool-sheet[open]::backdrop,dialog.tool-sheet.is-closing,dialog.tool-sheet[open] .tool-sheet-mark{animation:none}.tool-sheet-close:hover,.tool-sheet-go:hover svg{transform:none}}
.tool-sheet-ghost.is-done{background:var(--color-blue-soft);box-shadow:inset 0 0 0 1px var(--color-primary);color:var(--color-primary)}
dialog.tool-sheet .toast{z-index:2}

/* 제휴 표시 (v1.9.0) */
.affiliate-badge{flex-shrink:0;font-family:var(--font-label);font-size:12px;font-weight:500;line-height:20px;padding:0 6px;border-radius:6px;background:var(--color-blue-soft);color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,#5B33F0 25%,transparent)}
.tool-sheet-facts dd .affiliate-badge{margin-left:6px;line-height:24px;padding:0 8px}
.tool-sheet-note a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   회원(v2.0.0): 헤더 계정 버튼, 간편 로그인 창, 내 서랍 구획, 관리자 대시보드
   ========================================================================= */
/* 헤더 계정 버튼 */
.account-slot{display:flex;align-items:center}
.account-slot[hidden]{display:none}
.account-login{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--color-ink);color:#F1F0EE;font:inherit;font-size:13px;line-height:1;font-weight:500;cursor:pointer;transition:background var(--duration-fast) ease}
.account-login:hover{background:var(--color-primary)}
.account-menu{position:relative}
.account-avatar{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;overflow:hidden;background:var(--color-blue-soft);color:var(--color-primary);font:inherit;font-weight:500;cursor:pointer;box-shadow:inset 0 0 0 1px var(--color-line)}
.account-avatar img{width:100%;height:100%;object-fit:cover}
.account-avatar:focus-visible,.account-login:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.account-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:grid;min-width:220px;padding:8px;border-radius:16px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--color-line),0 20px 40px -16px rgba(16,16,16,.28)}
.account-pop[hidden]{display:none}
.account-who{display:grid;gap:2px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--color-line)}
.account-who strong{font-size:15px;font-weight:500}
.account-who span{font-size:12px;color:var(--color-slate);overflow-wrap:anywhere}
.account-pop a,.account-pop button{display:flex;align-items:center;min-height:40px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--color-ink);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.account-pop a:hover,.account-pop button:hover{background:var(--color-paper)}
.account-pop .account-leave{margin-top:4px;border-top:1px solid var(--color-line);border-radius:0 0 10px 10px;color:var(--color-slate);font-size:13px}

/* 로그인 창: 도구 팝업과 같은 무대 + 카카오·구글 공식 버튼 형식 */
dialog.login-sheet{width:min(440px,calc(100vw - 32px))}
.login-stage{height:136px}
.login-stage img{width:64px;height:62px;padding:12px;border-radius:20px;background:#FFFFFF;box-sizing:content-box;box-shadow:inset 0 0 0 1px var(--color-line),0 18px 32px -14px rgba(91,51,240,.45)}
.login-buttons{display:grid;gap:10px;margin:24px 0 0}
.login-button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border:0;border-radius:12px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:filter var(--duration-fast) ease}
.login-button svg{position:absolute;left:18px;width:20px;height:20px}
.login-kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.login-google{background:#FFFFFF;color:#1F1F1F;box-shadow:inset 0 0 0 1px #747775}
.login-button:hover{filter:brightness(.97)}
.login-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.login-button.is-loading{opacity:.6;cursor:progress}
.login-legal{margin:16px 0 24px;font-size:12px;line-height:1.7;color:var(--color-slate)}
.login-legal a{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px}

/* 도구 팝업의 서랍 담기 */
.tool-sheet-save{gap:8px}
.tool-sheet-save svg{width:18px;height:18px}
.tool-sheet-save[aria-pressed="true"] svg{fill:currentColor}
.tool-sheet-save[hidden]{display:none}

/* 내 서랍 구획 */
.saved-block{margin-top:24px}
.saved-block[hidden]{display:none}
.saved-title{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:18px;font-weight:500;letter-spacing:-.02em}
.storage-note .text-link{display:inline;padding:0;border:0;background:none;color:var(--color-primary);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 관리자 대시보드 */
.admin-root{display:grid;gap:40px;padding-bottom:48px}
.admin-root[aria-busy="true"]{opacity:.6}
.admin-message{max-width:560px;padding:32px;border-radius:24px;background:#FFFFFF;box-shadow:var(--line-inset)}
.admin-message h2{margin:10px 0 0;font-size:26px;font-weight:500;letter-spacing:-.025em}
.admin-message p{margin:10px 0 20px;color:var(--color-slate);line-height:1.7}
.admin-message .button{display:inline-flex}
.admin-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.admin-head h2{display:flex;align-items:center;gap:8px;margin:0;font-size:22px;font-weight:500;letter-spacing:-.025em}
.admin-head>span{font-family:var(--font-label);font-size:12px;color:var(--color-slate)}
.admin-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.admin-tile{display:grid;gap:6px;padding:20px;border-radius:16px;background:#FFFFFF;box-shadow:var(--line-inset)}
.admin-tile span{font-family:var(--font-label);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;word-spacing:-.3em;color:var(--color-slate)}
.admin-tile strong{font-size:32px;font-weight:400;letter-spacing:-.03em;line-height:1.1;color:var(--color-ink)}
.admin-tile small{font-size:13px;color:var(--color-slate)}
.admin-tile.is-alert{box-shadow:inset 0 0 0 1px var(--color-primary);background:var(--color-blue-soft)}
.admin-tile.is-alert strong{color:var(--color-primary)}
.admin-tile.is-muted strong{color:var(--color-slate)}
.admin-tiles-sm .admin-tile strong{font-size:24px}
.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.admin-card{min-width:0;padding:20px;border-radius:16px;background:#FFFFFF;box-shadow:var(--line-inset)}
.admin-card-wide{grid-column:1/-1}
.admin-card h3,.admin-section>h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 16px;font-size:16px;font-weight:500}
.admin-section>h3{margin-top:24px}
.admin-card h3 small{font-family:var(--font-label);font-size:12px;font-weight:400;color:var(--color-slate)}
.admin-range{display:flex;gap:6px}
.admin-chip{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:var(--line-inset);color:var(--color-ink);font:inherit;font-size:13px;cursor:pointer}
.admin-chip:hover{background:#FFFFFF}
.admin-chip.is-on{background:var(--color-blue-soft);color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.admin-chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* 일별 막대: 한 계열(원본 이동)이라 범례 없이 제목이 이름을 대신함 */
.admin-chart{display:grid;grid-template-columns:auto 1fr;gap:10px;height:200px}
.admin-chart-axis{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:22px;font-family:var(--font-label);font-size:12px;color:var(--color-slate);text-align:right}
.admin-bars{display:flex;align-items:stretch;gap:2px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--color-line)}
.admin-bars li{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding-bottom:22px;outline:0;cursor:default}
.admin-bars .bar{display:block;height:var(--h);min-height:2px;border-radius:4px 4px 0 0;background:var(--color-primary);transition:opacity var(--duration-fast) ease}
.admin-bars:hover .bar{opacity:.45}
.admin-bars li:hover .bar,.admin-bars li:focus .bar{opacity:1}
.admin-bars em{position:absolute;bottom:2px;left:0;right:0;font-family:var(--font-label);font-size:12px;font-style:normal;text-align:center;color:var(--color-slate)}
.admin-bars .tip{position:absolute;bottom:calc(var(--h) + 30px);left:50%;z-index:2;display:none;transform:translateX(-50%);width:max-content;max-width:220px;padding:8px 10px;border-radius:10px;background:var(--color-ink);color:#F1F0EE;font-size:12px;line-height:1.5;pointer-events:none}
.admin-bars .tip b{display:block;font-size:14px;font-weight:500}
.admin-bars li:hover .tip,.admin-bars li:focus .tip{display:block}
.admin-rank{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.admin-rank li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px}
.admin-rank-name{min-width:0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.admin-rank-name small{font-family:var(--font-label);font-size:12px;color:var(--color-primary)}
.admin-rank b{font-family:var(--font-label);font-size:12px;font-weight:500;color:var(--color-slate)}
.admin-rank-bar{grid-column:1/-1;display:block;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--color-primary) var(--w),var(--color-fill) var(--w))}
.admin-empty{margin:0;font-size:14px;color:var(--color-slate)}
.admin-note{margin:16px 0 0;font-size:13px;line-height:1.7;color:var(--color-slate)}
.admin-suggestions{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.admin-suggestions[data-view="open"] .admin-suggestion:not([data-status="pending"]):not([data-status="reviewing"]){display:none}
.admin-suggestion{padding:18px 20px;border-radius:16px;background:#FFFFFF;box-shadow:var(--line-inset)}
.admin-suggestion-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.admin-suggestion-head strong{font-size:15px;font-weight:500}
.admin-suggestion-head time{margin-left:auto;font-family:var(--font-label);font-size:12px;color:var(--color-slate)}
.admin-suggestion>p{margin:10px 0 6px;font-size:15px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-suggestion>a{font-size:13px;color:var(--color-primary);overflow-wrap:anywhere}
.admin-suggestion-meta{margin-top:6px;font-size:12px;color:var(--color-slate)}
.admin-suggestion-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.admin-suggestion-actions input{flex:1 1 200px;min-height:36px;padding:0 12px;border:0;border-radius:10px;background:var(--color-paper);box-shadow:var(--line-inset);font:inherit;font-size:14px}
.admin-error{margin:8px 0 0;font-size:13px;color:#B42318}
.admin-status{display:inline-flex;align-items:center;padding:0 8px;border-radius:6px;font-family:var(--font-label);font-size:12px;line-height:22px;font-weight:500}
.status-pending{background:var(--color-blue-soft);color:var(--color-primary)}
.status-reviewing{background:#FFF4D6;color:#7A4D00}
.status-accepted{background:#E3F4E8;color:#1E6B3A}
.status-rejected{background:var(--color-fill);color:var(--color-slate)}
.admin-check{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line)}
.admin-check li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--color-line);font-size:14px}
.admin-check a{color:var(--color-ink)}
.admin-check span{font-family:var(--font-label);font-size:12px;color:var(--color-slate)}
.admin-table-wrap{overflow-x:auto;border-radius:16px;background:#FFFFFF;box-shadow:var(--line-inset)}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{padding:12px 16px;font-family:var(--font-label);font-size:12px;font-weight:500;text-align:left;text-transform:uppercase;color:var(--color-slate);border-bottom:1px solid var(--color-line)}
.admin-table td{padding:12px 16px;border-bottom:1px solid var(--color-line);white-space:nowrap}
.admin-table tr:last-child td{border-bottom:0}
@media(max-width:900px){.admin-grid{grid-template-columns:1fr}}
@media(max-width:600px){.admin-tile strong{font-size:26px}.admin-chart{height:170px}.admin-bars em{font-size:12px}.admin-bars li:nth-child(even) em{visibility:hidden}.account-login{min-height:30px;padding:0 12px;font-size:12px}.account-avatar{width:36px;height:36px}}

/* 비즈니스 문의 및 제안 (v2.1.0): 작은 진입 링크 + 로그인 회원 전용 문의 창 */
.business-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;font:inherit;font-size:12px;color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;cursor:pointer;opacity:.8}
.business-link:hover{opacity:1}
.business-link .icon{width:13px;height:13px}
.sidebar-bottom .business-link{margin-top:6px;color:#8A8986}
.sidebar-bottom .business-link:hover{color:var(--accent-soft)}
.footer-business{color:var(--color-slate)}
.business-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;opacity:1}

dialog.business-sheet{width:min(600px,calc(100vw - 32px))}
.business-stage{height:120px}
.business-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#FFFFFF;color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-line),0 18px 32px -14px rgba(91,51,240,.45)}
.business-mark svg{width:30px;height:30px}
.business-sheet .tool-sheet-body{display:grid;gap:14px}
.business-sheet .tool-sheet-body h2{margin-top:0}
.business-sheet .tool-sheet-desc{margin-top:-6px}
.business-sheet label{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--color-ink)}
.business-sheet label small{font-weight:400;color:var(--color-slate)}
.business-sheet input:not([type=radio]),.business-sheet textarea{width:100%;min-height:44px;margin:0;padding:10px 14px;border:0;border-radius:12px;background:var(--color-paper);box-shadow:var(--line-inset);color:var(--color-ink);font:inherit;font-size:16px;font-weight:400;box-sizing:border-box}
.business-sheet textarea{resize:vertical;min-height:120px;line-height:1.6}
.business-sheet input:focus,.business-sheet textarea:focus{outline:0;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 3px var(--color-blue-soft)}
.business-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.business-row>label,.business-topics{min-width:0}
dialog.business-sheet{overflow-x:hidden}
.business-topics{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}
.business-topics legend{margin-bottom:8px;padding:0;font-size:13px;font-weight:500}
.business-topics label{display:block}
.business-topics input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.business-topics span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;box-shadow:var(--line-inset);font-size:13px;font-weight:400;cursor:pointer}
.business-topics input:checked+span{background:var(--color-blue-soft);color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.business-topics input:focus-visible+span{outline:2px solid var(--color-primary);outline-offset:2px}
.business-error{margin:0;font-size:13px;color:#B42318}
.business-error[hidden]{display:none}
.business-sheet .tool-sheet-go{border:0;font:inherit;font-size:16px;font-weight:500;cursor:pointer}
.business-sheet .tool-sheet-go:disabled{opacity:.6;cursor:progress}
@media(max-width:600px){.business-row{grid-template-columns:1fr}}

/* 관리자 검수함: 비즈니스 문의 거르기 */
.admin-suggestions[data-view="business"] .admin-suggestion:not([data-kind="business"]){display:none}
.admin-suggestion.is-business{box-shadow:inset 3px 0 0 var(--color-primary),var(--line-inset)}
.admin-company{padding:0 8px;border-radius:6px;background:var(--color-paper);font-size:12px;line-height:22px;color:var(--color-ink)}
.admin-suggestion-meta a{color:var(--color-primary)}

/* 내 서랍 메모·분류 (v2.2.0): 로그인 회원 전용 정리 막대, 카드 메모, 메모 창 */
.member-only{display:none}
.is-member .member-only{display:inline}
.is-member .guest-only{display:none}
.saved-toolbar{display:grid;gap:12px;margin:4px 0 8px}
.saved-toolbar[hidden],.saved-filter-empty[hidden]{display:none}
.saved-toolbar-row{display:flex;flex-wrap:wrap;gap:8px}
.saved-search{flex:1 1 260px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;background:#FFFFFF;box-shadow:var(--line-inset);color:var(--color-slate)}
.saved-search:focus-within{box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 3px var(--color-blue-soft)}
.saved-search .icon{width:16px;height:16px;flex-shrink:0}
.saved-search input{flex:1;min-width:0;height:42px;padding:0;border:0;background:none;color:var(--color-ink);font:inherit;font-size:15px;outline:0;box-shadow:none}
.saved-sort select{min-height:44px;padding:0 36px 0 16px;border:0;border-radius:999px;background-color:#FFFFFF;box-shadow:var(--line-inset);color:var(--color-ink);font:inherit;font-size:14px;cursor:pointer}
.saved-folders{display:flex;flex-wrap:wrap;gap:6px}
.saved-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:0;border-radius:999px;background:transparent;box-shadow:var(--line-inset);color:var(--color-ink);font:inherit;font-size:13px;cursor:pointer;transition:background var(--duration-fast) ease}
.saved-chip svg{width:14px;height:14px;color:var(--color-slate)}
.saved-chip small{font-size:12px;color:var(--color-slate)}
.saved-chip:hover{background:rgba(255,255,255,.7)}
.saved-chip[aria-pressed="true"]{background:var(--color-ink);box-shadow:none;color:#F1F0EE}
.saved-chip[aria-pressed="true"] svg,.saved-chip[aria-pressed="true"] small{color:rgba(241,240,238,.7)}
.saved-chip:focus-visible,.saved-annot button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.saved-filter-empty{display:flex;align-items:center;gap:12px;margin:20px 0;padding:20px;border-radius:16px;box-shadow:var(--line-inset);color:var(--color-slate)}
.saved-filter-empty p{margin:0}
.saved-filter-empty .text-link{padding:0;border:0;background:none;color:var(--color-primary);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.saved-annot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--color-line)}
/* 메모가 붙은 도구 카드: 카드 겉모양을 li로 옮겨 메모까지 한 장으로 감쌉니다. */
.tool-item.is-annotated{display:flex;flex-direction:column;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:var(--line-inset)}
.tool-item.is-annotated>.tool-link{flex:1;height:auto;background:none;box-shadow:none}
.tool-item>.saved-annot{margin:0 14px;padding:10px 0 12px}
.saved-folder-tag{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 9px;border:0;border-radius:999px;background:var(--color-blue-soft);color:var(--color-primary);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.saved-folder-tag svg{width:13px;height:13px}
.saved-note-text{flex-basis:100%;order:2;margin:0;padding:8px 10px;border-radius:10px;background:var(--color-paper);font-size:13px;line-height:1.6;color:var(--color-ink);white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.saved-annot-edit{display:inline-flex;align-items:center;gap:5px;min-height:26px;margin-left:auto;padding:0 4px;border:0;background:none;color:var(--color-slate);font:inherit;font-size:12px;cursor:pointer}
.saved-annot-edit svg{width:13px;height:13px}
.saved-annot-edit:hover{color:var(--color-primary)}

.note-sheet .note-stage{height:104px}
.note-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:-6px}
.note-picks .saved-chip{min-height:30px;font-size:12px}
.note-picks-empty{font-size:12px;color:var(--color-slate)}
.note-sheet .tool-sheet-ghost{flex:0 0 auto}
@media(max-width:600px){.saved-sort{flex:1 1 100%}.saved-sort select{width:100%}}

/* 로그아웃 알약 (v2.2.1): 프로필 버튼 오른쪽, 로그인 알약과 같은 높이의 선 버튼 */
.account-slot{gap:8px}
.account-logout{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:var(--line-inset);color:var(--color-ink);font:inherit;font-size:13px;line-height:1;font-weight:500;cursor:pointer;transition:background var(--duration-fast) ease,box-shadow var(--duration-fast) ease}
.account-logout:hover{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.account-logout:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
@media(max-width:600px){.account-logout{min-height:30px;padding:0 10px;font-size:12px}}