@charset "UTF-8";
/* ============================================================
   다낭 컨시어지 — 스타일시트
   ------------------------------------------------------------
   디자인 방향: 애플(Apple) 스타일

   애플 화면이 고급스러워 보이는 이유는 장식이 많아서가 아니라
   아래 다섯 가지를 철저히 지키기 때문입니다. 그대로 따랐습니다.

     1) 글자가 주인공
        아이콘·이모지·색이 아니라 제목의 크기와 무게로 위계를 만듭니다.
        큰 제목은 굵고(600~700), 자간을 살짝 좁혀(-0.02em) 단단하게 보이게 합니다.

     2) 색은 거의 안 씁니다
        검정(#1d1d1f) · 회색(#6e6e73) · 연회색 바탕(#f5f5f7) 이 거의 전부입니다.
        파랑(#0071e3)은 "누를 수 있는 것"에만 씁니다. 그래서 파랑이 눈에 띕니다.

     3) 여백이 곧 품질
        답답하면 싸구려로 보입니다. 섹션 사이를 과감하게 띄웠습니다.

     4) 모서리는 넉넉하게, 테두리는 최소로
        카드는 테두리 대신 연회색 바탕으로 구분하고 모서리를 18px 이상 굴립니다.
        버튼은 완전한 알약(980px) 모양입니다.

     5) 이모지는 쓰지 않습니다
        🚐 ⛳ 같은 컬러 이모지는 기기마다 모양이 달라 화면이 촌스러워집니다.
        같은 굵기의 선으로 그린 아이콘(.ico)으로 통일했습니다.

   글꼴은 애플 기기에서는 SF Pro / Apple SD 산돌고딕 Neo 가 자동으로 잡히고,
   윈도우에서는 Pretendard → 맑은 고딕 순으로 내려갑니다. 외부 CDN을 쓰지 않습니다.
   ============================================================ */

/* ------------------------------------------------------------
   1. 토큰 — 색·글자·간격을 여기 한 곳에서만 정합니다
   ------------------------------------------------------------ */
:root{
  /* 글꼴 */
  --f-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
           "Apple SD Gothic Neo", "Pretendard Variable", Pretendard,
           "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --f-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* 색 — 애플 시스템 팔레트 */
  --c-ink:#1d1d1f;      /* 본문 검정 (순검정이 아닙니다) */
  --c-ink-2:#6e6e73;    /* 보조 설명 */
  --c-ink-3:#86868b;    /* 가장 흐린 글자 */
  --c-line:#d2d2d7;     /* 구분선 */
  --c-line-2:#e8e8ed;   /* 더 옅은 구분선 */
  --c-bg:#ffffff;
  --c-bg-2:#f5f5f7;     /* 애플의 그 연회색 */
  --c-bg-3:#fbfbfd;

  --c-blue:#0071e3;     /* 누를 수 있는 것 */
  --c-blue-h:#0077ed;
  --c-link:#0066cc;

  --c-danger:#b3261e;  --c-danger-bg:#fdf2f1;
  --c-warn:#8a5a00;    --c-warn-bg:#fdf7ec;
  --c-ok:#1c7a4a;      --c-ok-bg:#f0f8f3;

  /* 본문에서 var(--c-text) 로 쓰는 곳이 있어 별칭을 둡니다 */
  --c-text:var(--c-ink);

  /* 글자 크기 — 애플 본문 기준 17px */
  --t-xs:12px;
  --t-sm:14px;
  --t-base:17px;
  --t-lead:clamp(18px, 2.1vw, 21px);
  --t-h3:clamp(19px, 2.3vw, 21px);
  --t-h2:clamp(23px, 3.6vw, 32px);
  --t-h1:clamp(30px, 5.6vw, 48px);
  --t-hero:clamp(34px, 7.4vw, 60px);

  /* 간격 — 4의 배수 */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px;

  /* 모서리 */
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:980px;

  /* 폭 */
  --w-wrap:1024px;   /* 애플 본문 폭과 비슷하게 */
  --w-read:40em;     /* 읽기 좋은 한 줄 길이 */
  --h-head:52px;     /* 고정 헤더 높이 */
}

