:root{
    --bg:#FFFFFF; --bg-soft:#F3F8FC; --card:#FFFFFF; --text:#1E2F3E; --text-sub:#566676;
    --accent:#1C6EAA; --accent-dark:#155A8C; --point:#DCEBF6; --line:#E3EBF2;
    --radius:14px; --max:1080px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
       color:var(--text);background:var(--bg);line-height:1.7;font-size:16px;word-break:keep-all;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  h1,h2,h3{line-height:1.35;letter-spacing:-0.02em}
  h1{font-size:clamp(28px,4.4vw,42px);font-weight:700}
  h2{font-size:clamp(22px,2.8vw,28px);font-weight:700}
  h3{font-size:18px;font-weight:700}
  p.lead{font-size:clamp(16px,1.6vw,18px);color:var(--text-sub);max-width:640px}
  .muted{color:var(--text-sub)}
  .eyebrow{display:inline-block;font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.02em;margin-bottom:10px}

  /* Header */
  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-0.01em}
  .logo-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);display:grid;place-items:center}
  .logo-mark svg{width:16px;height:16px}
  .logo small{display:block;font-size:10px;font-weight:500;color:var(--text-sub);letter-spacing:.12em;line-height:1}
  nav ul{display:flex;gap:4px;list-style:none}
  nav a{display:block;padding:8px 14px;border-radius:8px;font-size:15px;color:var(--text-sub);font-weight:500}
  nav a:hover{color:var(--text);background:var(--bg-soft)}
  nav a.active{color:var(--accent);}
  .menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--text)}
  @media (max-width:720px){
    .menu-btn{display:block;order:2}
    nav ul{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:8px 16px 16px}
    nav ul.open{display:flex}
    nav a{padding:12px}
  }

  /* Layout */
  section{padding:72px 0}
  section + section{border-top:1px solid var(--line)}
  .page-head{padding-top:64px;padding-bottom:40px}
  .page-head p.lead{margin-top:14px}
  .sec-head{margin-bottom:32px}
  .sec-head p{margin-top:8px}

  /* Hero */
  .hero{padding:0 0 64px}
  .hero-band{background:var(--accent);color:#fff;padding:88px 0 80px;position:relative;overflow:hidden}
  .hero-band::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.06)}
  .hero-band .wrap{position:relative;z-index:1}
  .hero-band .eyebrow{color:#CFE5F4}
  .hero-band h1{color:#fff}
  .hero-band p.lead{margin-top:20px;color:rgba(255,255,255,.88)}
  .values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;max-width:860px}
  .value{display:flex;gap:12px;align-items:flex-start}
  .ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--bg-soft);display:grid;place-items:center;color:var(--accent)}
  .ico svg{width:18px;height:18px}
  .value strong{display:block;font-size:15px}
  .value span{font-size:14px;color:var(--text-sub)}
  @media (max-width:720px){.values{grid-template-columns:1fr;margin-top:36px}.hero{padding:0 0 48px}.hero-band{padding:60px 0 56px}.hero-band::after{width:260px;height:260px;right:-100px;top:-100px}}

  /* Cards */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  @media (max-width:880px){.grid-3{grid-template-columns:1fr 1fr}}
  @media (max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}
  .card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:border-color .15s, box-shadow .15s}
  a.card:hover{border-color:#B5D3EA;box-shadow:0 6px 20px rgba(30,47,62,.06)}
  .card .ico{margin-bottom:18px}
  .card h3{margin-bottom:4px}
  .card .sub{font-size:14px;color:var(--accent);font-weight:500;margin-bottom:10px}
  .card p{font-size:15px;color:var(--text-sub)}
  .card .more{margin-top:auto;padding-top:20px;font-size:14px;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:4px}
  .badge{display:inline-block;font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--point);color:var(--accent-dark);vertical-align:middle}
  .badge.gray{background:#EEF2F6;color:var(--text-sub)}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;padding:10px 18px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
  .btn:hover{background:var(--accent-dark)}
  .btn.ghost{background:#fff;color:var(--accent)}
  .btn.ghost:hover{background:var(--bg-soft)}
  .btn[aria-disabled="true"]{background:#EEF2F6;border-color:#EEF2F6;color:#8895A2;cursor:default}

  /* Split blocks */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  @media (max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
  .text-link{font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:4px;margin-top:18px}
  .text-link:hover{text-decoration:underline}

  /* Product detail */
  .detail-list{display:grid;gap:0;border-top:1px solid var(--line)}
  .detail-row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
  .detail-row h3{font-size:17px}
  .detail-row p,.detail-row li{color:var(--text-sub);font-size:15px}
  .detail-row ul{list-style:none;display:grid;gap:8px}
  .detail-row li{padding-left:18px;position:relative}
  .detail-row li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
  @media (max-width:720px){.detail-row{grid-template-columns:1fr;gap:10px}}
  .placeholder{border:1.5px dashed #C3D9EB;border-radius:var(--radius);background:var(--bg-soft);display:grid;place-items:center;text-align:center;color:var(--text-sub);font-size:14px;padding:28px;min-height:220px}
  .notice{font-size:13.5px;color:var(--text-sub);background:var(--bg-soft);border-radius:10px;padding:14px 16px;margin-top:20px}
  .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:f}
  .flow div{border:1px solid var(--line);border-radius:12px;padding:16px 14px;font-size:14px;color:var(--text-sub)}
  .flow div::before{counter-increment:f;content:counter(f);display:block;font-weight:700;color:var(--accent);margin-bottom:4px}
  @media (max-width:820px){.flow{grid-template-columns:1fr 1fr}}

  /* Resources */
  .toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:28px}
  .search{flex:1 1 260px;position:relative}
  .search input{width:100%;font:inherit;font-size:15px;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:10px;outline:none;color:var(--text)}
  .search input:focus{border-color:var(--accent)}
  .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#8895A2}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .chip{font:inherit;font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text-sub);cursor:pointer}
  .chip:hover{border-color:#B5D3EA}
  .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .chip .n{opacity:.7;margin-left:4px;font-size:12px}
  .res-thumb{aspect-ratio:4/3;border-radius:10px;background:var(--bg-soft);margin:-8px -8px 18px;display:grid;place-items:center;color:var(--accent);overflow:hidden}
  .res-thumb img{width:100%;height:100%;object-fit:cover}
  .res-thumb svg{width:40px;height:40px;opacity:.7}
  .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
  .empty{padding:48px 24px;text-align:center;color:var(--text-sub);border:1px dashed var(--line);border-radius:var(--radius)}
  .res-detail{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
  @media (max-width:820px){.res-detail{grid-template-columns:1fr;gap:28px}}
  .res-detail .res-thumb{margin:0;aspect-ratio:3/4}
  dl.info{display:grid;grid-template-columns:110px 1fr;border-top:1px solid var(--line)}
  dl.info dt,dl.info dd{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
  dl.info dt{font-weight:500}
  dl.info dd{color:var(--text-sub)}
  .back{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--text-sub);margin-bottom:20px}
  .back:hover{color:var(--accent)}

  /* About */
  .about-body p{font-size:17px;color:var(--text);margin-bottom:18px;max-width:720px}
  .principle{border-top:2px solid var(--accent);padding-top:18px}
  .principle p{color:var(--text-sub);font-size:15px;margin-top:6px}

  /* Footer */
  footer{border-top:1px solid var(--line);padding:48px 0 40px;font-size:14px;color:var(--text-sub)}
  .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
  .foot strong{color:var(--text);font-size:15px}
  .foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px}
  .foot a:hover{color:var(--accent)}
  .copy{margin-top:28px;font-size:13px}

  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* 추가: 버튼 줄, h2를 h3 크기로, 숨김, 푸터 사업자 정보 */
  .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  h2.h3{font-size:17px}
  .card[hidden],[hidden]{display:none!important}
  .biz{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.9}
  .biz .policy{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px}
  .biz .policy strong{color:var(--text)}
  .biz a:hover{color:var(--accent)}
  .biz .sep{margin:0 8px;color:#C6D1DC}
  .copy{margin-top:16px}

  /* 추가: 치료 자료실 가격·미리보기 */
  .badge.price{background:var(--accent);color:#fff}
  .badge.outline{background:#fff;border:1px solid var(--line);color:var(--text-sub)}
  .chips + .chips{margin-top:-16px}
  .preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
  .preview-grid img{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff}
  .chip-label{font-size:13px;font-weight:500;color:var(--text-sub);width:36px;display:inline-flex;align-items:center}

  /* ===== 배경 톤 조정 (V7 느낌: 화이트 + 연그린/크림, 섹션이 이어지는 흐름) =====
     구성·카드·버튼·메뉴·글꼴·여백은 그대로이고 배경 관련 값만 덮어씁니다. */
  :root{ --cream:#FFFFFF; --cream-2:#F7FAFD; --sage-wash:#EAF4FB; --line:#E3EBF2; }
  body{background:var(--cream)}
  header{background:rgba(255,255,255,.92);border-bottom-color:#E9F0F7}
  nav ul{background:transparent}
  @media (max-width:720px){ nav ul{background:var(--cream)} }

  /* 섹션 사이 굵은 구분선 대신 여백으로 자연스럽게 이어지도록 */
  section + section{border-top:0}

  /* 홈 상단: 진녹색 블록 → 은은한 세이지·크림 그라데이션 */
  .hero{
    background:
      radial-gradient(820px 380px at 88% 0%, rgba(169,214,238,.42), transparent 70%),
      linear-gradient(180deg, var(--sage-wash) 0%, #F3F9FD 50%, var(--cream) 100%);
  }
  .hero-band{background:transparent;color:var(--text)}
  .hero-band::after{background:rgba(28,110,170,.05)}
  .hero-band .eyebrow{color:var(--accent)}
  .hero-band h1{color:var(--text)}
  .hero-band p.lead{color:var(--text-sub)}

  /* 하위 페이지 머리 영역도 같은 톤으로 은은하게 시작 */
  .page-head{position:relative}
  .page-head::before{
    content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
    background:linear-gradient(180deg, var(--sage-wash) 0%, var(--cream) 100%);
  }
  main{position:relative;z-index:0}

  /* 내용 요소는 흰색으로 또렷하게 */
  .card,.search input,.chip:not(.on),.btn.ghost{background:#fff}
  .notice{background:var(--cream-2);border:1px solid #E9F0F7}
  .placeholder{background:#F4F9FD;border-color:#CFE1F0}
  .res-thumb{background:#F1F7FC}

  /* 푸터: 페이지와 이어지는 옅은 크림 */
  footer{background:var(--cream-2);border-top-color:#E9F0F7}

  /* 상단(홈 메인 소개·하위 페이지 머리)만 배경 유지, 그 아래는 흰색 */
  body{background:#fff}
  header{background:rgba(255,255,255,.94)}
  @media (max-width:720px){ nav ul{background:#fff} }
  .hero{
    background:
      radial-gradient(820px 380px at 88% 0%, rgba(169,214,238,.42), transparent 70%),
      linear-gradient(180deg, var(--sage-wash) 0%, #F3F9FD 55%, #fff 100%);
  }
  .page-head::before{background:linear-gradient(180deg, var(--sage-wash) 0%, #fff 100%)}
  footer{background:#fff}
  /* 시안 전용 표시: 실제 값이 필요한 자리 */
  .need{display:inline-block;font-size:12px;font-weight:500;color:#9A5B13;background:#FFF4E0;border:1px dashed #E8B66B;border-radius:6px;padding:1px 8px;margin-left:4px;vertical-align:middle}

  /* 상단 배경을 로고 색(하늘색 계열)으로 */
  :root{ --sky-wash:#EAF4FB; }
  .hero{
    background:
      radial-gradient(820px 380px at 88% 0%, rgba(169,214,238,.42), transparent 70%),
      linear-gradient(180deg, var(--sky-wash) 0%, #F3F9FD 55%, #fff 100%);
  }
  .hero-band::after{background:rgba(28,110,170,.05)}
  .page-head::before{background:linear-gradient(180deg, var(--sky-wash) 0%, #fff 100%)}
  .policy .detail-row ul li strong{color:var(--text);font-weight:500}
  .biz .bi{white-space:nowrap}
  .biz .bi.addr{white-space:normal}

  /* 제품 상세: 제목 옆 이미지, 앱 화면 */
  .product-hero{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:center}
  .product-hero-img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);background:#fff}
  @media (max-width:820px){.product-hero{grid-template-columns:1fr}.product-hero-img{max-width:300px}}
  .shots{display:flex;flex-wrap:wrap;gap:14px}
  .shots img{width:177px;max-width:calc(33.3% - 10px);height:auto;border-radius:14px}
  @media (max-width:620px){.shots img{max-width:calc(50% - 7px)}}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  @media (max-width:980px){.grid-4{grid-template-columns:1fr 1fr}}
  @media (max-width:520px){.grid-4{grid-template-columns:1fr}}
  /* 제품 소개: 소리터 대표 이미지 카드 */
  .sori-visual{margin:-8px -8px 18px;border-radius:12px;overflow:hidden;background:#F3F7F2;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
  .sori-visual img{width:100%;height:100%;object-fit:contain}
  .dh-visual{background:#F3F7F2}
  .dh-visual img{width:auto;height:62%;object-fit:contain}
  .sori-card{min-width:0}
  .sori-visual,.dh-visual{background:#fff}

  /* 홈: 소개 문구 + 바로 가기 단추만 (스크롤 없이 한 화면) */
  .home-hero{min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);display:flex;align-items:center;padding:0}
  .home-hero .hero-band{width:100%;padding:56px 0}
  .entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
  .entry{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px;transition:border-color .15s, box-shadow .15s}
  .entry:hover{border-color:#B5D3EA;box-shadow:0 6px 20px rgba(30,47,62,.06)}
  .entry .ico{flex:none;margin:0}
  .entry-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .entry-text strong{font-size:17px;font-weight:700;color:var(--text)}
  .entry-text span{font-size:14px;color:var(--text-sub)}
  .entry-arrow{flex:none;color:var(--accent);display:flex}
  .entry-arrow svg{width:18px;height:18px}
  @media (max-width:820px){
    .entry-grid{grid-template-columns:1fr;gap:10px;margin-top:28px}
    .entry{padding:14px 16px}
    .home-hero .hero-band{padding:36px 0}
  }
  .home-hero{position:relative;overflow:hidden}
  .home-hero .hero-band{position:static;overflow:visible}
  .home-hero .hero-band::after{display:none}
  .home-hero::after{content:"";position:absolute;right:-140px;top:-160px;width:520px;height:520px;border-radius:50%;background:rgba(28,110,170,.05);pointer-events:none}
  .home-hero .hero-band .wrap{position:relative;z-index:1}
  @media (max-width:720px){.home-hero::after{width:300px;height:300px;right:-110px;top:-110px}}

  /* 홈 소개 영역 · 제품 소개 머리 영역: 밝은 하늘색 (로고 색 계열) */
  .home-hero{
    background:
      radial-gradient(760px 420px at 85% 10%, rgba(169,214,238,.75), transparent 70%),
      linear-gradient(170deg, #CFE6F6 0%, #E3F1FB 55%, #F3F9FD 100%);
  }
  .home-hero::after{background:rgba(28,110,170,.07)}
  .home-hero .eyebrow{color:#1C6EAA}
  .home-hero h1{color:#0C4772}
  .home-hero p.lead{color:#3D5568}
  .home-hero .entry{border-color:transparent;box-shadow:0 6px 18px rgba(12,71,114,.08)}
  .home-hero .entry:hover{border-color:#A9D6EE;box-shadow:0 8px 22px rgba(12,71,114,.14)}

  .page-head.brand-head{padding-bottom:64px;margin-bottom:24px}
  .page-head.brand-head::before{
    background:
      radial-gradient(760px 420px at 85% 10%, rgba(169,214,238,.75), transparent 70%),
      linear-gradient(170deg, #CFE6F6 0%, #E3F1FB 55%, #F3F9FD 100%);
  }
  .page-head.brand-head .eyebrow{color:#1C6EAA}
  .page-head.brand-head h1{color:#0C4772}
  .page-head.brand-head p.lead{color:#3D5568}
  /* 다음회기: 4단계 흐름 */
  .flow.flow-4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:820px){.flow.flow-4{grid-template-columns:1fr 1fr}}