/* ===== 페이지 이동 시 깜빡임(백지 프레임) 완화 — 크로스 다큐먼트 View Transition ===== */
@view-transition{
  navigation:auto;
}

/* ===== Self-hosted Noto Sans KR (단일 굵기 400 · 볼드 미사용) — 폰트 교체 깜빡임 제거 ===== */
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/nsk-korean-400.woff2) format('woff2');unicode-range:U+1100-11FF,U+302E-302F,U+3131-318E,U+3200-321E,U+3260-327E,U+A960-A97C,U+AC00-D7A3,U+D7B0-D7FB,U+FF01-FF60,U+FFA0-FFDC;}
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/nsk-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD;}
/* 700 — 제목·버튼·핵심 숫자 등 '강조'에만 쓰는 굵은 굵기(본문은 400 유지). */
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nsk-korean-700.woff2) format('woff2');unicode-range:U+1100-11FF,U+302E-302F,U+3131-318E,U+3200-321E,U+3260-327E,U+A960-A97C,U+AC00-D7A3,U+D7B0-D7FB,U+FF01-FF60,U+FFA0-FFDC;}
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nsk-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD;}

/* =========================================================
   보상닥터 원케어 — 가족간병 홈페이지 공통 스타일
   컬러: 기본 배경 = 흰색 + 베이지옐로우 로우톤 / 포인트·폰트 = 네이비 + 오렌지
   (네이비·오렌지는 배경으로 사용하지 않고 포인트·글자색으로만 사용)
   폰트: Noto Sans
   ========================================================= */
:root{
  /* Point / font colors (배경 사용 금지) */
  --oc-primary:#1D4E89;        /* 네이비 — 제목·글자·포인트 */
  --oc-primary-dark:#163B68;
  --oc-primary-light:#2F5E9A;  /* 밝은 네이비(보조 포인트) */
  --oc-accent:#F4914E;         /* 오렌지 — 강조 포인트·버튼 */
  --oc-accent-dark:#E0763A;
  --oc-accent-soft:#FBE4CE;
  /* Base backgrounds (흰색 + 연한 베이지옐로우) */
  --oc-bg:#FFFFFF;
  --oc-bg-soft:#FEFCF6;        /* 섹션 교차 배경(아주 밝은 연베이지) */
  --oc-beige:#FEFAEE;          /* 배너·밴드용 밝은 베이지옐로우 */
  --oc-beige-deep:#FAF4E4;     /* 표 헤더 등 살짝 진한 베이지 */
  /* Neutral (warm) */
  --oc-ink:#2B2823;            /* 본문 텍스트(웜 다크) */
  --oc-gray:#6E6656;           /* 보조 텍스트 */
  --oc-line:#F0EADC;           /* 밝은 베이지 톤 구분선 */
  /* Type scale */
  --oc-h1:clamp(2rem,5vw,3rem);
  --oc-h2:clamp(1.5rem,3.5vw,2.25rem);
  --oc-h3:1.25rem;
  --oc-body:1.0625rem;
  /* Radius & shadow */
  --oc-radius:18px;
  --oc-radius-sm:12px;
  --oc-radius-btn:12px;         /* 버튼 단일 모서리(알약형 폐지 → 통일감) */
  --oc-btn-h:48px;             /* 버튼 기본 높이(터치타깃 확보 + 뚱뚱함 제거) */
  --oc-shadow:0 12px 32px rgba(90,78,50,.14);
  --oc-shadow-sm:0 6px 20px rgba(90,78,50,.09);
  /* Layout */
  --oc-max:1340px;
  --oc-gap:24px;
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:"Noto Sans KR","Noto Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--oc-body);line-height:1.7;color:var(--oc-ink);background:var(--oc-bg);-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--oc-primary);}
b,strong{font-weight:400;}
/* 제목은 굵기 700 + 큰 글자일수록 자간을 조인다(애플 타이포: 크기별 트래킹). */
h1,h2,h3{line-height:1.25;font-weight:700;letter-spacing:-0.02em;}
.oc-container{max-width:var(--oc-max);margin:0 auto;padding:0 20px;}
.oc-lead{font-size:1.15rem;color:var(--oc-gray);}
.oc-center{text-align:center;}

/* ---------- header ---------- */
.oc-header{position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid rgba(240,234,220,.9);}
@media (prefers-reduced-transparency:reduce){.oc-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;}}
.oc-header__inner{display:flex;align-items:center;justify-content:flex-start;gap:48px;height:68px;}
.oc-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--oc-primary-dark);font-weight:700;letter-spacing:-0.01em;font-size:1.15rem;}
.oc-logo__text b{color:var(--oc-primary);}

