/* ============================================================
       디자인 색상: 치이카와 테마에 맞춘 부드러운 파스텔 핑크/네이비 톤
       ============================================================ */
    :root {
      --brand: #f06292;
      --brand-dark: #2a2333;
      --brand-light: #fff0f5;
      --ink: #2b252c;
      --muted: #6e6573;
      --surface: #faf6f8;
      --line: #fae1ea;
      --white: #ffffff;
      --radius: 20px;
      --max-width: 1120px;
      --shadow: 0 14px 35px rgba(240, 98, 146, .08);
    }
    *, *::before, *::after {box-sizing:border-box}
    html {scroll-behavior:smooth; scroll-padding-top:85px}
    body {margin:0;color:var(--ink);font:16px/1.8 system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all;background:var(--white)}
    img {max-width:100%;display:block}
    a {color:inherit;text-decoration:none}
    button {font:inherit;cursor:pointer}
    p {margin:0 0 16px}
    h1,h2,h3 {line-height:1.35;letter-spacing:-.045em;margin:0}
    h2 {font-size:clamp(28px,3vw,39px)}
    h3 {font-size:20px}
    :focus-visible {outline:3px solid var(--brand);outline-offset:3px}
    .container {width:min(calc(100% - 40px),var(--max-width));margin:0 auto}
    .skip {position:absolute;left:-9999px;top:10px;background:white;padding:12px;z-index:100}
    .skip:focus {left:10px}
    .eyebrow {display:inline-block;color:var(--brand);font-size:12px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;margin-bottom:16px}
    .section {padding:92px 0}
    .section.alt {background:var(--surface)}
    .section.dark {background:var(--brand-dark);color:#fff}
    .section-head {margin-bottom:30px;max-width:750px}
    .section-head p {color:var(--muted);margin-top:14px}
    .dark .section-head p,.dark .eyebrow {color:#fbcfe8}
    .section-index {font:700 12px/1.4 system-ui;color:var(--brand);margin-right:8px}
    .dark .section-index {color:#f472b6}
    .grid {display:grid;gap:22px}
    .grid.two {grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.three {grid-template-columns:repeat(3,minmax(0,1fr))}
    .card {background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:27px;box-shadow:var(--shadow)}
    .card p:last-child {margin-bottom:0}
    .card h3 {margin-bottom:12px}
    .card-number {display:block;font-size:13px;font-weight:800;color:var(--brand);margin-bottom:14px}
    .dark .card {background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);box-shadow:none;color:#fff}
    .dark .card-number {color:#fbcfe8}
    .btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 23px;border-radius:11px;font-weight:750;transition:transform .2s,background .2s}
    .btn:hover {transform:translateY(-2px)}
    .btn.primary {background:var(--brand);color:#fff}
    .btn.primary:hover {background:#d81b60}
    .btn.outline {border:1px solid currentColor;color:inherit}
    .actions {display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

    /* 헤더 (텍스트 밀림 및 줄바꿈 방지 패치) */
    .header {position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
    .header-inner {min-height:84px;display:flex;justify-content:space-between;align-items:center;gap:18px}
    .brand {font-size:24px;font-weight:850;color:var(--brand);letter-spacing:-.04em;white-space:nowrap;flex-shrink:0}
    .nav {display:flex;gap:17px;align-items:center;font-size:16px;font-weight:750}
    .nav a {white-space:nowrap;transition:color .2s}
    .nav a:hover {color:var(--brand)}
    .menu-toggle {display:none;border:0;background:transparent;font-size:25px;color:var(--ink);padding:6px;cursor:pointer}

    /* 메인 비주얼 (요청하신 배경 이미지 경로 적용) */
    .hero {
      position: relative;
      overflow: hidden;
      min-height: 560px;
      display: flex;
      align-items: center;
      color: #fff;
      background-color: var(--brand-dark);
      background-image: 
        linear-gradient(135deg, rgba(42, 35, 51, 0.92) 0%, rgba(136, 52, 91, 0.85) 60%, rgba(240, 98, 146, 0.7) 100%),
        url('../images/black-laptop-screen-dark-room-night.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .25;
      background: radial-gradient(circle at 83% 28%, #fff 0%, transparent 27%), radial-gradient(circle at 75% 80%, #fbcfe8 0%, transparent 24%);
      pointer-events: none;
    }
    .hero .container {position:relative;z-index:1;padding:85px 0}
    .hero-copy {max-width:760px}
    .hero .eyebrow {color:#fbcfe8}
    .hero h1 {font-size:clamp(40px,6vw,72px);margin-bottom:20px}
    .hero .lead {font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.55}
    .hero p:not(.lead) {max-width:690px;color:#fce7f3}
    .hero .btn.primary {background:#fff;color:var(--brand)}
    .hero .btn.outline {border-color:rgba(255,255,255,.7)}

    /* 본문 레이아웃 */
    .split {display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
    .prose p {color:var(--muted)}
    .media {border-radius:var(--radius);background:var(--brand-light);border:1px solid var(--line);min-height:320px;display:grid;place-items:center;overflow:hidden;position:relative}
    .media img {width:100%;height:100%;object-fit:contain;max-height:450px}
    .media .placeholder {text-align:center;color:var(--brand);padding:36px}
    .media .placeholder strong {display:block;font-size:19px;margin-bottom:8px}
    .media .placeholder span {font-size:13px;color:var(--muted)}
    .product-layout {display:grid;grid-template-columns:.9fr 1.1fr;gap:35px;align-items:start}
    .product-info {border:1px solid var(--line);border-radius:var(--radius);padding:30px}
    .product-info h3 {font-size:28px;margin-bottom:18px}
    .specs {margin:22px 0 0;border-top:1px solid var(--line)}
    .specs div {display:grid;grid-template-columns:128px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
    .specs dt {font-weight:700;color:var(--muted)}
    .specs dd {margin:0;font-weight:600}

    /* 테이블 */
    .table-wrap {overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
    table {width:100%;border-collapse:collapse;min-width:570px;text-align:left}
    th,td {padding:17px 20px;border-bottom:1px solid var(--line)}
    th {background:var(--brand-light);color:var(--brand);font-size:14px}
    tbody tr:last-child td {border-bottom:0}
    .note {color:var(--muted);font-size:13px;margin-top:16px}
    .dark .note {color:#fbcfe8}
    .notice {padding:20px 24px;border-left:4px solid var(--brand);background:var(--brand-light);border-radius:0 12px 12px 0;margin-top:28px}
    .notice p {margin:5px 0 0}

    /* FAQ */
    .faq {max-width:860px}
    .faq details {background:#fff;border:1px solid var(--line);border-radius:14px;margin:0 0 12px;overflow:hidden}
    .faq summary {padding:20px 24px;cursor:pointer;font-weight:750;list-style:none;display:flex;justify-content:space-between;gap:12px}
    .faq summary::-webkit-details-marker {display:none}
    .faq summary::after {content:"+";color:var(--brand);font-size:23px;line-height:1}
    .faq details[open] summary::after {content:"−"}
    .faq details p {margin:0;padding:0 24px 22px;color:var(--muted)}

    /* 푸터 */
    .footer {background:#1f1924;color:#d5cbd8;padding:42px 0 115px;font-size:13px}
    .footer strong {color:#fff;font-size:17px}
    .footer p {margin:12px 0 0}

    /* 반응형 분기점 (메뉴 개수에 맞춰 1024px로 조정하여 메뉴 줄바꿈 밀림 현상 방지) */
    @media (max-width:1199px) {
      .menu-toggle {display:block}
      .nav {
        display:none;
        position:absolute;
        top:84px;
        left:0;
        right:0;
        background:white;
        box-shadow:0 15px 20px rgba(0,0,0,.08);
        padding:24px;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        border-bottom:1px solid var(--line);
      }
      .nav.is-open {display:flex}
    }

    @media (max-width:800px) {
      .section {padding:66px 0}
      .split,.product-layout {grid-template-columns:1fr;gap:26px}
      .grid.three {grid-template-columns:repeat(2,minmax(0,1fr))}
      .hero {min-height:490px}
    }

    @media (max-width:540px) {
      .container {width:min(calc(100% - 32px),var(--max-width))}
      .grid.two,.grid.three {grid-template-columns:1fr}
      .hero .container {padding:75px 0}
      .card,.product-info {padding:22px}
      .specs div {grid-template-columns:100px 1fr}
    }
    @media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto} .btn {transition:none}}
  
/* 모바일에서도 메뉴 글자를 또렷하게 */
@media(max-width:1199px){.header .nav a{font-size:17px;line-height:1.6}}
@media(max-width:540px){.header .brand{font-size:22px}.header .header-inner{min-height:78px}.header .nav{top:78px}}


.inline-style-1 { margin:0 }