:root {
      --navy:#082b55;
      --navy-dark:#061d39;
      --blue:#176fbf;
      --blue-light:#eaf5ff;
      --gold:#ffd45a;
      --ink:#14253a;
      --muted:#68798c;
      --line:#dbe5ef;
      --white:#fff;
      --header:58px;
      --hero:270px;
      --slogan:54px;
      --trust:70px;
    }

    * { box-sizing:border-box; }
    html, body { margin:0; min-height:100%; overflow-x:hidden; }
    body {
      font-family:Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
      color:var(--ink);
      background:#fff;
      word-break:keep-all;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; }
    img { display:block; max-width:100%; }
    svg { display:block; }
    /* 화면 폭에 맞춰 자연스럽게 확장하되, 초광폭에서도 읽기 폭을 유지한다. */
    .container {
      width:calc(100% - 48px);
      max-width:1560px;
      margin:0 auto;
    }

    /* 데스크톱에서는 첫 화면 전체를 한 화면에 고정 */
    .home-shell {
      min-height:0;
      display:block;
      overflow:visible;
    }

    .site-header {
      height:var(--header);
      background:rgba(6,29,57,.98);
      color:#fff;
      border-bottom:1px solid rgba(255,255,255,.12);
      z-index:20;
    }
    .header-inner {
      height:100%;
      display:flex;
      align-items:center;
      gap:24px;
    }
    .brand {
      display:flex;
      align-items:center;
      gap:9px;
      font-size:19px;
      font-weight:950;
      white-space:nowrap;
    }
    .brand-mark {
      width:34px;
      height:34px;
      border-radius:10px;
      display:grid;
      place-items:center;
      overflow:hidden;
      background:#17679f;
      border:1px solid rgba(255,255,255,.28);
    }
    .brand-symbol { width:100%; height:100%; object-fit:cover; display:block; }
    .main-nav {
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:22px;
      font-size:14px;
      font-weight:760;
    }
    .main-nav a { opacity:.9; }
    .main-nav a:hover { opacity:1; color:#9ed6ff; }
    .header-actions {
      display:flex;
      align-items:center;
      gap:12px;
      margin-left:4px;
    }
    .phone { font-size:13px; font-weight:850; white-space:nowrap; }
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:38px;
      padding:0 15px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:850;
      font-size:13px;
      transition:.2s ease;
    }
    .btn:hover { transform:translateY(-1px); }
    .btn-primary {
      color:#fff;
      background:linear-gradient(135deg,#2f8bd8,#176fbf);
      box-shadow:0 8px 20px rgba(23,111,191,.25);
    }
    .btn-outline {
      color:#fff;
      border-color:rgba(255,255,255,.55);
      background:rgba(255,255,255,.07);
    }
    .btn-hero-inquiry {
      color:#112e4e;
      border-color:rgba(255,231,142,.9);
      background:linear-gradient(135deg,#ffe88c,#ffc83d);
      box-shadow:0 10px 25px rgba(255,188,30,.34);
    }
    .btn-hero-inquiry:hover {
      background:linear-gradient(135deg,#fff0aa,#ffd35d);
      box-shadow:0 12px 30px rgba(255,188,30,.45);
    }
    .menu-button {
      display:none;
      width:40px;
      height:40px;
      padding:8px;
      border:0;
      background:transparent;
      color:#fff;
      cursor:pointer;
    }
    .menu-button span {
      display:block;
      height:2px;
      margin:5px 0;
      border-radius:2px;
      background:currentColor;
    }

    .hero {
      position:relative;
      height:var(--hero);
      overflow:hidden;
      color:#fff;
      isolation:isolate;
      background:#071d39;
    }
    .hero::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      background:
        linear-gradient(90deg,rgba(3,20,39,.95) 0%,rgba(4,30,57,.86) 42%,rgba(5,35,65,.38) 72%,rgba(4,27,51,.3) 100%),
        linear-gradient(0deg,rgba(5,29,55,.3),rgba(5,29,55,.08));
    }
    .hero-slides,
    .hero-slide {
      position:absolute;
      inset:0;
    }
    .hero-slides { z-index:0; }
    .hero-slide {
      opacity:0;
      transform:scale(1.025);
      background-image:var(--slide-image);
      background-position:center;
      background-size:cover;
      transition:opacity .8s ease, transform 6s ease;
    }
    .hero-slide:first-child { background-position:center 37%; }
    .hero-slide:nth-child(3) { background-position:center; }
    .hero-slide.is-active {
      opacity:1;
      transform:scale(1);
    }
    .hero-inner {
      height:100%;
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:38px;
      align-items:center;
    }
    .hero-inner > * { min-width:0; }
    .hero-copy { min-width:0; }
    .hero-kicker {
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:850;
      background:rgba(255,255,255,.11);
      border:1px solid rgba(255,255,255,.17);
    }
    .hero-kicker::before {
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--gold);
      box-shadow:0 0 0 5px rgba(255,212,90,.12);
    }
    .hero h1 {
      margin:11px 0 8px;
      font-size:clamp(34px,3.35vw,49px);
      line-height:1.08;
      letter-spacing:-.045em;
    }
    .hero-date,
    .hero-message { display:block; }
    .hero-ending { display:inline; }
    .hero h1 em {
      color:var(--gold);
      font-style:normal;
    }
    .d-day {
      display:inline-flex;
      vertical-align:middle;
      transform:translateY(-4px);
      margin-left:5px;
      padding:6px 10px;
      border-radius:10px;
      font-size:.42em;
      letter-spacing:0;
      background:#2d70b1;
      border:1px solid rgba(255,255,255,.17);
    }
    .hero p {
      margin:0;
      max-width:670px;
      font-size:15px;
      color:rgba(255,255,255,.8);
    }
    .hero-cta {
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-top:14px;
    }

    .hero-visual {
      position:relative;
      height:232px;
    }
    .hero-notices {
      display:flex;
      align-items:center;
      justify-content:flex-end;
    }
    .banner-notice {
      position:absolute;
      right:0;
      width:245px;
      min-height:178px;
      padding:20px 19px 46px;
      opacity:0;
      visibility:hidden;
      transform:translateX(18px);
      border-radius:18px;
      color:#152438;
      background:rgba(255,255,255,.96);
      box-shadow:0 18px 44px rgba(1,15,30,.3);
      transition:opacity .35s ease, transform .35s ease, visibility .35s;
    }
    .banner-notice.is-active {
      opacity:1;
      visibility:visible;
      transform:none;
    }
    .banner-notice__tag {
      display:inline-flex;
      margin-bottom:11px;
      padding:5px 9px;
      border-radius:999px;
      color:#fff;
      background:#e42828;
      font-size:10px;
      font-weight:900;
    }
    .banner-notice strong {
      display:block;
      font-size:18px;
      line-height:1.25;
      letter-spacing:-.035em;
    }
    .hero .banner-notice p {
      margin:8px 0 0;
      color:#617084;
      font-size:11px;
      line-height:1.4;
    }
    .banner-notice > a {
      position:absolute;
      left:19px;
      bottom:18px;
      color:#a90000;
      font-size:11px;
      font-weight:900;
    }
    .banner-controls {
      position:absolute;
      right:13px;
      bottom:8px;
      z-index:5;
      display:flex;
      align-items:center;
      gap:6px;
      transform:translateY(100%);
      padding:7px 9px;
      border-radius:999px;
      background:rgba(3,24,45,.76);
      backdrop-filter:blur(8px);
    }
    .banner-arrow,
    .banner-pause,
    .banner-dot {
      border:0;
      color:#fff;
      background:transparent;
      cursor:pointer;
    }
    .banner-arrow {
      width:22px;
      height:22px;
      padding:0;
      font-size:19px;
      line-height:20px;
    }
    .banner-pause {
      width:22px;
      height:22px;
      padding:0;
      border-left:1px solid rgba(255,255,255,.25);
      font-size:9px;
    }
    .banner-dots { display:flex; align-items:center; gap:5px; }
    .banner-dot {
      width:7px;
      height:7px;
      padding:0;
      border-radius:50%;
      background:rgba(255,255,255,.45);
    }
    .banner-dot.is-active { width:18px; border-radius:8px; background:#ffd45a; }
    .people-card {
      position:absolute;
      inset:0 45px 0 0;
      overflow:hidden;
      border-radius:23px;
      background:
        linear-gradient(180deg,transparent 48%,rgba(4,23,44,.72)),
        url("/images/home-sample/hero-people.jpg") center/cover;
      border:1px solid rgba(255,255,255,.22);
      box-shadow:0 20px 45px rgba(0,0,0,.28);
    }
    .people-caption {
      position:absolute;
      left:20px;
      right:20px;
      bottom:15px;
      z-index:2;
      display:flex;
      justify-content:space-between;
      align-items:end;
    }
    .people-caption strong {
      display:block;
      font-size:16px;
    }
    .people-caption small {
      color:rgba(255,255,255,.7);
      font-size:11px;
    }
    .t-badge {
      width:50px;
      height:50px;
      border-radius:14px;
      display:grid;
      place-items:center;
      text-align:center;
      line-height:1.05;
      font-size:10px;
      font-weight:950;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(8px);
    }
    .law-card {
      position:absolute;
      right:0;
      top:14px;
      width:205px;
      overflow:hidden;
      border-radius:16px;
      color:#161616;
      background:rgba(255,255,255,.96);
      box-shadow:0 15px 38px rgba(3,22,43,.3);
    }
    .law-card-head {
      padding:9px 13px;
      color:#fff;
      background:#e42828;
      font-size:11px;
      font-weight:850;
    }
    .law-body { padding:13px 15px 15px; }
    .law-body h2 {
      margin:0 0 6px;
      font-size:18px;
      line-height:1.2;
      letter-spacing:-.03em;
    }
    .law-body p {
      margin:0 0 8px;
      font-size:12px;
    }
    .hero .law-body p { color:#333; }
    .law-body a {
      color:#a90000;
      font-size:11px;
      font-weight:900;
    }

    .slogan {
      height:var(--slogan);
      color:#fff;
      background:linear-gradient(105deg,#0e4c8b,#237cc4,#0e4c8b);
      border-top:1px solid rgba(255,255,255,.1);
    }
    .slogan .container {
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-size:clamp(19px,2.05vw,28px);
      font-weight:950;
      letter-spacing:-.035em;
    }
    .slogan mark {
      color:var(--gold);
      background:none;
    }
    .mobile-only { display:none; }

    .dashboard {
      min-height:0;
      padding:18px 0 22px;
      background:#fff;
    }
    .dashboard-grid {
      height:auto;
      min-height:0;
      display:grid;
      grid-template-columns:1.55fr .72fr .78fr;
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
    }
    .dashboard-grid > #stories,
    .dashboard-grid > .actions-panel { display:none !important; }
    .panel {
      min-width:0;
      padding:15px 14px;
      border-right:1px solid var(--line);
      overflow:hidden;
      background:#fff;
    }
    .panel:last-child { border-right:0; }
    .panel-link {
      display:block;
      color:inherit;
      text-decoration:none;
      transition:background .2s ease;
    }
    .panel-link:hover { background:#f6fbff; }
    .panel h2 {
      margin:0 0 10px;
      font-size:16px;
      line-height:1.25;
      letter-spacing:-.025em;
    }
    .panel-sub {
      margin:-5px 0 9px;
      color:var(--muted);
      font-size:10px;
    }

    .use-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }
    .use-item {
      position:relative;
      min-height:0;
      aspect-ratio:2.05/1;
      padding:56px 10px 10px;
      overflow:hidden;
      border-radius:12px;
      color:#fff;
      text-align:left;
      font-size:0;
      font-weight:900;
      line-height:1.25;
      letter-spacing:-.02em;
      text-shadow:none;
      background-position:center;
      background-size:cover;
      box-shadow:inset 0 -48px 34px -14px rgba(1,15,29,.9), 0 5px 14px rgba(7,39,69,.12);
    }
    .use-item::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,transparent 35%,rgba(2,17,32,.5) 100%); }
    .use-item::after {
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      z-index:2;
      padding:7px 9px;
      border-radius:8px;
      color:#fff;
      background:rgba(4,35,65,.9);
      box-shadow:0 4px 12px rgba(0,0,0,.22);
      font-size:11.5px;
      font-weight:900;
      line-height:1.35;
      white-space:pre-line;
      text-shadow:0 1px 2px rgba(0,0,0,.35);
    }
    .use-item:nth-child(1) { background-image:url('/images/contents/telzone5_img1_3.png'); }
    .use-item:nth-child(2) { background-image:url('/images/contents/telzone5_img1_6.png'); }
    .use-item:nth-child(3) { background-image:url('/images/contents/telzone5_img1_15.png'); }
    .use-item:nth-child(4) { background-image:url('/images/contents/telzone5_img5_2.png'); }
    .use-item:nth-child(5) { background-image:url('/images/contents/telzone5_img8_1.png'); }
    .use-item:nth-child(6) { background-image:url('/images/contents/telzone5_img1_1.png'); }
    .use-item:nth-child(1)::after { content:"민원·행정 안내"; }
    .use-item:nth-child(2)::after { content:"버스정류장 안내"; }
    .use-item:nth-child(3)::after { content:"역사·안내창구"; }
    .use-item:nth-child(4)::after { content:"교육·강의 공간"; }
    .use-item:nth-child(5)::after { content:"복지시설"; }
    .use-item:nth-child(6)::after { content:"공연·문화시설"; }
    .use-item > * { position:relative; z-index:1; }
    .use-icon {
      display:none;
    }
    .use-icon svg {
      width:19px;
      height:19px;
      fill:none;
      stroke:currentColor;
      stroke-width:1.8;
    }

    .device-img,
    .map-img {
      width:100%;
      height:auto;
      aspect-ratio:16/9;
      object-fit:cover;
      border-radius:12px;
      border:1px solid #e8eef4;
      background:#f3f7fb;
    }
    .map-img {
      width:min(100%,250px);
      height:auto;
      aspect-ratio:auto;
      margin-left:auto;
      margin-right:auto;
      object-fit:contain;
      object-position:center;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
    }
    .map-api-fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:15px; text-align:center; color:#0b416f; background:rgba(239,248,254,.88); }
    .map-api-fallback strong { font-size:14px; }.map-api-fallback small { color:#5e7890; font-size:10px; }
    .map-api-ready .map-api-fallback { display:none; }
    .panel-note {
      margin:8px 0 0;
      color:#34475c;
      font-size:10.5px;
      font-weight:750;
      line-height:1.42;
    }

    /* 사람들의 이야기 영상 썸네일 */
    .video-thumb {
      position:relative;
      width:100%;
      height:128px;
      overflow:hidden;
      border:0;
      border-radius:14px;
      cursor:pointer;
      background:
        linear-gradient(180deg,transparent 35%,rgba(5,25,47,.72)),
        url("/images/home-sample/story-video.jpg") center/cover;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    }
    .video-thumb::before {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(4,32,62,.22),transparent 60%);
    }
    .play {
      position:absolute;
      left:50%;
      top:48%;
      width:48px;
      height:48px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(23,111,191,.93);
      border:3px solid rgba(255,255,255,.85);
      box-shadow:0 8px 22px rgba(0,0,0,.24);
    }
    .play::after {
      content:"";
      margin-left:3px;
      border-top:8px solid transparent;
      border-bottom:8px solid transparent;
      border-left:13px solid #fff;
    }
    .video-caption {
      position:absolute;
      left:12px;
      right:12px;
      bottom:10px;
      z-index:2;
      color:#fff;
      text-align:left;
    }
    .video-caption strong {
      display:block;
      font-size:12px;
    }
    .video-caption small {
      color:rgba(255,255,255,.72);
      font-size:9.5px;
    }

    .actions-panel {
      padding:13px;
      display:grid;
      gap:9px;
      align-content:center;
      background:#f7fbff;
    }
    .action-card {
      min-height:82px;
      padding:13px 12px;
      display:flex;
      align-items:center;
      gap:10px;
      border-radius:15px;
      color:#fff;
      background:linear-gradient(135deg,#0b315d,#114d87);
      box-shadow:0 7px 20px rgba(8,43,85,.13);
      transition:.2s ease;
    }
    .action-card:hover { transform:translateY(-2px); }
    .action-icon {
      width:38px;
      height:38px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:50%;
      border:1.5px solid rgba(255,255,255,.6);
      background:rgba(255,255,255,.08);
    }
    .action-icon svg {
      width:21px;
      height:21px;
      fill:none;
      stroke:#fff;
      stroke-width:1.8;
    }
    .action-text {
      min-width:0;
      flex:1;
    }
    .action-text strong {
      display:block;
      font-size:13px;
      line-height:1.25;
    }
    .action-text small {
      display:block;
      margin-top:2px;
      color:rgba(255,255,255,.64);
      font-size:9.5px;
    }
    .action-arrow {
      font-size:21px;
      opacity:.75;
    }

    .trust-bar {
      min-height:0;
      height:auto;
      color:#fff;
      background:var(--navy);
    }
    .trust-grid {
      min-height:var(--trust);
      height:auto;
      display:grid;
      grid-template-columns:repeat(5,1fr);
    }
    .trust-item {
      min-width:0;
      padding:10px 14px;
      display:flex;
      align-items:center;
      gap:10px;
      position:relative;
    }
    .trust-item:not(:last-child)::after {
      content:"";
      position:absolute;
      right:0;
      top:16px;
      bottom:16px;
      width:1px;
      background:rgba(255,255,255,.14);
    }
    .trust-icon {
      width:35px;
      height:35px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:11px;
      color:#9fd7ff;
      background:rgba(255,255,255,.08);
    }
    .trust-icon svg {
      width:21px;
      height:21px;
      fill:none;
      stroke:currentColor;
      stroke-width:1.8;
    }
    .trust-item strong {
      display:block;
      font-size:12px;
    }
    .trust-item small {
      display:block;
      margin-top:1px;
      color:rgba(255,255,255,.62);
      font-size:9.5px;
    }

    .social-rail {
      position:fixed;
      right:13px;
      top:50%;
      z-index:80;
      display:grid;
      gap:7px;
      transform:translateY(-50%);
    }
    .social-link {
      position:relative;
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:13px;
      color:#fff;
      background:#fff;
      box-shadow:0 7px 20px rgba(5,28,54,.2);
      transition:transform .2s ease;
    }
    .social-link:hover { transform:translateX(-3px); }
    .social-link span { font-size:16px; font-weight:950; }
    .social-link b {
      position:absolute;
      right:49px;
      padding:6px 9px;
      opacity:0;
      visibility:hidden;
      border-radius:7px;
      color:#fff;
      background:#102a49;
      font-size:10px;
      white-space:nowrap;
      transition:.2s ease;
    }
    .social-link:hover b,
    .social-link:focus-visible b { opacity:1; visibility:visible; }
    .social-link--blog { color:#fff; background:#03c75a; }
    .social-link--instagram { background:linear-gradient(145deg,#6a39c7,#dd2b74,#ff9d36); }
    .social-link--kakao { color:#171717; background:#fee500; }

    .mobile-conversion { display:none; }

    /* 영상 모달 */
    .video-modal {
      position:fixed;
      inset:0;
      z-index:1000;
      display:none;
      place-items:center;
      padding:24px;
      background:rgba(3,15,29,.84);
      backdrop-filter:blur(5px);
    }
    .video-modal.open { display:grid; }
    .video-dialog {
      width:min(940px,100%);
      border-radius:20px;
      overflow:hidden;
      background:#071c34;
      box-shadow:0 30px 80px rgba(0,0,0,.45);
    }
    .video-dialog-head {
      height:50px;
      padding:0 15px 0 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      color:#fff;
    }
    .video-dialog-head strong { font-size:14px; }
    .video-close {
      width:34px;
      height:34px;
      border:0;
      border-radius:50%;
      color:#fff;
      background:rgba(255,255,255,.1);
      cursor:pointer;
      font-size:20px;
    }
    .video-frame {
      aspect-ratio:16/9;
      background:#000;
    }
    .video-frame iframe {
      width:100%;
      height:100%;
      border:0;
    }

    a:focus-visible,
    button:focus-visible {
      outline:3px solid #ffd45a;
      outline-offset:3px;
    }

    @media (prefers-reduced-motion:reduce) {
      *, *::before, *::after {
        scroll-behavior:auto !important;
        transition:none !important;
      }
    }

    /* Full HD 이상: 1240px 고정 레이아웃처럼 작아 보이지 않도록 비례 확장 */
    @media (min-width:1600px) and (min-height:760px) {
      :root {
        --header:60px;
        --hero:300px;
        --slogan:54px;
        --trust:74px;
      }
      .header-inner { padding:0 4px; }
      .brand { font-size:20px; }
      .main-nav { gap:27px; font-size:15px; }
      .phone { font-size:14px; }
      .hero-inner { grid-template-columns:1.12fr .88fr; gap:58px; }
      .hero h1 { font-size:52px; }
      .hero p { max-width:760px; font-size:16px; }
      .banner-notice { width:270px; min-height:188px; }
      .banner-notice strong { font-size:19px; }
      .slogan .container { font-size:28px; }
      .dashboard-grid { grid-template-columns:1.6fr .72fr .8fr; }
      .panel { padding:18px 16px; }
      .panel h2 { font-size:17px; }
      .use-item, .panel-note { font-size:11.5px; }
      .device-img, .map-img { height:auto; }
      .video-thumb { height:144px; }
      .action-card { min-height:88px; }
      .trust-item strong { font-size:13px; }
      .trust-item small { font-size:10px; }
    }

    /* 세로 공간이 큰 모니터에서는 빈 칸 대신 카드 내용을 중앙에 안정적으로 배치 */
    @media (min-width:981px) and (min-height:820px) {
      .actions-panel { align-content:center; }
    }

    /* 노트북 높이가 매우 낮으면 자연스럽게 스크롤 허용 */
    @media (max-height:700px) and (min-width:981px) {
      .home-shell {
        min-height:720px;
        overflow:visible;
      }
    }

    @media (max-width:1120px) {
      .container { width:calc(100% - 32px); }
      .main-nav { display:none; }
      .header-actions { margin-left:auto; }
      .menu-button { display:block; }
      .main-nav.open {
        display:flex;
        position:absolute;
        top:var(--header);
        left:0;
        right:0;
        z-index:50;
        padding:18px;
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
        background:rgba(6,29,57,.99);
        border-top:1px solid rgba(255,255,255,.12);
      }
      .dashboard-grid {
        grid-template-columns:1.45fr .8fr .85fr;
      }
      .actions-panel {
        display:none;
      }
      .social-rail { right:7px; }
    }

    @media (max-width:980px) {
      body { overflow:auto; }
      .home-shell {
        display:block;
        overflow:visible;
      }
      .site-header { height:var(--header); }
      .hero {
        min-height:540px;
        padding:42px 0;
      }
      .hero-inner {
        grid-template-columns:1fr;
      }
      .hero-visual {
        height:250px;
      }
      .hero-notices { justify-content:flex-end; }
      .banner-controls { bottom:2px; transform:none; }
      .slogan {
        min-height:76px;
      }
      .dashboard-grid {
        grid-template-columns:1fr 1fr;
      }
      .panel {
        min-height:240px;
        border-bottom:1px solid var(--line);
      }
      .actions-panel {
        display:grid;
        grid-column:1/-1;
        grid-template-columns:1fr 1fr;
        min-height:auto;
      }
      .trust-bar {
        min-height:140px;
      }
      .trust-grid {
        grid-template-columns:repeat(3,1fr);
      }
    }

    @media (max-width:640px) {
      .home-shell,
      .site-header,
      .hero,
      .slogan,
      .dashboard,
      .trust-bar {
        width:100%;
        max-width:100vw;
      }
      .container {
        width:calc(100% - 24px);
        max-width:calc(100% - 24px);
      }
      .phone, .header-actions .btn { display:none; }
      .brand { font-size:17px; }
      .hero {
        min-height:570px;
        padding:32px 0;
      }
      .hero h1 {
        max-width:100%;
        font-size:clamp(29px,8.3vw,33px);
        word-break:normal;
        overflow-wrap:anywhere;
      }
      .hero-date { white-space:nowrap; }
      .hero-message { margin-top:4px; }
      .hero-ending { display:block; }
      .d-day {
        display:inline-flex;
        width:auto;
        margin:0 0 0 3px;
        transform:none;
        padding:5px 8px;
        font-size:13px;
      }
      .hero p { word-break:normal; overflow-wrap:anywhere; }
      .hero-inner { grid-template-columns:minmax(0,1fr); }
      .hero-copy,
      .hero-visual {
        width:100%;
        max-width:100%;
        min-width:0;
      }
      .hero-visual {
        height:245px;
        overflow:hidden;
        border-radius:23px;
      }
      .hero-slide:first-child { background-position:58% center; }
      .hero::before {
        background:linear-gradient(90deg,rgba(3,20,39,.95),rgba(4,30,57,.67));
      }
      .banner-notice {
        left:auto;
        right:10px;
        width:225px;
        max-width:calc(100% - 20px);
        min-height:170px;
        padding:17px 16px 43px;
      }
      .banner-notice strong { font-size:16px; }
      .banner-notice > a { left:16px; bottom:16px; }
      .banner-controls { right:14px; bottom:10px; }
      .people-card { inset:0 10px 0 0; }
      .law-card { width:178px; }
      .slogan .container {
        padding:14px 4px;
        font-size:20px;
        line-height:1.35;
        word-break:keep-all;
        overflow-wrap:anywhere;
      }
      .mobile-only { display:block; }
      .dashboard-grid { grid-template-columns:1fr; }
      .panel {
        min-height:auto;
        padding:20px 17px;
      }
      .device-img, .map-img { height:auto; }
      .video-thumb { height:190px; }
      .actions-panel {
        grid-template-columns:1fr;
      }
      .trust-bar { min-height:auto; }
      .trust-grid { grid-template-columns:1fr 1fr; }
      .trust-item {
        min-height:67px;
      }
      .trust-item:nth-child(2n)::after { display:none; }
      .trust-item:nth-child(-n+4) {
        border-bottom:1px solid rgba(255,255,255,.1);
      }
      .social-rail {
        position:static;
        width:100%;
        padding:14px 12px 82px;
        display:flex;
        justify-content:center;
        transform:none;
        background:#f3f8fd;
      }
      .social-link { width:44px; height:44px; }
      .social-link b { display:none; }
      .mobile-conversion {
        position:fixed;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:100;
        display:grid;
        grid-template-columns:1.25fr .75fr;
        overflow:hidden;
        border-radius:14px;
        box-shadow:0 12px 32px rgba(4,29,56,.3);
      }
      .mobile-conversion a {
        min-height:54px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        color:#fff;
        font-size:12px;
        font-weight:850;
      }
      .mobile-conversion__phone { background:#0b4e8c; }
      .mobile-conversion__phone strong { font-size:15px; }
      .mobile-conversion__kakao { color:#171717 !important; background:#fee500; }
    }