/* 어두운 화면 대응 — 애플 다크 모드 팔레트 */
@media (prefers-color-scheme:dark){
  :root{
    --c-ink:#f5f5f7;
    --c-ink-2:#a1a1a6;
    --c-ink-3:#86868b;
    --c-line:#3a3a3c;
    --c-line-2:#2c2c2e;
    --c-bg:#000000;
    --c-bg-2:#1c1c1e;
    --c-bg-3:#161618;

    --c-blue:#0a84ff;  --c-blue-h:#409cff;  --c-link:#4ea1ff;

    --c-danger:#ff8f88;  --c-danger-bg:#2a1614;
    --c-warn:#ffbf47;    --c-warn-bg:#2a2013;
    --c-ok:#5fd398;      --c-ok-bg:#12241b;
  }
  .site-header{ background:rgba(22,22,24,.72); }
  /* 어두운 배경에서 사진이 너무 밝게 튑니다 */
  .page-hero img,.news-item .thumb img,.card .card-img img{ filter:brightness(.9); }
}

/* ------------------------------------------------------------
   2. 리셋 & 바탕
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-head) + 16px);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

body{
  margin:0;
  font-family:var(--f-sans);
  font-size:var(--t-base);
  line-height:1.7;
  letter-spacing:-.011em;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  word-break:keep-all;            /* 한글 단어 중간 줄바꿈 방지 */
  overflow-wrap:break-word;
  /* 하단 고정 상담 버튼에 본문이 가리지 않게 */
  padding-bottom:calc(58px + env(safe-area-inset-bottom));
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-link); text-decoration:none; }
b,strong{ font-weight:600; }
small{ font-size:var(--t-sm); }
code{ font-family:var(--f-mono); font-size:.92em;
      background:var(--c-bg-2); padding:2px 6px; border-radius:6px; }

::selection{ background:rgba(0,113,227,.18); }

/* 키보드로 이동할 때만 초점 테두리를 보여줍니다 */
:focus{ outline:none; }
:focus-visible{
  outline:3px solid var(--c-blue);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  max-width:var(--w-wrap);
  margin-inline:auto;
  padding-inline:22px;
}
@media (min-width:768px){ .wrap{ padding-inline:32px; } }

section{ padding-block:var(--s-8); }
@media (min-width:768px){ section{ padding-block:var(--s-9); } }

.muted{ color:var(--c-ink-2); }
.lead{
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--c-ink-2);
  letter-spacing:-.014em;
  max-width:var(--w-read);
  text-wrap:pretty;
}

/* ------------------------------------------------------------
   3. 아이콘 — 이모지 대신 쓰는 선 아이콘
   ------------------------------------------------------------
   SVG 를 mask 로 넣어 두면 색을 CSS 로 바꿀 수 있습니다.
   모양은 아래 .ico-* 에서 한 번씩만 정의합니다. (하나로 묶기)
   ------------------------------------------------------------ */
.ico{
  display:inline-block;
  width:1em; height:1em;
  flex:none;
  vertical-align:-.13em;
  background-color:currentColor;
  -webkit-mask:var(--svg) center/contain no-repeat;
          mask:var(--svg) center/contain no-repeat;
}
.ico-lg{ width:1.5em; height:1.5em; vertical-align:-.32em; }

