:root{
    --bg:#ffffff;
    --bg-soft:#fafafa;
    --bg-blush:#fdf0f1;
    --text:#1a1a1a;
    --text-mid:#555;
    --text-light:#888;
    --text-faint:#aaa;
    --border:#e8e8e8;
    --border-light:#f0f0f0;
    --accent:#e63946;
    --accent-dark:#d32f3f;
    --accent-soft:#fff5f5;
    --navy:#0f3460;
    --navy-soft:#eef3fb;
    --font-display:'Syne', sans-serif;
    --font-body:'Pretendard', sans-serif;
    --font-data:'Archivo', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-body);
    color:var(--text);background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none}

  /* ============ HEADER (홈 동일 사양) ============ */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:transparent;
    transition:background 0.4s,border-color 0.4s;
    border-bottom:1px solid transparent;
  }
  .site-header.is-scrolled{
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(16px);
    border-bottom-color:var(--border-light);
  }
  .nav-w{
    position:relative;
    height:68px;
    padding:0 52px;
    display:flex;align-items:center;justify-content:center;
  }

  /* 로고 - 홈 동일: 좌측 52px 절대 고정, height 48px */
  .brand-logo{
    position:absolute;
    left:52px;top:50%;transform:translateY(-50%);
    cursor:pointer;
    display:flex;align-items:center;
    flex-shrink:0;
  }
  .brand-logo svg{
    height:48px;width:auto;display:block;overflow:visible;
  }
  /* 로고 색상 — 스크롤 전: 흰색, 후: 블랙. 레드 포인트는 유지 */
  .brand-logo svg .st0{fill:#ffffff;fill-rule:evenodd;transition:fill 0.4s}
  .brand-logo svg .st1{fill:#ce1e1b;fill-rule:evenodd;transition:fill 0.4s}
  .site-header.is-scrolled .brand-logo svg .st0{fill:#111111}

  /* 메뉴 - 가운데 정렬 */
  .nav-center{
    display:flex;align-items:center;gap:32px;
  }
  .nav-center a{
    font-size:15px;font-weight:500;
    color:#ffffff;
    letter-spacing:-0.01em;
    transition:color 0.3s;
  }
  .site-header.is-scrolled .nav-center a{color:var(--text)}
  .nav-center a:hover{color:var(--accent)}
  .nav-center a.is-current{color:var(--accent)}
  .site-header.is-scrolled .nav-center a.is-current{color:var(--accent)}

  /* 견적문의 - 우측 52px 절대 고정 */
  .nav-cta{
    position:absolute;
    right:52px;top:50%;transform:translateY(-50%);
    background:var(--accent);color:#fff !important;
    padding:9px 22px;border-radius:2px;
    font-size:14px;font-weight:500;letter-spacing:0;
    display:inline-flex;align-items:center;gap:8px;
    transition:background 0.2s;
  }
  .nav-cta:hover{background:var(--accent-dark);color:#fff !important}

  /* ============ SHARED ============ */
  .eyebrow{
    font-family:var(--font-display);
    font-size:12px;font-weight:600;
    letter-spacing:0.2em;text-transform:uppercase;
    color:var(--accent);
    display:inline-flex;align-items:center;gap:10px;
    margin-bottom:20px;
  }
  .eyebrow::before{
    content:"";width:24px;height:1px;background:var(--accent);
  }
  .eyebrow.is-center{justify-content:center}
  .eyebrow.is-center::before{display:none}
  .eyebrow.is-center::after{
    content:"";width:24px;height:1px;background:var(--accent);
    margin-left:10px;
  }
  .section-title{
    font-family:var(--font-body);
    font-size:clamp(28px,3vw,40px);
    font-weight:700;line-height:1.25;
    letter-spacing:-0.02em;
    color:var(--text);
    margin-bottom:18px;
  }
  .section-lead{
    font-size:16px;color:var(--text-mid);
    line-height:1.7;max-width:560px;
  }
  .container{max-width:1320px;margin:0 auto;padding:0 40px}

  /* ============ HERO - 풀폭 히로익 이미지 ============ */
  .hero{
    position:relative;
    height:92vh;
    min-height:640px;
    max-height:880px;
    background:#1a1a1a;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute;inset:0;
    background-image:url('../../../../uploads/2026/08/hero_bg.jpg');
    background-size:cover;
    background-position:right center;
    background-repeat:no-repeat;
  }
  /* 좌측만 부드럽게 어둡게 — 우측 유리 디테일 완전 보존 */
  .hero-bg::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,
      rgba(8,10,14,0.72) 0%,
      rgba(8,10,14,0.42) 28%,
      rgba(8,10,14,0.08) 48%,
      rgba(8,10,14,0) 60%);
  }
  /* 하단 살짝 그라데이션 (텍스트 영역 시각적 무게) */
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
      transparent 50%,
      rgba(8,10,14,0.28) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;
    height:100%;
    padding:0 52px 96px;
    display:flex;flex-direction:column;
    justify-content:flex-end;
  }
  .hero-content{
    max-width:640px;color:#fff;
  }
  /* 빨간 디바이더 - 헤드라인 위 시각 균형용 */
  .hero-divider{
    width:48px;height:2px;
    background:var(--accent);
    margin-bottom:36px;
    display:block;
  }
  .hero-headline{
    font-family:var(--font-body);
    font-size:clamp(36px,5vw,64px);
    font-weight:700;line-height:1.08;
    letter-spacing:-0.035em;
    color:#fff;
    margin-bottom:28px;
  }
  .hero-sub{
    font-size:17px;color:rgba(255,255,255,0.78);
    line-height:1.75;max-width:460px;
    font-weight:400;
  }
  /* 스크롤 인디케이터 - 가운데 하단 */
  .hero-scroll{
    position:absolute;left:50%;bottom:32px;
    transform:translateX(-50%);
    z-index:2;
    font-family:var(--font-display);
    font-size:10px;font-weight:500;
    letter-spacing:0.24em;text-transform:uppercase;
    color:rgba(255,255,255,0.55);
    display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .hero-scroll::after{
    content:"";width:1px;height:24px;
    background:rgba(255,255,255,0.35);
    animation:scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine{
    0%,100%{height:24px;opacity:0.4}
    50%{height:36px;opacity:0.9}
  }

  /* ============ GREETING ============ */
  .greeting{
    padding:120px 0;background:var(--bg-soft);
    border-bottom:1px solid var(--border-light);
  }
  .greeting-grid{
    display:grid;grid-template-columns:5fr 7fr;
    gap:80px;align-items:center;
  }
  .greeting-visual{
    aspect-ratio:1/1;
    border-radius:2px;
    position:relative;overflow:hidden;
    background:#1a1a1a;
  }
  .greeting-visual img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform 0.6s ease;
  }
  .greeting-visual:hover img{
    transform:scale(1.03);
  }
  /* 하단 살짝 어둡게 - 캡션 가독성 */
  .greeting-visual::after{
    content:"";position:absolute;
    left:0;right:0;bottom:0;height:40%;
    background:linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,0.55) 100%);
    pointer-events:none;
  }
  .greeting-visual-caption{
    position:absolute;
    left:24px;bottom:24px;
    z-index:2;color:#fff;
  }
  .caption-label{
    display:block;
    font-family:var(--font-display);
    font-size:10px;font-weight:600;
    letter-spacing:0.22em;text-transform:uppercase;
    color:rgba(255,255,255,0.7);
    margin-bottom:6px;
  }
  .caption-text{
    display:block;
    font-size:18px;font-weight:600;
    letter-spacing:-0.01em;
    color:#fff;line-height:1.3;
  }
  .greeting-body{
    font-size:16px;color:var(--text-mid);
    line-height:1.85;
    margin-bottom:32px;
  }
  .greeting-body p + p{margin-top:18px}
  .greeting-sign{
    font-size:14px;color:var(--text);
    border-top:1px solid var(--border);
    padding-top:20px;
  }
  .greeting-sign strong{
    font-family:var(--font-display);
    font-weight:600;font-size:16px;letter-spacing:0.04em;
  }

  /* ============ COMPANY INFO ============ */
  .company{padding:120px 0;background:var(--bg)}
  .company-wrap{max-width:880px;margin:0 auto;text-align:center}
  .company-header{margin-bottom:56px}
  .company-table{
    text-align:left;
    border-top:2px solid var(--text);
    margin-top:40px;
  }
  .company-row{
    display:grid;grid-template-columns:200px 1fr;
    border-bottom:1px solid var(--border);
    padding:22px 0;align-items:center;
  }
  .company-row dt{
    font-family:var(--font-display);
    font-size:12px;font-weight:600;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--text-light);
  }
  .company-row dd{
    font-size:15px;color:var(--text);line-height:1.6;
  }
  .company-row dd .badge{
    display:inline-block;
    font-family:var(--font-data);
    font-size:11px;font-weight:600;
    color:var(--accent);
    background:var(--accent-soft);
    padding:3px 10px;border-radius:2px;
    margin-left:8px;letter-spacing:0.05em;
  }

  /* ============ CORE STRENGTH ============ */
  .strength{
    padding:120px 0;background:var(--bg-soft);
    border-top:1px solid var(--border-light);
  }
  .strength-header{text-align:center;margin-bottom:64px}
  .strength-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  }
  .strength-card{
    background:var(--bg);
    border:1px solid var(--border);
    padding:48px 36px;
    transition:transform 0.22s, background 0.22s, box-shadow 0.22s, outline-color 0.22s;
    outline:1.5px solid transparent;
    outline-offset:-1.5px;
    position:relative;
    cursor:default;
  }
  /* 홈 .g4 카드 호버 패턴 동일 적용 - 연한 빨강 하이라이트 */
  .strength-card:hover{
    background:#fdf0f1;
    outline-color:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(230,57,70,0.10);
  }
  .strength-card:hover .strength-num{color:var(--accent-dark)}
  .strength-card:hover .strength-icon{color:var(--accent)}
  .strength-card:hover .strength-icon svg{stroke:var(--accent)}
  .strength-card:hover h3{color:var(--text)}
  .strength-num{
    font-family:var(--font-data);
    font-size:52px;font-weight:700;
    letter-spacing:-0.03em;line-height:1;
    color:var(--accent);
    margin-bottom:36px;
    transition:color 0.22s;
    display:block;
  }
  .strength-icon{
    width:56px;height:56px;
    margin-bottom:28px;color:var(--navy);
  }
  .strength-icon svg{width:100%;height:100%}
  .strength-card h3{
    font-size:22px;font-weight:700;
    color:var(--text);line-height:1.3;
    margin-bottom:16px;letter-spacing:-0.02em;
  }
  .strength-card p{
    font-size:15px;color:var(--text-mid);line-height:1.7;
  }

  /* ============ HISTORY ============ */
  .history{padding:120px 0;background:var(--bg)}
  .history-header{text-align:center;margin-bottom:72px}
  .history-wrap{max-width:880px;margin:0 auto;position:relative}
  .history-wrap::before{
    content:"";position:absolute;
    left:196px;top:0;bottom:0;width:1px;
    background:var(--border);
  }
  .history-item{
    display:grid;grid-template-columns:180px 32px 1fr;
    padding:24px 0;align-items:start;
    position:relative;
  }
  .history-year{
    font-family:var(--font-data);
    font-size:24px;font-weight:600;
    color:var(--text);letter-spacing:0.02em;
  }
  .history-dot{
    width:12px;height:12px;border-radius:50%;
    background:var(--bg);
    border:2px solid var(--accent);
    margin-top:10px;
    justify-self:center;
    position:relative;z-index:2;
  }
  .history-item.is-major .history-dot{background:var(--accent)}
  .history-content h4{
    font-size:17px;font-weight:600;
    color:var(--text);margin-bottom:6px;
    letter-spacing:-0.01em;
  }
  .history-content p{
    font-size:14px;color:var(--text-light);line-height:1.6;
  }
  .history-content ul{
    list-style:none;padding:0;
    margin:10px 0 0;
  }
  .history-content ul li{
    font-size:14px;
    color:var(--text-mid);
    line-height:1.75;
    padding-left:16px;
    position:relative;
  }
  .history-content ul li::before{
    content:"–";
    position:absolute;
    left:0;
    color:var(--accent);
    font-weight:700;
  }
  .placeholder-note{
    margin-top:36px;text-align:center;
    font-size:12px;color:var(--text-faint);font-style:italic;
  }

  /* ============ LOCATION ============ */
  .location{
    padding:120px 0;background:var(--bg-soft);
    border-top:1px solid var(--border-light);
  }
  .location-header{margin-bottom:48px}
  .location-grid{
    display:grid;grid-template-columns:7fr 5fr;
    gap:48px;align-items:stretch;
  }
  .location-map{
    aspect-ratio:16/10;
    background:#eef3fb;
    border:1px solid var(--border);
    position:relative;overflow:hidden;
  }
  .kakao-map-area{
    width:100%;height:100%;position:relative;
  }
  /* 카카오 SDK 로드되면 이 영역에 지도가 그려짐, 안 그려질 때 fallback */
  .map-fallback{
    position:absolute;inset:0;
    background-image:url('../../../../uploads/2026/08/map_fallback.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:block;
    overflow:hidden;
    cursor:pointer;
    transition:opacity 0.22s;
  }
  .map-fallback:hover{opacity:0.92}
  .map-fallback-badge{
    position:absolute;top:16px;left:16px;
    background:rgba(0,0,0,0.72);
    color:#fff;
    font-family:var(--font-display);
    font-size:10px;font-weight:600;
    letter-spacing:0.18em;
    padding:6px 12px;border-radius:2px;
    backdrop-filter:blur(8px);
    z-index:2;
  }
  .location-info{
    background:var(--bg);
    border:1px solid var(--border);
    padding:48px 40px;
  }
  .location-info h3{
    font-family:var(--font-display);
    font-size:14px;font-weight:600;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--text-light);margin-bottom:20px;
  }
  .location-info .company-name{
    font-size:20px;font-weight:700;
    color:var(--text);line-height:1.4;
    margin-bottom:32px;letter-spacing:-0.02em;
  }
  .location-contacts{border-top:1px solid var(--border);padding-top:24px}
  .location-contacts dl{
    display:grid;grid-template-columns:90px 1fr;gap:16px 20px;
  }
  .location-contacts dt{
    font-family:var(--font-display);
    font-size:11px;font-weight:600;
    letter-spacing:0.18em;color:var(--text-light);
    padding-top:4px;text-transform:uppercase;
  }
  .location-contacts dd{
    font-family:var(--font-data);
    font-size:15px;color:var(--text);
    line-height:1.55;
  }
  .location-contacts dd .addr-sub{
    display:inline-block;
    font-size:12px;color:var(--text-light);
    letter-spacing:0;margin-left:2px;
  }

  /* ============ CTA STRIP ============ */
  .cta-strip{
    padding:80px 0;background:var(--text);
    color:#fff;text-align:center;
  }
  .cta-strip h3{
    font-size:clamp(24px,2.6vw,32px);
    font-weight:700;line-height:1.3;
    letter-spacing:-0.02em;margin-bottom:28px;
  }
  .cta-strip .btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--accent);color:#fff;
    padding:18px 40px;border-radius:2px;
    font-size:15px;font-weight:600;letter-spacing:0.04em;
    transition:background 0.2s,transform 0.2s;
  }
  .cta-strip .btn:hover{background:var(--accent-dark);transform:translateY(-2px)}
  .cta-strip .btn svg{width:16px;height:16px}

  /* ============ FOOTER ============ */
  .site-footer{background:#0a0a0a;color:#aaa;padding:48px 0}
  .footer-inner{
    max-width:1320px;margin:0 auto;
    padding:0 40px;
    display:flex;justify-content:center;align-items:center;
    flex-wrap:wrap;gap:16px;
    text-align:center;
  }
  .footer-brand{
    font-family:var(--font-display);
    font-weight:700;font-size:16px;color:#fff;letter-spacing:0.02em;
  }
  .footer-info{font-size:13px;color:#888}

  /* ============ TOAST ============ */
  .db-toast{
    position:fixed;left:50%;bottom:48px;
    transform:translateX(-50%) translateY(20px);
    background:var(--text);color:#fff;
    padding:14px 28px;border-radius:2px;
    font-size:14px;font-weight:500;
    opacity:0;pointer-events:none;
    transition:opacity 0.3s,transform 0.3s;
    z-index:200;
  }
  .db-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ============ SIDE CTA (.db-qm) - 홈 동일 ============ */
  .db-qm{
    position:fixed;right:0;top:50%;transform:translateY(-50%);
    z-index:9000;display:flex;flex-direction:column;
    background:#e63946;
    border:none;
    border-radius:4px 0 0 4px;
    box-shadow:-4px 0 20px rgba(230,57,70,.35);
    overflow:hidden;
  }
  .db-qm a{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:6px;
    padding:16px 12px;text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:#fff;
    font-family:'Syne', sans-serif;
    font-size:.62rem;font-weight:700;letter-spacing:.07em;
    text-align:center;transition:all .22s;
    min-width:62px;line-height:1.4;
  }
  .db-qm a:last-child{border-bottom:none}
  .db-qm a svg{transition:all .22s;stroke:#fff}
  .db-qm a:hover{background:rgba(0,0,0,.18);color:#fff}
  .db-qm a:hover svg{stroke:#fff}
  /* 모바일에서는 살짝 축소 */
  @media (max-width:560px){
    .db-qm a{padding:12px 10px;min-width:54px;font-size:.55rem}
    .db-qm a svg{width:16px;height:16px}
  }


  /* ============ RESPONSIVE ============ */
  @media (max-width:980px){
    .nav-w{padding:0 24px;height:60px}
    .brand-logo{left:24px}
    .brand-logo svg{height:40px}
    .nav-cta{right:24px;padding:9px 18px;font-size:12px}
    .nav-center{display:none}
    .hero{height:80vh;min-height:520px}
    .hero-inner{padding:0 24px 64px}
    .hero-divider{width:36px;margin-bottom:24px}
    .hero-scroll{display:none}
    .container{padding:0 24px}
    .greeting,.company,.strength,.history,.location{padding:64px 0}
    .greeting-grid{grid-template-columns:1fr;gap:32px}
    .greeting-visual{aspect-ratio:4/3;max-width:480px;margin:0 auto}
    .company-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
    .strength-grid{grid-template-columns:1fr;gap:16px}
    .strength-card{padding:36px 28px}
    .history-wrap::before{left:92px}
    .history-item{grid-template-columns:80px 24px 1fr}
    .history-year{font-size:18px}
    .location-grid{grid-template-columns:1fr;gap:24px}
    .location-info{padding:32px 24px}
    /* 예솔 Leaflet 지도 때와 동일한 방어 조치 — aspect-ratio 계산 타이밍에
       기대지 않고 모바일에서는 고정 height로 명시(재현은 못 했지만 예방). */
    .location-map{aspect-ratio:auto;height:240px}
  }

  /* =============== 모바일(768px 이하) — 히어로 하단 여백/그라데이션 강화 + 헤더 통일 =============== */
  @media (max-width:768px){
    /* 이미 좌하단 정렬이므로 위치는 그대로 두고, 하단 CTA바(84px)와 겹치지 않게
       여백만 확보 + 가독성용 하단 그라데이션을 모바일에서 더 진하게 */
    .hero-inner{padding-bottom:calc(84px + 40px) !important}
    .hero-bg::after{
      background:linear-gradient(180deg,
        transparent 40%,
        rgba(8,10,14,0.75) 100%) !important;
    }

    /* 헤더 배경 통일 — 스크롤 여부와 무관하게 항상 어두운 배경 + 흰색 로고 */
    .site-header{
      background:rgba(10,10,10,.92) !important;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      border-bottom-color:transparent !important;
    }
    .brand-logo svg .st0{fill:#ffffff !important}
    .db-nav-toggle span{background:#ffffff !important}
  }