/* 【2026-09-29】Patient Hub 디자인 층 — 원장 "기왕하는거 허브 자체도 디자인 업그레이드"
   Tailwind CDN 위에 마지막으로 얹는 층. 화면 구조는 app.js·profile.js 가 그리고, 여기서는 글꼴·면·그림자·버튼·입력칸을 다듬는다.
   색 원칙: 허브=인디고, 서비스=각자 카탈로그 색(--c). 서비스 설명서(/docs)는 자체 스타일(.dx)을 쓴다. */
:root{--ink:#0F172A;--ink2:#64748B;--line:#E6EAF2;--brand:#4F46E5;--brand2:#7C3AED;--paper:#F6F7FB}
html,body{font-family:var(--font-apple);-webkit-font-smoothing:antialiased;word-break:keep-all}
body.bg-slate-50{background:var(--paper)}

/* ---------- 상단 머리 ---------- */
.hx-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(15,23,42,.06);box-shadow:0 6px 20px -18px rgba(15,23,42,.5)}
.hx-brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.02em;color:var(--ink);font-size:17px;text-decoration:none}
.hx-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:15px;background:linear-gradient(135deg,#6366F1,#7C3AED);box-shadow:0 6px 16px -6px rgba(99,102,241,.8)}
.hx-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#4338CA;background:#EEF2FF;border:1px solid #E0E7FF;flex:none}
.hx-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px 0 10px}
.hx-nav::-webkit-scrollbar{display:none}
.hx-nav .tab-btn,.hx-nav a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#64748B;border:1px solid transparent;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s}
.hx-nav .tab-btn:hover,.hx-nav a:hover{background:#F1F5F9;color:var(--ink)}
.hx-nav .tab-btn.is-on{background:var(--ink);color:#fff}
.hx-nav .tab-btn.is-on i{color:#A5B4FC}
.hx-nav a.hx-docs{color:#4F46E5}
.hx-nav a.hx-docs:hover{background:#EEF2FF}

/* ---------- 본문 공통 ---------- */
#tab-content{padding-top:28px;padding-bottom:56px}
#tab-content > h1, #tab-content h1.text-lg, #tab-content .flex > h1.text-lg{font-size:24px;line-height:1.3;font-weight:900;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center}
#tab-content h1.text-lg > i.fas:first-child{width:40px;height:40px;border-radius:13px;display:inline-grid;place-items:center;font-size:17px;margin-right:12px !important;background:#EEF2FF;flex:none}
#tab-content h1 + p.text-sm.text-slate-500{margin-top:6px;margin-bottom:20px;font-size:14.5px}

/* 카드 면 */
#app .rounded-2xl.bg-white{border-color:var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -24px rgba(15,23,42,.28)}
#app article.rounded-2xl.bg-white{transition:transform .18s ease,box-shadow .18s ease}
#app article.rounded-2xl.bg-white:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 38px -22px rgba(15,23,42,.35)}
#app .rounded-2xl.border-dashed{border-radius:20px}
#app h2.font-semibold.text-sm{font-size:15px;font-weight:800;color:var(--ink)}

/* 주 버튼 */
#app .bg-indigo-600{background-image:linear-gradient(135deg,#4F46E5,#6D28D9);box-shadow:0 8px 18px -10px rgba(79,70,229,.9)}
#app .bg-indigo-600:hover{filter:brightness(1.07)}
#app button,#app a{transition-property:color,background-color,border-color,filter,box-shadow,transform;transition-duration:.15s}

/* 입력칸 */
#app input:not([type=checkbox]):not([type=radio]),#app select,#app textarea{border-radius:12px;border-color:#D8DEE9;background-color:#fff}
#app input:not([type=checkbox]):not([type=radio]):focus,#app select:focus,#app textarea:focus{outline:none;border-color:#818CF8;box-shadow:0 0 0 4px rgba(99,102,241,.14)}
#app input:disabled{background:#F8FAFC}

/* 알림 상자 */
#app .rounded-lg.bg-emerald-50,#app .rounded-lg.bg-indigo-50,#app .rounded-lg.bg-rose-50{border-radius:14px}

/* ---------- 대시보드 머리 ---------- */
.hx-hello{position:relative;overflow:hidden;border-radius:24px;padding:26px 28px;margin-bottom:22px;color:#fff;background:#111827}
.hx-hello:before{content:"";position:absolute;inset:0;background:radial-gradient(520px 260px at 92% -30%,rgba(129,140,248,.7),transparent 60%),radial-gradient(420px 240px at -5% 130%,rgba(236,72,153,.35),transparent 60%),radial-gradient(360px 200px at 60% 140%,rgba(16,185,129,.3),transparent 60%);pointer-events:none}
.hx-hello > *{position:relative}
.hx-hello .d{font-size:13px;color:#C7D2FE;font-weight:600;letter-spacing:.02em}
.hx-hello h1{font-size:clamp(22px,3.2vw,30px);font-weight:900;letter-spacing:-.02em;margin:6px 0 14px;line-height:1.3}
.hx-stats{display:flex;flex-wrap:wrap;gap:8px}
.hx-stat{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:13px;font-weight:600}
.hx-stat b{font-size:15px;font-weight:900}
.hx-hello .hx-refresh{position:absolute;right:20px;top:20px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#E0E7FF;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.hx-hello .hx-refresh:hover{background:rgba(255,255,255,.2)}
.hx-sec{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px}
.hx-sec h2{font-size:16px;font-weight:800;color:var(--ink)}
.hx-sec span{font-size:13px;color:var(--ink2)}

/* 서비스 카드(대시보드·내 제품 공용) */
.hx-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -24px rgba(15,23,42,.28);transition:transform .18s ease,box-shadow .18s ease}
.hx-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c,#4F46E5)}
.hx-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 38px -20px color-mix(in srgb,var(--c,#4F46E5) 60%,transparent)}
.hx-card.tone-bad{border-color:#FECDD3}.hx-card.tone-warn{border-color:#FDE68A}
.hx-card.muted{background:#FBFCFE;border-style:dashed;box-shadow:none}
.hx-card.muted:before{opacity:.35}
.hx-card.muted:hover{transform:none;box-shadow:none}
.hx-card .hx-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hx-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:18px;flex:none;color:var(--c,#4F46E5);background:color-mix(in srgb,var(--c,#4F46E5) 12%,#fff)}
.hx-card.muted .hx-ic{filter:grayscale(.6);opacity:.7}
.hx-card .hx-name{font-weight:800;font-size:15.5px;color:var(--ink);line-height:1.3}
.hx-card .hx-role{font-size:12.5px;color:var(--ink2);margin-top:1px}
.hx-card .hx-go{margin-left:auto;align-self:flex-start;font-size:12px;font-weight:700;color:var(--c,#4F46E5);text-decoration:none;white-space:nowrap;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--c,#4F46E5) 9%,#fff)}
.hx-card .hx-go:hover{background:color-mix(in srgb,var(--c,#4F46E5) 16%,#fff)}
.hx-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.hx-pill.on{background:#DCFCE7;color:#047857}.hx-pill.off{background:#F1F5F9;color:#64748B}.hx-pill.soon{background:#FEF3C7;color:#B45309}.hx-pill.late{background:#FEF3C7;color:#B45309}
.hx-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:13px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid transparent}
.hx-btn.solid{color:#fff;background:var(--c,#4F46E5);box-shadow:0 8px 18px -10px var(--c,#4F46E5)}
.hx-btn.solid:hover{filter:brightness(1.08)}
.hx-btn.ghost{color:#475569;border-color:#D8DEE9;background:#fff}
.hx-btn.ghost:hover{border-color:var(--c,#4F46E5);color:var(--c,#4F46E5)}
.hx-btn.dim{color:#94A3B8;border-color:#E2E8F0;background:#F8FAFC;cursor:default}

/* ---------- 랜딩 ---------- */
.hx-land{background:#0B1120;color:#E2E8F0;position:relative;overflow:hidden}
.hx-land:before{content:"";position:absolute;inset:0;background:radial-gradient(760px 400px at 85% -15%,rgba(99,102,241,.55),transparent 60%),radial-gradient(560px 320px at -10% 110%,rgba(236,72,153,.3),transparent 60%),radial-gradient(460px 280px at 50% 120%,rgba(16,185,129,.25),transparent 60%);pointer-events:none}
.hx-land > *{position:relative}
.hx-land .hx-brand{color:#fff}
.hx-land .hx-login{font-size:14px;font-weight:700;color:#E2E8F0;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.hx-land .hx-login:hover{background:rgba(255,255,255,.1)}
.hx-land .eyebrow{font-size:12px;letter-spacing:.2em;font-weight:800;color:#A5B4FC}
.hx-land h1{font-size:clamp(32px,5.4vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1.15;color:#fff}
.hx-land h1 em{font-style:normal;background:linear-gradient(90deg,#A5B4FC,#F0ABFC 55%,#6EE7B7);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-land .lede{color:#CBD5E1;font-size:17px;line-height:1.75}
.hx-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;border-radius:14px;font-weight:800;font-size:15px;text-decoration:none}
.hx-cta.primary{color:#0B1120;background:#fff;box-shadow:0 14px 30px -14px rgba(165,180,252,.9)}
.hx-cta.primary:hover{transform:translateY(-1px)}
.hx-cta.glass{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.hx-cta.glass:hover{background:rgba(255,255,255,.16)}
.hx-orbit{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px;margin:0 auto}
.hx-orbit span{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:700;color:#E2E8F0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.hx-orbit i{color:var(--c)}
.hx-feat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 12px 32px -24px rgba(15,23,42,.3)}
.hx-feat .hx-ic{margin-bottom:14px}
.hx-feat h2{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px}
.hx-feat p{font-size:14px;color:#475569;line-height:1.7}

/* ---------- 로그인·가입 ---------- */
.hx-auth{min-height:calc(100vh - 170px);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;background:radial-gradient(700px 360px at 50% -10%,rgba(129,140,248,.28),transparent 70%)}
.hx-auth form,.hx-auth .rounded-2xl{border-radius:24px !important;box-shadow:0 30px 60px -36px rgba(30,27,75,.45) !important;border-color:var(--line) !important}
.hx-auth h1.text-lg{font-size:21px;font-weight:900;letter-spacing:-.02em}

/* ---------- 바닥글 ---------- */
#legal-footer{background:#fff;border-top:1px solid var(--line)}

@media (max-width:640px){
  #tab-content{padding-top:20px}
  #tab-content h1.text-lg{font-size:21px}
  .hx-hello{padding:22px 18px;border-radius:20px}
  .hx-hello .hx-refresh{position:static;margin-top:14px}
  .hx-nav .tab-btn,.hx-nav a{padding:7px 12px;font-size:13.5px}
}

/* 【2026-09-30】서비스 관리자 탭 — 한 줄 = 서비스 하나 */
.hx-adm-note{background:#fff;border:1px solid var(--line,#E2E8F0);border-radius:16px;padding:14px 16px;font-size:13px;line-height:1.7;color:#475569}
.hx-adm-list{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.hx-adm-list{grid-template-columns:1fr 1fr}}
.hx-adm{background:#fff;border:1px solid var(--line,#E2E8F0);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--c,#4F46E5)}
.hx-adm-head{display:flex;gap:12px;align-items:flex-start;min-width:0}
.hx-adm-chips{display:flex;flex-wrap:wrap;gap:6px}
.hx-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#1E293B;background:#F1F5F9;border-radius:999px;padding:5px 6px 5px 12px;max-width:100%}
.hx-chip em{font-style:normal;font-weight:500;font-size:11px;color:#64748B}
.hx-chip.own{background:#FEF3C7;color:#92400E;padding-right:12px}
.hx-chip.own i{font-size:11px;color:#D97706}
.hx-chip button{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#94A3B8;font-size:11px}
.hx-chip button:hover{background:#FEE2E2;color:#E11D48}
.hx-chip:not(:has(button)):not(.own){padding-right:12px}
.hx-adm-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hx-adm-add select{flex:1;min-width:160px;border:1px solid #CBD5E1;border-radius:10px;padding:8px 10px;font-size:13px;background:#fff;color:#334155}
.hx-adm-add select:focus{outline:2px solid color-mix(in srgb,var(--c,#4F46E5) 40%,transparent);border-color:var(--c,#4F46E5)}
.hx-adm-more{font-size:12px;font-weight:700;color:#64748B;padding:8px 4px;white-space:nowrap}
.hx-adm-more:hover{color:#4F46E5}
.hx-adm-can{font-size:12px;color:#64748B;border-top:1px dashed #E2E8F0;padding-top:10px}
.hx-adm-can summary{cursor:pointer;font-weight:700;color:#64748B;list-style:none}
.hx-adm-can summary::-webkit-details-marker{display:none}
.hx-adm-can summary::before{content:'+';display:inline-block;width:14px;font-weight:800;color:var(--c,#4F46E5)}
.hx-adm-can[open] summary::before{content:'–'}
.hx-adm-can ul{margin:8px 0 0 14px;line-height:1.8;list-style:disc;padding-left:14px;color:#475569}
.hx-adm-only{margin:10px 0 0;font-weight:700;color:#B45309}

/* 【2026-09-30】모바일·PC 화면 최적화 — 원장 "모든 서비스의 모바일 버전과 피씨 버전 각각 화면 최적화"
   기준: 모바일(≤640px) 보조 글자 12px 이상 · 누르는 영역 40px 이상 · 입력칸 글자 16px(iOS 확대 방지) · 가로 스크롤 0
         PC 키보드 포커스 표시. 화면 배치만 바꾸고 문구·기능은 그대로. */
:where(#app,main,#legal-footer) :is(a,button,summary,select,[role=button]):focus-visible{outline:2px solid #6366F1;outline-offset:2px;border-radius:10px}
.hx-nav .tab-btn:focus-visible{outline:2px solid #6366F1;outline-offset:1px}
@media (max-width:640px){
  /* 글자 — 10·11px 보조 글자를 12px 로 */
  #app [class*="text-[10px]"],#app [class*="text-[11px]"],main [class*="text-[10px]"],main [class*="text-[11px]"],
  #app .hx-pill,#app .hx-chip em,#legal-footer div,#legal-footer p{font-size:12px !important}
  /* 상단 머리 — 로고·로그아웃·탭 누르는 영역 40px */
  .hx-brand{min-height:40px}
  .hx-mark{width:40px;height:40px}
  #logout-btn{min-width:40px;min-height:40px;justify-content:center}
  .hx-nav{gap:6px}
  .hx-nav .tab-btn,.hx-nav a{min-height:40px}
  .hx-hello .hx-refresh{min-height:40px}
  /* 버튼·버튼 모양 링크·선택칸 40px (글 안에 섞인 글자 링크는 제외) */
  /* :where() 로 우선순위 0 — 화면 코드(Tailwind min-w·min-h)가 따로 정한 크기가 있으면 그쪽이 이긴다 */
  :where(#app button:not(p button):not(.hx-chip button),#app select,main select){min-height:40px;min-width:40px}
  #app a:is(.inline-flex,.flex,.hx-btn,.hx-go),main a.rounded-lg:is(.inline-flex,.flex){min-height:40px;align-items:center}
  #app a.rounded-lg:not(.inline-flex):not(.flex):not(.block),main a.rounded-lg:not(.inline-flex):not(.flex):not(.block){display:inline-flex;align-items:center;justify-content:center;min-height:40px}
  #app .hx-go{display:inline-flex}
  #app a.shrink-0:not(.flex){min-width:40px;justify-content:center}
  main a.inline-block,main > a.text-sm:first-child,#app a.shrink-0:not(.flex),#app a.text-xs.underline,#app .justify-center.gap-4 > a,#app #auth-back{display:inline-flex;align-items:center;min-height:40px}
  #app summary{padding-top:12px;padding-bottom:12px}
  #app label:has(> input[type=checkbox]),#app label:has(> input[type=radio]){min-height:40px}
  /* 칩 안 × 단추 — 모양은 그대로, 누르는 영역만 40px 로 넓힌다 */
  .hx-chip button{position:relative}
  .hx-chip button::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}
  /* 입력칸 — 16px(아이폰에서 누를 때 화면이 확대되지 않게), 너비는 칸 설정 그대로 */
  #app input:not([type=checkbox]):not([type=radio]):not([type=range]),#app select,#app textarea,main input:not([type=checkbox]):not([type=radio]),main select,main textarea{font-size:16px !important}
  /* 절 제목 줄 — 제목·내려받기 한 줄, 설명은 아랫줄 */
  .hx-sec{flex-wrap:wrap;row-gap:2px}
  .hx-sec > span:not(.hx-export-slot){order:3;flex-basis:100%}
  /* 내려받기 메뉴(공통 export.js) — 항목 40px·안내 12px */
  body .psx-menu button{min-height:40px}
  body .psx-menu .psx-note{font-size:12px}
  /* 병원 프로필 · 공식 채널 줄 — [종류 ▾][×] 아래에 주소 칸을 한 줄 전체로(좁은 칸에 주소가 잘리지 않게) */
  #app [data-ch-row]{flex-wrap:wrap}
  #app [data-ch-row] > select[data-ch-type]{flex:1 1 auto;width:auto}
  #app [data-ch-row] > .flex-1{order:3;flex-basis:100%}
  #app [data-ch-row] [data-ch-label]{width:100%}
  /* 바닥글 링크 — 줄바꿈되며 누르기 쉬운 높이 */
  #legal-footer nav{display:flex;flex-wrap:wrap;gap:0 14px}
  #legal-footer nav a{display:inline-flex;align-items:center;min-height:40px;margin:0 !important}
}

/* 【2026-10-01】'오늘 확인할 것' — 첫 화면 맨 위 카드(원장 선택 ⑦). 최대 3개, 중요한 순. PC 는 3열, 휴대폰은 한 줄씩 */
.hx-today{background:#fff;border:1px solid #C7D2FE;border-radius:20px;padding:18px 18px 16px;margin:0 0 18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -26px rgba(79,70,229,.55)}
.hx-today-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 2px 12px}
.hx-today-head h2{font-size:16px;font-weight:900;color:var(--ink);display:flex;align-items:center;gap:8px}
.hx-today-head h2 i{color:var(--brand)}
.hx-today-head span{font-size:12.5px;color:#64748B}
.hx-today-list{display:grid;grid-template-columns:1fr;gap:10px;list-style:none;margin:0;padding:0}
@media(min-width:900px){.hx-today-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hx-today-item{display:flex;gap:12px;align-items:flex-start;background:#F8FAFF;border:1px solid #E0E7FF;border-radius:16px;padding:14px;min-width:0}
.hx-today-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:14px;color:#4338CA;background:#E0E7FF}
.hx-today-body{min-width:0;flex:1}
.hx-today-t{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.35}
.hx-today-d{font-size:13px;color:#475569;line-height:1.6;margin-top:3px;overflow-wrap:anywhere}
.hx-today-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.hx-today-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:800;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.hx-today-btn.solid{color:#fff;background:linear-gradient(135deg,#4F46E5,#6D28D9);box-shadow:0 8px 18px -12px rgba(79,70,229,.9)}
.hx-today-btn.solid:hover{filter:brightness(1.07)}
.hx-today-btn.ghost{color:#475569;background:#fff;border-color:#D8DEE9}
.hx-today-btn.ghost:hover{color:#4F46E5;border-color:#A5B4FC}
.hx-today-btn:disabled{opacity:.55;cursor:wait}
.hx-today-note{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#94A3B8}
.hx-today-msg{font-size:12.5px;font-weight:700;color:#047857;margin-top:6px}
.hx-today-msg:empty{display:none}
.hx-today-msg.bad{color:#B45309}
.hx-today-done{display:flex;align-items:center;gap:8px;margin:0 0 18px;padding:12px 16px;border-radius:14px;background:#ECFDF5;border:1px solid #A7F3D0;color:#047857;font-size:14px;font-weight:800}
@media (max-width:640px){
  .hx-today{padding:14px 12px 12px;border-radius:18px}
  .hx-today-item{padding:12px}
  .hx-today-btn{min-height:40px;font-size:13.5px}
  .hx-today-d{font-size:13.5px}
}

/* 【2026-10-04】서비스별 구성원 접근 스위치 (서비스 관리자 탭) — 손가락 크기 40px */
.hx-access{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:12px;background:#F8FAFC;border:1px solid #E2E8F0;font-size:12.5px;color:#64748B}
.hx-access.on{background:#F0FDF4;border-color:#BBF7D0;color:#047857}
.hx-access-label{display:inline-flex;align-items:center;gap:6px;font-weight:700;min-width:0}
.hx-access-label em{font-style:normal;font-weight:500;color:#94A3B8}
.hx-access button[role=switch]{position:relative;flex:none;width:60px;height:40px;background:transparent;border:0;padding:0;cursor:pointer;outline-offset:2px}  /* 누르는 영역 40px · 보이는 트랙 52×30 */
.hx-access button[role=switch]::before{content:'';position:absolute;left:4px;top:5px;width:52px;height:30px;border-radius:999px;background:#CBD5E1;transition:background .15s}
.hx-access.on button[role=switch]::before{background:#059669}
.hx-access button[role=switch]:disabled{opacity:.6;cursor:wait}
.hx-access .hx-knob{position:absolute;top:8px;left:7px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.hx-access.on .hx-knob{left:29px}

/* 【2026-10-19】새 보고서 표시 — [내 보고서] 탭·카드 */
.hx-nav .tab-btn .hx-tab-new{margin-left:2px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:800;line-height:18px;color:#fff;background:linear-gradient(135deg,#4F46E5,#6D28D9)}
.hx-nav .tab-btn.is-on .hx-tab-new{background:#A5B4FC;color:var(--ink)}
.hx-rep-new{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;background:#4F46E5;vertical-align:1px}
.hx-rep-writing{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#B45309;background:#FEF3C7;vertical-align:1px}