/* ---------- nav (드롭다운 GNB) ---------- */
.oc-nav{display:flex;align-items:center;gap:30px;}
.oc-nav__item{position:relative;}
.oc-nav__top{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--oc-ink);font-weight:400;font-size:.98rem;transition:color .15s;padding:23px 0;cursor:pointer;}
.oc-nav__top:hover,.oc-nav__item.is-active>.oc-nav__top{color:var(--oc-accent);}
.oc-has-sub>.oc-nav__top::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:.15s;}
.oc-nav__item.oc-has-sub:hover>.oc-nav__top::after{transform:rotate(225deg) translateY(-1px);opacity:.9;}
.oc-subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--oc-line);border-radius:14px;box-shadow:var(--oc-shadow);padding:8px;min-width:196px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:.16s ease;z-index:60;}
.oc-nav__item.oc-has-sub:hover .oc-subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.oc-subnav a{text-decoration:none;color:var(--oc-ink);font-weight:400;font-size:.94rem;padding:11px 14px;border-radius:9px;white-space:nowrap;transition:.12s;}
.oc-subnav a:hover{background:var(--oc-bg-soft);color:var(--oc-primary);}
.oc-nav__cta{background:linear-gradient(180deg,#F7A063 0%,var(--oc-accent) 100%);color:#fff!important;padding:10px 20px;border-radius:999px;font-weight:700;letter-spacing:-0.01em;text-decoration:none;font-size:.96rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px rgba(224,118,58,.26);transition:.15s;}
.oc-nav__cta:hover{background:linear-gradient(180deg,var(--oc-accent) 0%,var(--oc-accent-dark) 100%);transform:translateY(-1px);}
.oc-nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.oc-nav-toggle span{width:24px;height:2px;background:var(--oc-ink);border-radius:2px;transition:.2s;}
.oc-nav__actions{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;z-index:2;}
.oc-nav__login{display:inline-block;color:var(--oc-primary);font-weight:400;font-size:.94rem;text-decoration:none;padding:9px 18px;border:1.5px solid var(--oc-line);border-radius:999px;transition:.15s;}
.oc-nav__login:hover,.oc-nav__login.is-active{border-color:var(--oc-primary);background:var(--oc-bg-soft);}
.oc-nav__signup{display:inline-block;background:linear-gradient(180deg,#2A5B96 0%,var(--oc-primary) 100%);color:#fff!important;font-weight:700;letter-spacing:-0.01em;font-size:.94rem;text-decoration:none;padding:10px 20px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 4px 12px rgba(29,78,137,.22);transition:.15s;}
.oc-nav__signup:hover{background:linear-gradient(180deg,var(--oc-primary) 0%,var(--oc-primary-dark) 100%);transform:translateY(-1px);}
/* 데스크톱: 넓은 화면에서 메뉴가 로고 옆에 몰리지 않도록 가운데로 분산 */
@media(min-width:961px){.oc-nav{flex:1;justify-content:center;}}
@media(max-width:960px){
  /* backdrop-filter가 fixed 자식(모바일 메뉴)의 containing block을 만들어 배경이 비쳐 보이는 문제 → 모바일에선 해제 */
  .oc-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;}
  .oc-nav-toggle{display:flex;margin-left:auto;}
  /* 모바일 메뉴 높이: 100vh 는 주소창·하단바를 포함한 값이라 실기기에서
     메뉴 아래쪽이 브라우저 UI에 가려 눌리지 않는다. dvh 로 실제 보이는
     높이를 쓰고, 미지원 브라우저를 위해 vh 를 먼저 둔다. */
  .oc-nav{display:none;position:fixed;inset:68px 0 auto 0;z-index:70;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--oc-line);padding:0 0 12px;box-shadow:var(--oc-shadow);max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .oc-nav.is-open{display:flex;}
  .oc-nav__item{border-bottom:1px solid var(--oc-line);background:#fff;}
  .oc-nav__top{padding:15px 24px;justify-content:space-between;width:100%;}
  /* 모바일은 아코디언 없이 서브메뉴를 항상 펼쳐 표시(그룹 라벨 + 하위 링크 목록) */
  .oc-subnav{position:static;opacity:1;visibility:visible;transform:none;display:flex;max-height:none;overflow:visible;box-shadow:none;border:0;border-radius:0;padding:0 0 8px;min-width:0;background:var(--oc-bg-soft);}
  .oc-has-sub>.oc-nav__top::after{display:none;}
  .oc-subnav a{padding:13px 40px;background:var(--oc-bg-soft);}
  .oc-nav__cta{margin:12px 24px;text-align:center;}
  /* 로그인·회원가입은 메뉴 맨 위로 올린다. 메뉴가 길어 맨 아래에 두면
     스크롤해야 닿고, 화면이 작은 기기에서는 아예 가려진다. */
  .oc-nav__actions{position:static;transform:none;order:-1;margin:0;padding:14px 24px;gap:10px;border-bottom:1px solid var(--oc-line);background:var(--oc-bg-soft);}
  .oc-nav__login,.oc-nav__signup{flex:1;text-align:center;}
}

/* ---------- 공통 배너 (모든 메뉴 메인페이지 공통 영역) ----------
   신뢰의 네이비 색면 + 좌상단에서 번지는 밝은 하이라이트(깊이감). 글자는 흰색. */
.oc-hero,.oc-pagehero{position:relative;
  background:radial-gradient(130% 110% at 12% -10%, rgba(64,110,175,.65) 0%, transparent 55%),
             linear-gradient(158deg, #205391 0%, #173D6B 55%, #10305A 100%);
  border-bottom:0;}
.oc-hero h1,.oc-pagehero h1{color:#fff;}
.oc-hero p,.oc-pagehero p{color:rgba(255,255,255,.80);}
.oc-hero__visual{color:rgba(255,255,255,.92);}
/* 네이비 위에서는 흰색 배지가 또렷하게 뜬다 */
.oc-hero .oc-badge,.oc-pagehero .oc-badge{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;}
.oc-hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;min-height:450px;padding:28px 20px;}
.oc-hero__single{min-height:450px;display:flex;flex-direction:column;justify-content:center;padding:28px 20px;max-width:860px;}
.oc-hero__visual{font-size:clamp(6rem,18vw,12rem);text-align:center;}
.oc-hero__cta{display:flex;gap:12px;flex-wrap:wrap;}
.oc-badge{display:inline-block;background:#fff;border:1px solid var(--oc-accent);color:var(--oc-accent-dark);font-weight:400;font-size:.85rem;padding:6px 14px;border-radius:999px;margin-bottom:18px;}
.oc-hero h1{font-size:clamp(2.25rem,5.5vw,3.4rem);line-height:1.12;font-weight:700;letter-spacing:-0.03em;color:#fff;margin:0 0 18px;}
.oc-hero p{font-size:1.18rem;line-height:1.7;color:rgba(255,255,255,.82);margin:0 0 30px;}
.oc-pagehero__inner{min-height:450px;display:flex;flex-direction:column;justify-content:center;padding:28px 20px;text-align:center;}
.oc-pagehero h1{font-size:clamp(2.1rem,5vw,3.1rem);font-weight:700;letter-spacing:-0.03em;color:#fff;margin:0 0 14px;}
.oc-pagehero p{font-size:1.14rem;line-height:1.7;color:rgba(255,255,255,.82);margin:0;}
@media(max-width:820px){.oc-hero__inner{grid-template-columns:1fr;text-align:center;min-height:320px;padding:36px 20px;}.oc-hero__cta{justify-content:center;}.oc-hero__visual{display:none;}.oc-hero__single,.oc-pagehero__inner{min-height:300px;padding:32px 20px;}}

/* ---------- floating buttons ---------- */
.oc-floating{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.oc-floating__btn{display:inline-block;padding:13px 22px;border-radius:999px;font-weight:700;letter-spacing:-0.01em;font-size:.95rem;text-decoration:none;box-shadow:var(--oc-shadow);transition:.15s;white-space:nowrap;}
.oc-floating__btn:active{transform:scale(.97);}
.oc-floating__btn--ghost{background:#fff;color:var(--oc-primary);border:1.5px solid var(--oc-primary);}
.oc-floating__btn--ghost:hover{background:var(--oc-bg-soft);transform:translateY(-1px);}
.oc-floating__btn--accent{background:linear-gradient(180deg,#F7A063 0%,var(--oc-accent) 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--oc-shadow);}
.oc-floating__btn--accent:hover{background:linear-gradient(180deg,var(--oc-accent) 0%,var(--oc-accent-dark) 100%);transform:translateY(-1px);}
.oc-floating__btn--kakao{background:#FEE500;color:#3C1E1E;}
.oc-floating__btn--kakao:hover{background:#F5D900;}
.oc-quick-floating{position:fixed;left:50%;bottom:20px;z-index:39;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(900px,calc(100vw - 48px));padding:15px 18px 15px 28px;transform:translateX(-50%);box-sizing:border-box;background:#172a30;border:1px solid rgba(255,255,255,.2);border-radius:10px;box-shadow:0 12px 30px rgba(10,35,64,.25);}
.oc-quick-floating__copy{min-width:0;color:#fff;}
.oc-quick-floating__copy strong{display:block;font-size:1.1rem;letter-spacing:-.03em;}
.oc-quick-floating__copy span{display:block;margin-top:3px;color:#f3a164;font-size:.88rem;font-weight:700;}
.oc-quick-floating__actions{display:flex;flex:none;gap:10px;}
.oc-quick-floating a{display:inline-flex;align-items:center;justify-content:center;min-width:126px;padding:14px 20px;border-radius:999px;background:#f26a21;color:#fff;font-size:.98rem;font-weight:800;text-decoration:none;white-space:nowrap;transition:.15s;}
.oc-quick-floating a:hover{background:#dc5712;transform:translateY(-1px);}
/* 모바일에서는 화면 우측 끝을 비운다.
   안드로이드 크롬의 뒤로가기 스와이프가 화면 가장자리에서 시작하는데,
   플로팅 버튼이 그 영역에 있으면 제스처가 버튼에 먹혀 뒤로가기가 안 된다.
   세로로 쌓으면 우측 링크(약관 '보기' 등)도 가려서, 하단 가운데 가로 배치로 바꾼다. */
@media(max-width:640px){
  .oc-floating{left:50%;right:auto;transform:translateX(-50%);
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    flex-direction:row;gap:6px;max-width:calc(100vw - 96px);}
  .oc-floating__btn{padding:10px 13px;font-size:.8rem;white-space:nowrap;}
  .oc-quick-floating{bottom:62px;gap:12px;width:calc(100vw - 24px);padding:14px 15px 14px 18px;border-radius:15px;}
  .oc-quick-floating__copy strong{font-size:.88rem;}
  .oc-quick-floating__copy span{font-size:.74rem;}
  .oc-quick-floating__actions{gap:6px;}
  .oc-quick-floating a{min-width:auto;padding:11px 12px;font-size:.8rem;}
}

/* ---------- buttons ---------- */
/* ---------- 버튼 시스템 (단일 규격) ----------
   모서리·높이·타이포·눌림 피드백을 전 버튼이 공유한다.
   테두리는 항상 1.5px(투명 포함) → solid·ghost 높이가 정확히 일치.
   크기 변형: --sm(유틸/인라인) / --lg(주요 CTA 강조) / --block(가로 꽉) */
.oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--oc-btn-h);padding:0 24px;border-radius:var(--oc-radius-btn);
  font-family:inherit;font-weight:700;font-size:1rem;letter-spacing:-0.01em;line-height:1.2;white-space:nowrap;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s,border-color .18s,box-shadow .2s,transform .08s cubic-bezier(.2,.7,.3,1);
  -webkit-tap-highlight-color:transparent;}
/* 눌림: 즉시 살짝 들어가는 촉각 피드백(애플 §1). */
/* hidden 속성이 .oc-btn 의 display 지정을 이기도록(안 그러면 숨김이 안 먹는다) */
.oc-btn[hidden]{display:none!important;}
.oc-btn:active{transform:scale(.975);}
.oc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(29,78,137,.28);}
.oc-btn:disabled,.oc-btn[disabled],.oc-btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
/* 코랄 CTA — 세로 그라데이션 + 상단 하이라이트(빛 받는 재질) + 색조 그림자 */
.oc-btn--accent{background:linear-gradient(180deg,#F7A063 0%,var(--oc-accent) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 6px 16px rgba(224,118,58,.30), 0 1px 2px rgba(224,118,58,.24);}
.oc-btn--accent:hover{background:linear-gradient(180deg,var(--oc-accent) 0%,var(--oc-accent-dark) 100%);
  transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 10px 22px rgba(224,118,58,.38), 0 1px 2px rgba(224,118,58,.24);}
.oc-btn--accent:active{transform:scale(.975);box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(224,118,58,.28);}
/* 네이비 버튼 — 동일한 재질 언어 */
.oc-btn--primary{background:linear-gradient(180deg,#2A5B96 0%,var(--oc-primary) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 6px 16px rgba(29,78,137,.26), 0 1px 2px rgba(29,78,137,.22);}
.oc-btn--primary:hover{background:linear-gradient(180deg,var(--oc-primary) 0%,var(--oc-primary-dark) 100%);
  transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 10px 22px rgba(29,78,137,.34), 0 1px 2px rgba(29,78,137,.22);}
.oc-btn--primary:active{transform:scale(.975);box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(29,78,137,.26);}
/* 고스트(보조) — 흰 바탕 + 얇은 그림자로 살짝 떠 있는 느낌 */
.oc-btn--ghost{background:#fff;color:var(--oc-primary);border-color:var(--oc-primary);
  box-shadow:0 1px 2px rgba(90,78,50,.06);}
.oc-btn--ghost:hover{background:var(--oc-bg-soft);transform:translateY(-1px);box-shadow:0 5px 14px rgba(90,78,50,.10);}
.oc-btn--ghost:active{transform:scale(.975);box-shadow:0 1px 2px rgba(90,78,50,.06);}
.oc-btn--sm{min-height:40px;padding:0 16px;font-size:.92rem;border-radius:10px;}
.oc-btn--lg{min-height:54px;padding:0 32px;font-size:1.08rem;}
.oc-btn--block{display:flex;width:100%;}
@media (prefers-reduced-motion:reduce){.oc-btn{transition:background .18s,box-shadow .2s;}.oc-btn:hover,.oc-btn:active{transform:none;}}

/* ---------- 서류등록/발급 모달 (docs.js) ---------- */
.doc-reg{display:grid;gap:16px;}
.doc-reg__item{display:grid;gap:6px;}
.doc-reg__item input[type=file]{font-family:inherit;font-size:.9rem;}
.doc-reg__cur{color:var(--oc-primary);font-size:.84rem;}
.doc-reg__fee{background:var(--oc-beige);border:1px solid var(--oc-line);border-radius:10px;
  padding:10px 12px;font-size:.92rem;color:var(--oc-ink);line-height:1.5;}
.doc-iss{display:grid;gap:8px;}
.doc-iss__row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--oc-line);
  border-radius:10px;background:#fff;}
.doc-iss__name{flex:1;min-width:0;color:var(--oc-ink);font-size:.94rem;}
.doc-iss__st{flex:0 0 auto;font-size:.8rem;}
.doc-iss__ok{color:#2E7D46;}
.doc-iss__def{color:var(--oc-gray);}
.doc-iss__act{flex:0 0 auto;display:flex;gap:6px;align-items:center;}
.doc-iss__up{display:inline-flex;align-items:center;padding:0 12px;min-height:40px;border-radius:10px;
  border:1px solid var(--oc-primary);color:var(--oc-primary);font-size:.86rem;cursor:pointer;background:#fff;}
.doc-iss__up:hover{background:var(--oc-bg-soft);}
@media(max-width:520px){.doc-iss__row{flex-wrap:wrap;}.doc-iss__name{flex-basis:100%;}}
/* 서류검토(관리자) — 첨부 미리보기 */
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dr-doc{border:1px solid var(--oc-line);border-radius:12px;padding:12px;background:#fff;}
.dr-doc__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.dr-doc__label{color:var(--oc-primary-dark);font-size:.96rem;}
.dr-doc__name{color:var(--oc-gray);font-size:.82rem;margin-bottom:8px;word-break:break-all;}
.dr-prev{border:1px solid var(--oc-line);border-radius:8px;overflow:hidden;background:var(--oc-bg-soft);
  height:300px;display:flex;align-items:center;justify-content:center;}
.dr-prev img{max-width:100%;max-height:100%;object-fit:contain;}
.dr-prev embed{width:100%;height:100%;}
.dr-prev--none{color:var(--oc-gray);font-size:.86rem;}
@media(max-width:640px){.dr-grid{grid-template-columns:1fr;}}
/* 간병일지 모달 iframe */
.cl-frame{width:100%;height:74vh;border:1px solid var(--oc-line);border-radius:10px;background:#fff;display:block;}

/* ---------- 데이터 로딩 오버레이 (서클 + 안내) ---------- */
.oc-loading{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.oc-loading[hidden]{display:none;}
.oc-loading__spin{width:44px;height:44px;border-radius:50%;
  border:3px solid var(--oc-line);border-top-color:var(--oc-accent);
  animation:oc-spin .8s linear infinite;}
.oc-loading__text{margin:0;color:var(--oc-primary);font-size:.98rem;}
@keyframes oc-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.oc-loading__spin{animation-duration:1.6s;}}

/* ---------- section ---------- */
.oc-section{padding:72px 0;}
.oc-section--soft{background:var(--oc-bg-soft);}
.oc-section--mint{background:var(--oc-beige);}
.oc-section-head{text-align:center;max-width:720px;margin:0 auto 44px;}
.oc-eyebrow{color:var(--oc-accent-dark);font-weight:400;letter-spacing:.08em;font-size:.82rem;text-transform:uppercase;}
.oc-section-head h2{font-size:var(--oc-h2);font-weight:400;color:var(--oc-primary-dark);margin:8px 0 10px;}
.oc-section-sub{color:var(--oc-gray);font-size:1.08rem;}
@media(max-width:640px){.oc-section{padding:48px 0;}}

/* ---------- cards ---------- */
.oc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--oc-gap);}
.oc-cards--2{grid-template-columns:repeat(2,1fr);}
.oc-cards--4{grid-template-columns:repeat(4,1fr);}
.oc-card{background:#fff;border:1px solid var(--oc-line);border-radius:var(--oc-radius);padding:30px 26px;box-shadow:var(--oc-shadow-sm);transition:.18s;}
.oc-card:hover{transform:translateY(-4px);box-shadow:var(--oc-shadow);}
.oc-card__icon{font-size:2.4rem;margin-bottom:14px;}
.oc-card h3{font-size:var(--oc-h3);color:var(--oc-primary-dark);margin:0 0 8px;}
.oc-card p{color:var(--oc-gray);margin:0;}
@media(max-width:900px){.oc-cards,.oc-cards--2,.oc-cards--4{grid-template-columns:1fr;}}

/* ---------- steps ---------- */
.oc-steps{list-style:none;padding:0;margin:0 auto;display:grid;gap:18px;max-width:780px;}
.oc-step{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--oc-line);border-radius:var(--oc-radius);padding:22px 24px;box-shadow:var(--oc-shadow-sm);}
.oc-step__num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--oc-accent);color:#fff;font-weight:400;display:grid;place-items:center;font-size:1.2rem;}
.oc-step h3{margin:2px 0 4px;color:var(--oc-primary-dark);font-size:1.12rem;}
.oc-step p{margin:0;color:var(--oc-gray);}

/* ---------- checklist ---------- */
.oc-checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.oc-checklist li{position:relative;padding:14px 16px 14px 48px;background:#fff;border:1px solid var(--oc-line);border-radius:var(--oc-radius-sm);color:var(--oc-ink);}
.oc-checklist li::before{content:"✓";position:absolute;left:16px;top:18px;width:22px;height:22px;background:var(--oc-accent);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:400;}

/* ---------- table ---------- */
.oc-table-wrap{overflow-x:auto;}
.oc-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--oc-radius-sm);overflow:hidden;box-shadow:var(--oc-shadow-sm);min-width:520px;}
.oc-table th,.oc-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--oc-line);}
.oc-table th{background:var(--oc-beige-deep);color:var(--oc-primary-dark);font-weight:400;}
.oc-table tr:last-child td{border-bottom:0;}
.oc-table tbody tr:nth-child(even) td{background:var(--oc-bg-soft);}

/* ---------- notice / callout ---------- */
.oc-notice{background:var(--oc-bg-soft);border:1px solid var(--oc-line);border-radius:10px;padding:18px 22px;color:var(--oc-ink);}
.oc-notice strong{color:var(--oc-accent-dark);font-weight:400;}
.oc-info{background:var(--oc-bg-soft);border:1px solid var(--oc-line);border-radius:10px;padding:18px 22px;color:var(--oc-ink);}
.oc-info strong{color:var(--oc-primary);font-weight:400;}

/* ---------- CTA band (베이지 배경 · 네이비 글자 · 오렌지 포인트) ---------- */
.oc-ctaband{position:relative;border:0;
  background:radial-gradient(120% 130% at 85% 110%, rgba(64,110,175,.55) 0%, transparent 55%),
             linear-gradient(158deg, #205391 0%, #163B68 60%, #10305A 100%);}
.oc-ctaband__inner{text-align:center;padding:72px 20px;}
.oc-ctaband h2{font-size:var(--oc-h2);font-weight:700;letter-spacing:-0.02em;margin:0 0 12px;color:#fff;}
.oc-ctaband p{color:rgba(255,255,255,.82);margin:0 0 26px;font-size:1.1rem;}
.oc-ctaband__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- FAQ ---------- */
.oc-faq{max-width:780px;margin:0 auto;display:grid;gap:12px;}
.oc-faq__item{background:#fff;border:1px solid var(--oc-line);border-radius:var(--oc-radius-sm);padding:4px 20px;}
.oc-faq__item summary{cursor:pointer;font-weight:400;color:var(--oc-primary-dark);padding:16px 30px 16px 0;list-style:none;position:relative;}
.oc-faq__item summary::-webkit-details-marker{display:none;}
.oc-faq__item summary::after{content:"+";position:absolute;right:2px;top:14px;font-size:1.4rem;color:var(--oc-accent);}
.oc-faq__item[open] summary::after{content:"\2212";}
.oc-faq__a{padding:0 0 16px;color:var(--oc-gray);}

/* ---------- stats ---------- */
.oc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--oc-gap);text-align:center;}
.oc-stat{background:#fff;border:1px solid var(--oc-line);border-radius:var(--oc-radius);padding:26px 16px;box-shadow:var(--oc-shadow-sm);}
.oc-stat__num{font-size:2.15rem;font-weight:700;letter-spacing:-0.02em;color:var(--oc-accent-dark);}
.oc-stat__label{color:var(--oc-gray);font-size:.95rem;margin-top:4px;}
@media(max-width:720px){.oc-stats{grid-template-columns:repeat(2,1fr);}}

/* ---------- prose ---------- */
.oc-prose{max-width:820px;margin:0 auto;}
.oc-prose h2{font-size:var(--oc-h2);color:var(--oc-primary-dark);margin:36px 0 14px;}
.oc-prose h3{font-size:var(--oc-h3);color:var(--oc-primary);margin:26px 0 10px;}
.oc-prose p{margin:0 0 14px;}
.oc-prose ul{padding-left:20px;}
.oc-prose li{margin:6px 0;}

/* ---------- copyright footer ---------- */
.oc-copyright{background:var(--oc-bg-soft);border-top:1px solid var(--oc-line);text-align:center;padding:34px 20px;}
.oc-copyright p{margin:0;font-size:.88rem;line-height:1.95;color:var(--oc-gray);}
.oc-copyright b,.oc-copyright strong{color:var(--oc-primary);font-weight:400;}

/* =========================================================
   2026 Caredoc-inspired visual refresh
   큰 사진형 히어로, 투명 GNB, 넓은 여백, 숫자 강조 레이아웃
   ========================================================= */
:root{
  --oc-primary:#273c43;
  --oc-primary-dark:#172a30;
  --oc-primary-light:#49646b;
  --oc-accent:#f36f35;
  --oc-accent-dark:#db5821;
  --oc-accent-soft:#fff0e9;
  --oc-bg-soft:#f7f8f7;
  --oc-beige:#f4f2ed;
  --oc-beige-deep:#eceae4;
  --oc-ink:#252b2d;
  --oc-gray:#667075;
  --oc-line:#e8eceb;
  --oc-max:1200px;
  --oc-radius:12px;
  --oc-radius-sm:8px;
  --oc-shadow:0 20px 55px rgba(28,47,52,.12);
  --oc-shadow-sm:0 8px 24px rgba(28,47,52,.07);
}

body{line-height:1.75;letter-spacing:-.012em;}
.oc-container{padding-left:32px;padding-right:32px;}

/* 헤더는 히어로 위에 포개지고 스크롤 뒤 흰 배경으로 전환된다. */
/* 절충: 최상단은 살짝 투명한 흰색, 조금 스크롤하면 완전한 흰색. 로고·글자는 항상 짙은색으로 선명하게(남색 이미지 로고 가독성 유지). */
.oc-header{position:fixed;inset:0 0 auto;z-index:80;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--oc-line);transition:background .28s,border-color .28s,box-shadow .28s;}
.oc-header__inner{height:88px;gap:36px;}
.oc-logo{color:var(--oc-primary-dark);font-size:1.2rem;white-space:nowrap;}
.oc-logo__text b{color:var(--oc-accent);}
.oc-nav{gap:26px;}
.oc-nav__top{color:var(--oc-ink);font-weight:700;padding:31px 0;}
.oc-nav__actions{right:32px;}
.oc-nav__login{color:var(--oc-primary-dark);border-color:var(--oc-line);}
.oc-nav__login:hover,.oc-nav__login.is-active{background:var(--oc-beige);border-color:var(--oc-primary-light);}
.oc-nav__signup{background:var(--oc-accent);box-shadow:none;border-radius:8px;}
.oc-header.is-scrolled{background:#fff;border-bottom-color:var(--oc-line);box-shadow:0 8px 24px rgba(24,43,48,.08);}

/* 모든 페이지에 동일한 사진형 브랜드 히어로를 적용한다. */
.oc-hero,.oc-pagehero,.oc-about-hero{overflow:hidden;background-image:linear-gradient(90deg,rgba(22,36,41,.82) 0%,rgba(22,36,41,.60) 42%,rgba(22,36,41,.15) 76%),url('../images/family-care-hero.png?v=2')!important;background-size:cover!important;background-position:center!important;border:0!important;}
.oc-hero::after,.oc-pagehero::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,rgba(10,20,23,.18));pointer-events:none;}
.oc-hero__single,.oc-hero__inner,.oc-pagehero__inner,.oc-about-hero .oc-pagehero__inner{position:relative;z-index:1;height:500px;padding-top:112px;padding-bottom:72px;box-sizing:border-box;overflow:hidden;}
.oc-hero__single{max-width:760px;margin-left:max(0px,calc((100vw - var(--oc-max))/2));}
.oc-pagehero__inner{align-items:flex-start;text-align:left;}
.oc-hero h1,.oc-pagehero h1{max-width:760px;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.13;letter-spacing:-.045em;text-wrap:balance;}
.oc-hero p,.oc-pagehero p{max-width:650px;color:rgba(255,255,255,.88);font-size:1.13rem;}
.oc-about-hero__eyebrow,.oc-eyebrow{color:var(--oc-accent)!important;font-weight:700!important;letter-spacing:.02em!important;}
.oc-about-hero__eyebrow{position:relative;padding-left:54px;}
.oc-about-hero__eyebrow::before{content:"";position:absolute;left:0;top:50%;width:38px;height:1px;background:currentColor;}

/* 참고 페이지처럼 콘텐츠 사이의 호흡을 넉넉하게 잡는다. */
.oc-section{padding:112px 0;}
.oc-section-head{max-width:820px;margin-bottom:64px;}
.oc-section-head h2{margin-top:12px;color:var(--oc-ink);font-size:clamp(2rem,3.8vw,3.15rem);line-height:1.2;}
.oc-section-sub{max-width:680px;margin-inline:auto;color:var(--oc-gray);}
.oc-section--soft{background:#f7f8f7;}
.oc-section--mint{background:#f1f3f1;}

/* 카드에는 케어닥 사업영역의 큰 회색 숫자 모티프를 사용한다. */
.oc-cards{counter-reset:care-card;gap:28px;}
.oc-card{counter-increment:care-card;position:relative;overflow:hidden;padding:42px 32px 34px;border:1px solid var(--oc-line);border-radius:12px;box-shadow:none;}
.oc-card::before{content:"0" counter(care-card);display:block;margin-bottom:-20px;color:#edf0ef;font-size:5.4rem;font-weight:700;line-height:1;letter-spacing:-.07em;}
.oc-card h3{position:relative;margin-bottom:14px;color:var(--oc-ink);font-size:1.35rem;}
.oc-card p{position:relative;}
.oc-card:hover{transform:translateY(-5px);border-color:#d7dddb;box-shadow:var(--oc-shadow-sm);}
.oc-stats{gap:0;background:transparent;}
.oc-stat{padding:40px 18px;border-width:0 1px 0 0;border-radius:0;box-shadow:none;background:transparent;}
.oc-stat:last-child{border-right:0;}
.oc-stat__num{color:var(--oc-accent);font-size:clamp(2.4rem,4vw,3.6rem);}
.oc-step{border:0;border-radius:10px;padding:28px 30px;box-shadow:none;}
.oc-step__num{background:var(--oc-accent);}
.oc-checklist li,.oc-faq__item,.oc-table{border-color:var(--oc-line);box-shadow:none;}

.oc-btn,.oc-nav__signup,.oc-nav__login{border-radius:8px;}
.oc-btn--accent{background:var(--oc-accent);box-shadow:none;}
.oc-btn--accent:hover{background:var(--oc-accent-dark);box-shadow:0 10px 24px rgba(243,111,53,.24);}
.oc-btn--primary{background:var(--oc-primary-dark);box-shadow:none;}
.oc-btn--primary:hover{background:#0f2025;box-shadow:0 10px 24px rgba(23,42,48,.2);}
.oc-ctaband{background:linear-gradient(110deg,rgba(19,35,40,.96),rgba(37,61,68,.92)),url('../images/family-care-hero.png?v=2') center 62%/cover;}
.oc-ctaband__inner{padding-top:88px;padding-bottom:88px;}
.oc-copyright{padding:54px 20px;background:#252d30;border:0;text-align:left;}
.oc-copyright p{color:#aeb8ba;}
.oc-copyright b,.oc-copyright strong{color:#fff;}
.oc-floating__btn{border-radius:8px;}

@media(max-width:1100px){
  .oc-nav{gap:16px;}.oc-nav__top{font-size:.9rem}.oc-nav__actions{display:none;}
}
@media(max-width:960px){
  .oc-header,.oc-header.is-scrolled{background:#fff;border-bottom-color:var(--oc-line);}
  .oc-header__inner{height:72px;}
  .oc-logo,.oc-logo__text b{color:var(--oc-primary-dark);}
  .oc-logo__text b{color:var(--oc-accent);}
  .oc-nav-toggle span{background:var(--oc-primary-dark);}
  .oc-nav{inset:72px 0 auto;gap:0;}
  .oc-nav__top{color:var(--oc-ink);padding:15px 24px;}
  .oc-nav__actions{display:flex;}
  .oc-nav__login{color:var(--oc-primary-dark);border-color:var(--oc-line);background:#fff;}
  .oc-hero__single,.oc-hero__inner,.oc-pagehero__inner,.oc-about-hero .oc-pagehero__inner{height:460px;padding-top:100px;}
}
@media(max-width:640px){
  .oc-container{padding-left:20px;padding-right:20px;}
  .oc-hero,.oc-pagehero,.oc-about-hero{background-image:linear-gradient(90deg,rgba(18,32,37,.88),rgba(18,32,37,.48)),url('../images/family-care-hero.png?v=2')!important;background-position:60% center!important;}
  .oc-hero__single,.oc-hero__inner,.oc-pagehero__inner,.oc-about-hero .oc-pagehero__inner{height:420px;padding-top:96px;padding-bottom:52px;text-align:left;align-items:flex-start;}
  .oc-hero h1,.oc-pagehero h1{font-size:clamp(2.05rem,10vw,2.8rem);}
  .oc-hero p,.oc-pagehero p{font-size:1rem;}
  .oc-hero__cta{justify-content:flex-start;}
  .oc-section{padding:72px 0;}
  .oc-section-head{margin-bottom:42px;text-align:left;}
  .oc-section-sub{margin-inline:0;}
  .oc-card{padding:34px 24px 28px;}
  .oc-stat{border-right:0;border-bottom:1px solid var(--oc-line);}
  .oc-copyright{text-align:center;}
}

/* ── 약관 팝업(modal)·푸터 약관링크 스타일 — 기능 보존(terms.js/legal-data.js). 디자이너 CSS엔 없어 이식함 ── */
/* ── 법적 문서 모달(전역) ─────────────────────────────────────────
   auth.css 의 .oc-modal 규칙을 전역 style.css 에도 두어, auth.css 를
   로드하지 않는 페이지(index/faq 등)의 푸터 약관 모달도 정상 표시되게 한다. */
.oc-modal[hidden]{display:none;}
.oc-modal{position:fixed;inset:0;background:rgba(43,40,35,.5);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.oc-modal__box{background:#fff;border-radius:var(--oc-radius);max-width:560px;width:100%;
  max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--oc-shadow);}
.oc-modal__head{padding:18px 22px;border-bottom:1px solid var(--oc-line);
  display:flex;justify-content:space-between;align-items:center;}
.oc-modal__head h3{margin:0;color:var(--oc-primary);font-size:1.1rem;}
.oc-modal__close{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--oc-gray);cursor:pointer;}
.oc-modal__body{padding:20px 22px;overflow-y:auto;font-size:.92rem;line-height:1.75;color:var(--oc-ink);}
.oc-modal__body h4{color:var(--oc-primary);font-size:.98rem;margin:16px 0 6px;}
.oc-modal__body h4:first-child{margin-top:0;}
.oc-modal__body p{margin:0 0 8px;}
.oc-modal__body .oc-legal-meta{color:var(--oc-gray);font-size:.86rem;margin-bottom:12px;}
.oc-modal__foot{padding:14px 22px;border-top:1px solid var(--oc-line);}
.oc-modal__foot .oc-btn{width:100%;border:0;}

/* 푸터 법적 문서 링크 — 제목만 표시, 클릭 시 모달 */
.oc-copyright .oc-legal-links{margin:0 0 10px;display:flex;flex-wrap:wrap;
  gap:6px 14px;justify-content:center;align-items:center;}
.oc-copyright .oc-legal-links a{color:var(--oc-primary);text-decoration:none;
  font-size:.86rem;font-weight:500;cursor:pointer;}
.oc-copyright .oc-legal-links a:hover{text-decoration:underline;}
.oc-copyright .oc-legal-links .oc-legal-sep{color:var(--oc-line);font-size:.8rem;}

/* 푸터 복원: 밝은 배경 + 가운데 정렬 + 약관 링크 가독성 (원래 스타일로) */
.oc-copyright{background:var(--oc-bg-soft);border-top:1px solid var(--oc-line);text-align:center;}
.oc-copyright p{color:var(--oc-gray);}
.oc-copyright b,.oc-copyright strong{color:var(--oc-primary);}
.oc-copyright .oc-legal-links{justify-content:center;}
.oc-copyright .oc-legal-links a{color:var(--oc-primary);}

/* 하단 고정 상담바가 푸터를 가리지 않도록 영역 확보 */
body:has(.oc-quick-floating){padding-bottom:130px;}
@media(max-width:640px){body:has(.oc-quick-floating){padding-bottom:190px;}}

/* 배너 높이 최종: 데스크톱 500px 고정(전 페이지 통일·여백 축소로 내용 맞춤), 좁은 화면은 내용맞춤 자동(잘림 방지) */
.oc-hero__single,.oc-hero__inner,.oc-pagehero__inner,.oc-about-hero .oc-pagehero__inner{height:550px;padding-top:112px;padding-bottom:34px;overflow:hidden;}
@media(max-width:900px){.oc-hero__single,.oc-hero__inner,.oc-pagehero__inner,.oc-about-hero .oc-pagehero__inner{height:auto;min-height:460px;overflow:visible;padding-top:92px;padding-bottom:36px;}}

/* 히어로 배경: 인물 얼굴이 다 보이도록 위쪽으로 프레이밍 */
.oc-hero,.oc-pagehero,.oc-about-hero{background-size:cover!important;background-position:center!important;}