/* 차량 */
.ico-car{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v2.5M20 16v2.5'/%3E%3Crect x='2.5' y='9.5' width='19' height='6.5' rx='2'/%3E%3Cpath d='M5 9.5 6.6 5.6A2 2 0 0 1 8.45 4.4h7.1a2 2 0 0 1 1.85 1.2L19 9.5'/%3E%3Ccircle cx='6.7' cy='12.8' r='1'/%3E%3Ccircle cx='17.3' cy='12.8' r='1'/%3E%3C/svg%3E");}
/* 골프 */
.ico-golf{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 20.5V3.5l8.5 3.2L9 9.9'/%3E%3Cpath d='M6 20.5h6'/%3E%3C/svg%3E");}
/* 통역 (말풍선 두 개) */
.ico-talk{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 15.5H6l-2.5 2.2v-2.4A2.6 2.6 0 0 1 2 13V6.6A2.6 2.6 0 0 1 4.6 4h8.3a2.6 2.6 0 0 1 2.6 2.6v1.9'/%3E%3Cpath d='M11.1 10.5h8.3A2.6 2.6 0 0 1 22 13.1v4.3a2.6 2.6 0 0 1-2.1 2.5v2.1L17.4 20h-6.3a2.6 2.6 0 0 1-2.6-2.6v-4.3a2.6 2.6 0 0 1 2.6-2.6Z'/%3E%3C/svg%3E");}
/* 스파 (잎) */
.ico-spa{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c0-5.5 2-9.5 7-12'/%3E%3Cpath d='M19.5 4.2c.9 6.5-2.1 10.6-6.6 10.9-2.8.2-4.7-1.4-4.9-3.7-.2-2.4 1.6-4.2 4.6-4.9 2.6-.6 5-1 6.9-2.3Z'/%3E%3Cpath d='M8.4 15.4C6 14.6 4.4 12.6 4.2 10'/%3E%3C/svg%3E");}
/* 병원 */
.ico-medical{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='6.2' width='17.6' height='14' rx='2.6'/%3E%3Cpath d='M8.5 6.2V4.6a1.4 1.4 0 0 1 1.4-1.4h4.2a1.4 1.4 0 0 1 1.4 1.4v1.6'/%3E%3Cpath d='M12 10.4v5.6M9.2 13.2h5.6'/%3E%3C/svg%3E");}
/* 환전 */
.ico-money{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.4 8.4h7.2M8.4 11.4h7.2'/%3E%3Cpath d='M9.2 8.4 12 15.6l2.8-7.2'/%3E%3C/svg%3E");}
/* 스쿠터 */
.ico-scooter{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17.5' r='3'/%3E%3Ccircle cx='19' cy='17.5' r='3'/%3E%3Cpath d='M8 17.5h8'/%3E%3Cpath d='M19 17.5V11a4 4 0 0 0-4-4h-1.2'/%3E%3Cpath d='m6.6 14.5 3.1-7.2h2.6'/%3E%3C/svg%3E");}
/* 일정 */
.ico-cal{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='2.6'/%3E%3Cpath d='M3.2 9.6h17.6M8 3.2v3.4M16 3.2v3.4'/%3E%3C/svg%3E");}
/* 관공서 */
.ico-gov{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 9.6 12 4.4l8.6 5.2'/%3E%3Cpath d='M5.6 9.6v8.8M10 9.6v8.8M14 9.6v8.8M18.4 9.6v8.8'/%3E%3Cpath d='M3 19.6h18'/%3E%3C/svg%3E");}
/* 부동산·업무 */
.ico-work{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='7.4' width='18.4' height='12.4' rx='2.4'/%3E%3Cpath d='M8.6 7.4V5.8a1.8 1.8 0 0 1 1.8-1.8h3.2a1.8 1.8 0 0 1 1.8 1.8v1.6'/%3E%3Cpath d='M2.8 12.6h18.4'/%3E%3C/svg%3E");}
/* 가족 */
.ico-family{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.4' cy='7' r='2.6'/%3E%3Ccircle cx='16.6' cy='7' r='2.6'/%3E%3Cpath d='M2.8 19.4v-1.6a4.6 4.6 0 0 1 4.6-4.6 4.6 4.6 0 0 1 4.6 4.6v1.6'/%3E%3Cpath d='M13.4 13.6a4.6 4.6 0 0 1 7.8 3.3v2.5'/%3E%3C/svg%3E");}
/* 소식 */
.ico-news{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.6 5H5.2A2.2 2.2 0 0 0 3 7.2v9.6A2.2 2.2 0 0 0 5.2 19h13.6a2.2 2.2 0 0 0 2.2-2.2V8.6a1.8 1.8 0 0 0-1.8-1.8h-1.6Z'/%3E%3Cpath d='M6.4 8.8h7.6M6.4 12h7.6M6.4 15.2h4.8'/%3E%3C/svg%3E");}
/* 경고 */
.ico-warn{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 21.2 19.4H2.8L12 3.6Z'/%3E%3Cpath d='M12 9.6v4.2M12 16.8h.01'/%3E%3C/svg%3E");}
/* 확인 */
.ico-check{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.6 12.6 4.8 4.8 10-10.8'/%3E%3C/svg%3E");}
/* 금지 */
.ico-x{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");}
/* 정보 */
.ico-info{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.2M12 7.8h.01'/%3E%3C/svg%3E");}
/* 말풍선 (상담) */
.ico-chat{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6c5 0 9 3.2 9 7.2s-4 7.2-9 7.2c-.9 0-1.8-.1-2.6-.3l-4.3 2 1.2-3.3C4.3 15.1 3 13.1 3 10.8c0-4 4-7.2 9-7.2Z'/%3E%3C/svg%3E");}

/* ------------------------------------------------------------
   4. 헤더 — 애플의 반투명 고정 바
   ------------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--h-head);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
          backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--c-line-2);
}
.site-header .inner{
  max-width:var(--w-wrap);
  margin-inline:auto;
  padding-inline:22px;
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media (min-width:768px){ .site-header .inner{ padding-inline:32px; } }

.logo{
  font-size:19px; font-weight:600; letter-spacing:-.024em;
  color:var(--c-ink); white-space:nowrap;
}
.logo span{ color:var(--c-ink-2); font-weight:400; }

/* 햄버거 버튼 — 누르면 X 로 바뀝니다 */
.nav-toggle{
  width:40px; height:40px; margin-right:-8px;
  display:grid; place-content:center; gap:5px;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{
  display:block; width:17px; height:1.5px; border-radius:2px;
  background:var(--c-ink);
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* 모바일 메뉴 — 헤더 아래 전체를 덮습니다 (화면 밖으로 나가지 않게 fixed) */
.site-nav{ display:none; }
.site-nav.open{
  display:block;
  /* 헤더가 기준 상자이므로 top:100% 가 곧 '헤더 바로 아래'입니다 */
  position:absolute; top:100%; left:0; right:0;
  height:calc(100vh - var(--h-head));
  height:calc(100dvh - var(--h-head));
  z-index:99;
  background:var(--c-bg);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 22px calc(40px + env(safe-area-inset-bottom));
  animation:navIn .26s cubic-bezier(.4,0,.2,1);
}
@keyframes navIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.site-nav ul{ list-style:none; margin:0; padding:0; }
.site-nav li + li{ border-top:1px solid var(--c-line-2); }
.site-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 2px;
  font-size:19px; font-weight:500; letter-spacing:-.02em;
  color:var(--c-ink);
}
.site-nav a::after{
  content:''; width:8px; height:8px; flex:none;
  border-right:1.6px solid var(--c-ink-3); border-top:1.6px solid var(--c-ink-3);
  transform:rotate(45deg); border-radius:1px;
}

/* 데스크톱 — 한 줄 메뉴 */
@media (min-width:960px){
  .nav-toggle{ display:none; }
  .site-nav{ display:block; }
  .site-nav.open{ position:static; height:auto; background:none; padding:0;
                  backdrop-filter:none; -webkit-backdrop-filter:none; animation:none; }
  .site-nav ul{ display:flex; align-items:center; gap:26px; }
  .site-nav li + li{ border:0; }
  .site-nav a{
    display:block; padding:0;
    font-size:13.5px; font-weight:400; letter-spacing:-.008em;
    color:var(--c-ink-2); opacity:.92;
    transition:color .18s, opacity .18s;
  }
  .site-nav a::after{ display:none; }
  .site-nav a:hover{ color:var(--c-ink); opacity:1; }
}

/* ------------------------------------------------------------
   5. 버튼
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 24px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font-family:inherit; font-size:var(--t-base); font-weight:500;
  letter-spacing:-.014em; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active{ transform:scale(.975); }
.btn-primary{ background:var(--c-blue); color:#fff; }
.btn-primary:hover{ background:var(--c-blue-h); }
.btn-ghost{ background:transparent; color:var(--c-blue); border-color:var(--c-blue); }
.btn-ghost:hover{ background:var(--c-blue); color:#fff; }

/* 텍스트 링크 + 꺾쇠 — 애플이 가장 즐겨 쓰는 형태 */
.more{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--t-base); font-weight:400; color:var(--c-link);
  letter-spacing:-.012em;
}
.more::after{
  content:''; width:6px; height:6px;
  border-right:1.6px solid currentColor; border-top:1.6px solid currentColor;
  transform:rotate(45deg); border-radius:1px;
  transition:transform .18s;
}
.more:hover{ text-decoration:underline; }
.more:hover::after{ transform:rotate(45deg) translate(2px,-2px); }

/* ------------------------------------------------------------
   6. 히어로 — 큰 글자 하나로 승부합니다
   ------------------------------------------------------------ */
.hero{
  background:var(--c-bg-2);
  padding-block:clamp(56px, 11vw, 110px);
  text-align:center;
}
.hero h1{
  margin:0 0 var(--s-4);
  font-size:var(--t-hero);
  font-weight:700;
  line-height:1.09;
  letter-spacing:-.028em;
  color:var(--c-ink);
  text-wrap:balance;
}
.hero p{
  margin:0 auto var(--s-6);
  max-width:34em;
  font-size:var(--t-lead);
  line-height:1.5;
  letter-spacing:-.016em;
  color:var(--c-ink-2);
  text-wrap:pretty;
}
/* 좁은 화면에서는 수동 줄바꿈을 무시하고 자연스럽게 흐르게 둡니다 */
@media (max-width:639px){ .hero p br{ display:none; } }
.hero .btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
@media (max-width:519px){
  .hero .btns{ flex-direction:column; }
  .hero .btns .btn{ width:100%; }
}

/* ------------------------------------------------------------
   7. 페이지 머리
   ------------------------------------------------------------ */
.page-head{
  background:var(--c-bg-2);
  padding-block:clamp(32px, 6vw, 60px);
}
.page-head h1{
  margin:0;
  font-size:var(--t-h1); font-weight:700;
  line-height:1.13; letter-spacing:-.026em;
  color:var(--c-ink); text-wrap:balance;
}
.crumb{
  margin:0 0 var(--s-3);
  font-size:var(--t-sm); color:var(--c-ink-3); letter-spacing:-.006em;
}
.crumb a{ color:var(--c-ink-3); }
.crumb a:hover{ color:var(--c-ink); }
.updated{
  margin:var(--s-3) 0 0;
  font-size:var(--t-sm); color:var(--c-ink-2); letter-spacing:-.008em;
}
.updated b{ color:var(--c-ink); font-weight:600; }

/* ------------------------------------------------------------
   8. 본문
   ------------------------------------------------------------ */
.article{
  padding-block:var(--s-7) var(--s-8);
  font-size:var(--t-base);
  line-height:1.78;
}
.article > *{ max-width:var(--w-read); }
.article > .scroll,
.article > table,
.article > .grid,
.article > .cols{ max-width:none; }

.article h2{
  margin:var(--s-8) 0 var(--s-4);
  font-size:var(--t-h2); font-weight:600;
  line-height:1.22; letter-spacing:-.024em;
  color:var(--c-ink); text-wrap:balance;
}
.article h2:first-child{ margin-top:0; }
.article h3{
  margin:var(--s-6) 0 var(--s-2);
  font-size:var(--t-h3); font-weight:600;
  line-height:1.34; letter-spacing:-.018em;
  color:var(--c-ink);
}
.article p{ margin:0 0 var(--s-4); text-wrap:pretty; }
.article ul,.article ol{ margin:0 0 var(--s-4); padding-left:1.25em; }
.article li{ margin-bottom:var(--s-2); }
.article li::marker{ color:var(--c-ink-3); }
.article hr{
  border:0; border-top:1px solid var(--c-line-2);
  margin:var(--s-7) 0;
}
.article blockquote{
  margin:var(--s-5) 0; padding:2px 0 2px var(--s-4);
  border-left:2px solid var(--c-line);
  color:var(--c-ink-2);
}

/* 본문 문단 안 링크에만 밑줄 — 목록 카드·버튼에는 넣지 않습니다 */
.article > p a,
.article > ul:not(.news-list) li a,
.article > ol li a,
.article .alert a,
.article .faq .a a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.16em;
  text-decoration-color:color-mix(in srgb, currentColor 34%, transparent);
}
.article > p a:hover,
.article > ul:not(.news-list) li a:hover,
.article > ol li a:hover,
.article .alert a:hover,
.article .faq .a a:hover{ text-decoration-color:currentColor; }

.news-list a,.toc a,.card a,.cat,.btn,.more,.crumb a,.news-nav a{ text-decoration:none; }

/* ------------------------------------------------------------
   9. 표
   ------------------------------------------------------------ */
.scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 0 var(--s-5);
  border-radius:var(--r);
}
table{
  width:100%; border-collapse:collapse;
  font-size:15px; line-height:1.6;
  font-variant-numeric:tabular-nums;   /* 숫자 자릿수 정렬 */
}
caption{
  caption-side:top; text-align:left;
  padding-bottom:var(--s-2);
  font-size:var(--t-sm); font-weight:500; color:var(--c-ink-2);
}
th,td{
  padding:13px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--c-line-2);
}
thead th{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.02em; color:var(--c-ink-2);
  border-bottom:1px solid var(--c-line);
  white-space:nowrap;
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background-color .15s; }
tbody tr:hover{ background:var(--c-bg-2); }

/* ------------------------------------------------------------
   10. 알림 상자
   ------------------------------------------------------------ */
.alert{
  position:relative;
  background:var(--c-bg-2);
  border-radius:var(--r);
  padding:20px 22px 20px 52px;
  margin:var(--s-5) 0;
  font-size:15.5px; line-height:1.72;
}
.alert::before{
  content:''; position:absolute; left:20px; top:21px;
  width:20px; height:20px;
  background-color:var(--c-ink-2);
  -webkit-mask:var(--svg, none) center/contain no-repeat;
          mask:var(--svg, none) center/contain no-repeat;
  --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.2M12 7.8h.01'/%3E%3C/svg%3E");
}
.alert strong{
  display:block; margin-bottom:var(--s-2);
  font-size:16px; font-weight:600; letter-spacing:-.018em; color:var(--c-ink);
}
.alert p{ margin-bottom:var(--s-3); }
.alert p:last-child{ margin-bottom:0; }

.alert.danger{ background:var(--c-danger-bg); }
.alert.danger::before{
  background-color:var(--c-danger);
  --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 21.2 19.4H2.8L12 3.6Z'/%3E%3Cpath d='M12 9.6v4.2M12 16.8h.01'/%3E%3C/svg%3E");
}
.alert.warn{ background:var(--c-warn-bg); }
.alert.warn::before{ background-color:var(--c-warn); }
.alert.ok{ background:var(--c-ok-bg); }
.alert.ok::before{
  background-color:var(--c-ok);
  --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.6 12.6 4.8 4.8 10-10.8'/%3E%3C/svg%3E");
}
.article .alert{ max-width:var(--w-read); }

/* 상태 배지 */
.badge{
  display:inline-block; padding:3px 10px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500; letter-spacing:-.004em;
  line-height:1.6; white-space:nowrap;
}
.badge.ok    { background:var(--c-ok-bg);     color:var(--c-ok); }
.badge.warn  { background:var(--c-warn-bg);   color:var(--c-warn); }
.badge.danger{ background:var(--c-danger-bg); color:var(--c-danger); }

/* ------------------------------------------------------------
   11. 자주 묻는 질문 / 목차 — <details> 기반
   ------------------------------------------------------------ */
.faq{
  margin:var(--s-5) 0;
  border-top:1px solid var(--c-line-2);
}
.faq details{ border-bottom:1px solid var(--c-line-2); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:18px 34px 18px 0; position:relative;
  font-size:var(--t-base); font-weight:500;
  letter-spacing:-.016em; color:var(--c-ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:6px; top:26px;
  width:8px; height:8px;
  border-right:1.6px solid var(--c-ink-3); border-bottom:1.6px solid var(--c-ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.faq .a{
  padding:0 0 20px;
  color:var(--c-ink-2); font-size:15.5px; line-height:1.76;
}

.toc{
  margin:var(--s-5) 0 var(--s-7);
  background:var(--c-bg-2);
  border-radius:var(--r-lg);
  padding:6px 22px;
}
.toc summary{
  list-style:none; cursor:pointer;
  padding:14px 0; position:relative;
  font-size:var(--t-sm); font-weight:600;
  letter-spacing:.01em; color:var(--c-ink-2);
}
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{
  content:''; position:absolute; right:2px; top:20px;
  width:7px; height:7px;
  border-right:1.6px solid var(--c-ink-3); border-bottom:1.6px solid var(--c-ink-3);
  transform:rotate(45deg); transition:transform .24s;
}
.toc[open] summary::after{ transform:rotate(-135deg); }
.toc ol{
  margin:0; padding:0 0 14px 1.4em;
  font-size:15.5px; line-height:1.5;
}
.toc li{ margin-bottom:9px; }
.toc li::marker{ color:var(--c-ink-3); font-size:13px; }
.toc a{ color:var(--c-ink); }
.toc a:hover{ color:var(--c-link); }

/* ------------------------------------------------------------
   12. 카드 · 격자
   ------------------------------------------------------------ */
.grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.cols{ display:grid; gap:20px; }
@media (min-width:768px){
  .cols{ grid-template-columns:repeat(3, 1fr); }
  .cols.two{ grid-template-columns:repeat(2, 1fr); }
}

.card{
  background:var(--c-bg-2);
  border-radius:var(--r-lg);
  padding:28px 26px;
  transition:transform .24s cubic-bezier(.4,0,.2,1), background-color .24s;
}
.card:hover{ transform:translateY(-3px); }
.card h3{
  display:flex; align-items:center; gap:10px;
  margin:0 0 var(--s-2);
  font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.019em; color:var(--c-ink);
}
.card h3 .ico{ color:var(--c-ink-2); }
.card p{
  margin:0 0 var(--s-4);
  font-size:15.5px; line-height:1.7; color:var(--c-ink-2);
  text-wrap:pretty;
}
.card p:last-child{ margin-bottom:0; }
/* 흰 바탕 카드가 필요한 곳 (연회색 섹션 위) */
.card.alt{ background:var(--c-bg); }

/* ------------------------------------------------------------
   13. 소식 목록
   ------------------------------------------------------------ */
.news-home{ background:var(--c-bg-2); }
.news-list{ list-style:none; margin:0; padding:0; }
.news-list li{
  border-top:1px solid var(--c-line-2);
}
.news-list li:last-child{ border-bottom:1px solid var(--c-line-2); }
.news-list a{ display:block; padding:24px 0; transition:opacity .18s; }
.news-list a:hover{ opacity:.62; }
.news-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:8px;
  font-size:var(--t-sm); color:var(--c-ink-3); letter-spacing:-.004em;
}
.news-title{
  margin:0 0 6px;
  font-size:19px; font-weight:600;
  line-height:1.4; letter-spacing:-.02em; color:var(--c-ink);
  text-wrap:pretty;
}
.news-excerpt{
  margin:0; font-size:15.5px; line-height:1.68; color:var(--c-ink-2);
  text-wrap:pretty;
}
.news-item{ margin-bottom:var(--s-5); }

/* 분류 칩 */
.cat{
  display:inline-block; padding:3px 11px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500; line-height:1.6;
  background:var(--c-bg-2); color:var(--c-ink-2);
  transition:background-color .18s, color .18s;
}
a.cat:hover{ background:var(--c-ink); color:var(--c-bg); }
.cat-rule   { background:var(--c-danger-bg); color:var(--c-danger); }
.cat-weather{ background:var(--c-warn-bg);   color:var(--c-warn); }
.cat-travel { background:var(--c-ok-bg);     color:var(--c-ok); }
.cat-notice { background:rgba(0,113,227,.1); color:var(--c-link); }
.news-list li .cat{ flex:none; }

/* 소식 본문·이전다음 */
.news-body{ font-size:var(--t-base); line-height:1.78; }
.news-nav{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid var(--c-line-2);
  font-size:15px;
}
.news-nav a{ color:var(--c-link); }
.news-nav a:hover{ text-decoration:underline; }

/* ------------------------------------------------------------
   14. 상담 유도 상자
   ------------------------------------------------------------ */
.cta-box{
  background:var(--c-bg-2);
  border-radius:var(--r-xl);
  padding:clamp(32px, 6vw, 52px) clamp(24px, 5vw, 44px);
  margin:var(--s-7) 0;
  text-align:center;
}
.cta-box h2{
  margin:0 0 var(--s-3);
  font-size:var(--t-h2); font-weight:600;
  line-height:1.2; letter-spacing:-.024em; color:var(--c-ink);
  text-wrap:balance;
}
.cta-box p{
  margin:0 auto var(--s-5);
  max-width:32em;
  font-size:16.5px; line-height:1.66; color:var(--c-ink-2);
  text-wrap:pretty;
}
.article .cta-box{ max-width:none; }

/* 하단 고정 상담 버튼 */
.cta-fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
          backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--c-line-2);
}
@media (prefers-color-scheme:dark){
  .cta-fixed{ background:rgba(22,22,24,.8); }
}
.cta-fixed .kakao{
  display:flex; align-items:center; justify-content:center; gap:8px;
  max-width:520px; margin-inline:auto;
  min-height:46px; border-radius:var(--r-pill);
  background:#fee500; color:#191600;
  font-size:16px; font-weight:600; letter-spacing:-.018em;
  transition:filter .18s, transform .12s;
}
.cta-fixed .kakao:hover{ filter:brightness(.96); }
.cta-fixed .kakao:active{ transform:scale(.985); }
@media (min-width:960px){
  .cta-fixed{ left:auto; right:24px; bottom:24px; width:auto;
              padding:0; background:none; border:0;
              backdrop-filter:none; -webkit-backdrop-filter:none; }
  .cta-fixed .kakao{
    padding:0 22px;
    box-shadow:0 6px 24px -6px rgba(0,0,0,.28);
  }
  body{ padding-bottom:0; }
}

/* ------------------------------------------------------------
   15. 푸터
   ------------------------------------------------------------ */
.site-footer{
  background:var(--c-bg-2);
  padding-block:var(--s-7);
  font-size:var(--t-sm);
  color:var(--c-ink-2);
  line-height:1.8;
}
.site-footer .cols{ gap:28px; }
.site-footer h2{
  margin:0 0 var(--s-2);
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.02em; color:var(--c-ink-3);
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer a{ color:var(--c-ink-2); }
.site-footer a:hover{ color:var(--c-ink); text-decoration:underline; }
.site-footer .copy{
  margin-top:var(--s-6); padding-top:var(--s-4);
  border-top:1px solid var(--c-line);
  font-size:var(--t-xs); color:var(--c-ink-3); line-height:1.8;
}

/* ------------------------------------------------------------
   16. 인쇄 — 응급 연락처를 종이로 뽑는 분을 위해
   ------------------------------------------------------------ */
@media print{
  .site-header,.cta-fixed,.site-footer,.toc,.nav-toggle,.cta-box{ display:none!important; }
  body{ padding:0; font-size:11pt; color:#000; background:#fff; }
  .page-head{ background:none; padding-block:0 12pt; }
  .article{ padding:0; }
  .article > *{ max-width:none; }
  a{ color:#000; text-decoration:underline; }
  .article a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:#555; }
  table,.alert,.faq details{ break-inside:avoid; }
}