:root {
      --ink: #1a1712;
      --muted: #7a7367;
      --line: #e2dccf;
      --paper: #f2ede4;
      --white: #fff;
      --steel: #857d6f;
      --blue: #1c1913;
      --green: #3a352c;
      --charcoal: #24211c;
      --orange: #1c1913;
      --shadow: 0 22px 55px rgba(20, 20, 20, .14);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
      word-break: keep-all;
    }
    a { color: inherit; text-decoration: none; }
    img, video { max-width: 100%; display: block; }
    .wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
    .eyebrow { margin: 0 0 14px; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
    .section-title { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.12; letter-spacing: 0; }
    .lead { color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.75; }
    .btn {
      position: relative; overflow: hidden;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 20px; border-radius: 6px; border: 1px solid transparent;
      font-weight: 900; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .btn::after {
      content: ""; position: absolute; inset: -40% auto -40% -70%; width: 52%; transform: skewX(-22deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
      opacity: 0; pointer-events: none;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(28,25,19,.28); }
    .btn:hover::after { animation: buttonFlash .78s ease; }
    .btn.primary { color: #fff; background: var(--blue); }
    .btn.dark { color: #fff; background: var(--ink); }
    .btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }

    header {
      position: fixed; inset: 0 0 auto; z-index: 30;
      background: rgba(247, 245, 240, .9); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(21,21,21,.1);
    }
    .nav { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
    .brand { display: flex; align-items: center; min-width: 132px; }
    .brand-logo { width: 132px; height: 56px; object-fit: contain; object-position: left center; }
    nav { display: flex; gap: 18px; color: #3d3d3d; font-size: 14px; font-weight: 800; }
    .nav-call { white-space: nowrap; margin-left: 34px; }

    .hero { position: relative; min-height: 92vh; overflow: hidden; color: #fff; background: #111; }
    .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
    .hero::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.5) 48%, rgba(0,0,0,.18)), linear-gradient(0deg, rgba(0,0,0,.65), transparent 55%);
    }
    .hero::after {
      content: ""; position: absolute; top: -28%; bottom: -28%; left: -42%; width: 34%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), rgba(182,172,156,.22), transparent);
      filter: blur(10px); transform: rotate(16deg); animation: heroFlash 5.8s ease-in-out infinite;
    }
    .hero-grid { position: relative; z-index: 1; min-height: 92vh; padding: 132px 0 54px; display: grid; grid-template-columns: 1fr; align-items: end; gap: 46px; }
    h1 { position: relative; display: inline-block; margin: 0; font-size: clamp(44px, 7vw, 86px); line-height: 1.02; letter-spacing: 0; text-shadow: 0 0 24px rgba(154,144,128,.18); }
    h1::after {
      content: ""; position: absolute; inset: 0; transform: translateX(-115%) skewX(-18deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
      mix-blend-mode: screen; animation: titleFlash 4.8s ease-in-out infinite; pointer-events: none;
    }
    .hero-copy { max-width: 720px; margin-top: 24px; color: rgba(255,255,255,.82); font-size: clamp(17px, 2vw, 22px); line-height: 1.72; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    .flash-sparks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
    .flash-sparks span { position: absolute; width: 5px; height: 5px; border-radius: 999px; background: #efe9df; box-shadow: 0 0 18px #fff, 0 0 28px #b6ac9c; opacity: 0; animation: sparkPop 3.2s ease-in-out infinite; }
    .flash-sparks span:nth-child(1) { left: 9%; top: 28%; animation-delay: .2s; }
    .flash-sparks span:nth-child(2) { left: 46%; top: 18%; animation-delay: 1.1s; }
    .flash-sparks span:nth-child(3) { left: 72%; top: 42%; animation-delay: 1.9s; }
    .flash-sparks span:nth-child(4) { left: 32%; top: 64%; animation-delay: 2.5s; }
    .flash-sparks span:nth-child(5) { left: 86%; top: 22%; animation-delay: 3s; }
    .hero-panel { align-self: end; width: 100%; max-width: 180px; background: rgba(255,255,255,.94); color: var(--ink); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
    .hero .hero-panel { position: fixed; top: 96px; right: 0; z-index: 34; max-height: calc(100vh - 116px); overflow: auto; transform: translateX(calc(100% - 28px)); transition: transform .22s ease, box-shadow .22s ease; border-radius: 8px 0 0 8px; }
    .hero .hero-panel::before { content: "문의"; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 12px; font-weight: 1000; writing-mode: vertical-rl; z-index: 2; }
    .hero .hero-panel:hover, .hero .hero-panel:focus-within { transform: translateX(0); box-shadow: 0 24px 70px rgba(0,0,0,.26); }
    .hero .hero-panel .panel-head, .hero .hero-panel .panel-body { margin-left: 28px; }

    .panel-head { padding: 12px 12px 9px; border-bottom: 1px solid var(--line); }
    .panel-head .eyebrow { margin-bottom: 6px; font-size: 9px; }
    .panel-head h2 { margin: 0; font-size: 15px; }
    .panel-body { padding: 12px; display: grid; gap: 7px; }
    .input, textarea { width: 100%; border: 1px solid #ddd6ca; border-radius: 6px; padding: 14px 14px; background: #fff; color: var(--ink); font: inherit; outline: none; }
    .hero-panel .input, .hero-panel textarea { padding: 8px 9px; font-size: 12px; }
    .hero-panel textarea { min-height: 64px; }
    .hero-panel .btn { min-height: 34px; padding: 0 10px; font-size: 12px; }
    textarea { min-height: 108px; resize: vertical; }
    .form-note { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }

    .stats { position: relative; z-index: 2; margin-top: -36px; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
    .stat { padding: 26px 24px; border-right: 1px solid var(--line); }
    .stat:last-child { border-right: 0; }
    .stat b { display: block; font-size: 24px; }
    .stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }

    section { padding: 92px 0; }
    .about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
    .about-list { display: grid; gap: 14px; margin-top: 28px; }
    .about-item { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; color: #4f4f4f; line-height: 1.7; }
    .check { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--green); font-weight: 900; }

    .services { background: var(--charcoal); color: #fff; }
    .services .eyebrow { color: #b6ac9c; }
    .service-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); }
    .service { min-height: 245px; padding: 30px; background: var(--charcoal); display: flex; flex-direction: column; justify-content: space-between; }
    .service h3 { margin: 0; font-size: 25px; }
    .service p { margin: 18px 0 0; color: rgba(255,255,255,.68); line-height: 1.7; }
    .service small { color: #cfc6b6; font-weight: 900; letter-spacing: .06em; }

    .portfolio-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
    .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .work { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
    .work::after { content: ""; position: absolute; inset: 0; transform: translateX(-125%) skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); pointer-events: none; }
    .work:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .work:hover::after { animation: cardFlash .9s ease; }
    .work-visual { height: 230px; position: relative; overflow: hidden; background: #ddd; }
    .work-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(28,25,19,.85), rgba(58,52,42,.75)), var(--pattern); background-size: cover; transition: transform .35s ease, filter .35s ease; }
    .work:hover .work-visual::before { transform: scale(1.05); filter: brightness(1.12); }
    .work:nth-child(2) .work-visual::before { background: linear-gradient(135deg, rgba(34,37,39,.82), rgba(223,107,34,.72)), var(--pattern); }
    .work:nth-child(3) .work-visual::before { background: linear-gradient(135deg, rgba(15,83,80,.82), rgba(92,107,111,.65)), var(--pattern); }
    .work:nth-child(4) .work-visual::before { background: linear-gradient(135deg, rgba(87,76,61,.72), rgba(28,25,19,.7)), var(--pattern); }
    .work:nth-child(5) .work-visual::before { background: linear-gradient(135deg, rgba(21,21,21,.82), rgba(58,52,42,.72)), var(--pattern); }
    .work:nth-child(6) .work-visual::before { background: linear-gradient(135deg, rgba(92,85,74,.82), rgba(223,107,34,.68)), var(--pattern); }
    .work-visual::after { content: attr(data-label); position: absolute; left: 18px; bottom: 18px; color: #fff; font-size: 28px; font-weight: 1000; }
    .work-visual.has-image { background-size: cover; background-position: center; }
    .work-visual.has-image::before { background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.58)); }
    .work-body { padding: 20px; }
    .work-body b { display: block; font-size: 18px; }
    .work-body span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }

    .equipment { background: #fff; }
    .equipment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .machine { min-height: 360px; border-radius: 8px; overflow: hidden; position: relative; background: #a9b0b2; box-shadow: var(--shadow); }
    .machine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(21,21,21,.2), rgba(28,25,19,.2)), var(--pattern); background-size: cover; }
    .machine::after { content: "레이저 · 절곡 · 샤링 · CNC"; position: absolute; left: 28px; bottom: 28px; color: #fff; font-size: 34px; font-weight: 1000; max-width: 360px; line-height: 1.12; }
    .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .chip { padding: 11px 14px; border-radius: 6px; background: #eef1f2; color: #30383c; font-weight: 900; }

    .process-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .step { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
    .step strong { color: var(--blue); font-size: 34px; }
    .step h3 { margin: 28px 0 10px; font-size: 21px; }
    .step p { margin: 0; color: var(--muted); line-height: 1.65; }

    .cta { padding: 70px 0; color: #fff; background: var(--blue); }
    .cta-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; }
.cta-grid > div:first-child { flex: 1 1 340px; min-width: 0; }
    .cta h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.18; }
    .cta p { margin: 12px 0 0; color: rgba(255,255,255,.78); }
    .phone { text-align: right; white-space: nowrap; flex-shrink: 0; }
    .phone small { display: block; font-weight: 900; color: rgba(255,255,255,.75); }
    .phone b { display: block; margin-top: 4px; font-size: 42px; }

    footer { padding: 44px 0 74px; background: #1a1712; color: #aaa; }
    footer strong { color: #fff; font-size: 24px; }
    footer p { margin: 14px 0 0; line-height: 1.7; }
    .quick-sign { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 35; width: 118px; overflow: hidden; border-radius: 2px; box-shadow: 0 20px 45px rgba(0,0,0,.28); text-align: center; font-weight: 1000; }
    .quick-sign a { position: relative; overflow: hidden; text-decoration: none; }
    .quick-sign a::after { content: ""; position: absolute; inset: -40% auto -40% -90%; width: 60%; transform: skewX(-24deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); animation: quickFlash 3.4s ease-in-out infinite; pointer-events: none; }
    .quick-phone { display: grid; gap: 6px; padding: 18px 10px 14px; color: #fff; background: #303030; border-top: 3px solid #1c1913; }
    .quick-icon { font-size: 25px; line-height: 1; }
    .quick-phone b { font-size: 14px; }
    .quick-phone strong { color: #d9c7a3; font-size: 24px; line-height: 1.02; letter-spacing: .08em; }
    .quick-phone small { color: #ddd; font-size: 11px; letter-spacing: 0; }
    .quick-tags { display: grid; gap: 8px; padding: 18px 10px; color: #fff; background: #252525; font-size: 17px; line-height: 1.15; }
    .quick-tags span:last-child { color: #d9c7a3; }
    .quick-kakao, .quick-store, .quick-talk, .quick-youtube, .quick-online, .quick-top { display: grid; place-items: center; min-height: 40px; color: #222; font-size: 14px; }
    .quick-kakao { background: #ffe100; }
    .quick-kakao span::before { content: "BLOG"; display: inline-grid; place-items: center; width: 34px; height: 20px; margin-right: 5px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 9px; vertical-align: middle; }
    .quick-store { background: #00c73c; color: #fff; }
    .quick-store span::before { content: "N"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 3px; background: #fff; color: #00a838; font-size: 12px; }
    .quick-talk { background: #06d64f; color: #fff; }
    .quick-talk span::before { content: "CAFE"; margin-right: 6px; font-size: 10px; }
    .quick-youtube { background: #e62117; color: #fff; }
    .quick-youtube span::before { content: "▶"; margin-right: 6px; }
    .quick-online { background: #6f6f6f; color: #fff; }
    .quick-online span::before { content: "지도"; display: inline-grid; place-items: center; min-width: 28px; height: 18px; margin-right: 6px; border: 1px solid #fff; font-size: 10px; }
    .quick-top { min-height: 38px; background: #303030; color: #aaa; font-size: 13px; }
    .quick-top::before { content: "▲"; margin-right: 3px; font-size: 9px; }
    @keyframes quickFlash { 0%, 58% { left: -90%; opacity: 0; } 66% { opacity: .95; } 84%, 100% { left: 130%; opacity: 0; } }



    @keyframes heroFlash {
      0%, 46% { transform: translateX(0) rotate(16deg); opacity: 0; }
      54% { opacity: 1; }
      72%, 100% { transform: translateX(420%) rotate(16deg); opacity: 0; }
    }
    @keyframes titleFlash {
      0%, 52% { transform: translateX(-115%) skewX(-18deg); opacity: 0; }
      62% { opacity: .72; }
      78%, 100% { transform: translateX(120%) skewX(-18deg); opacity: 0; }
    }
    @keyframes buttonFlash {
      0% { left: -70%; opacity: 0; }
      20% { opacity: 1; }
      100% { left: 122%; opacity: 0; }
    }
    @keyframes cardFlash {
      0% { transform: translateX(-125%) skewX(-22deg); opacity: 0; }
      22% { opacity: .95; }
      100% { transform: translateX(125%) skewX(-22deg); opacity: 0; }
    }
    @keyframes sparkPop {
      0%, 72%, 100% { transform: scale(.45); opacity: 0; }
      76% { opacity: 1; }
      82% { transform: scale(1.8); opacity: .9; }
      90% { transform: scale(.8); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    }

    @media (max-width: 980px) {
      nav { display: none; }
      .hero-grid, .about, .equipment-grid { grid-template-columns: 1fr; }
      .hero-grid { padding-right: 0; }
      .hero-panel { max-width: 180px; }
      .stats-grid, .service-grid, .portfolio-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
      .cta-grid { align-items: flex-start; flex-direction: column; }
      .phone { text-align: left; }
    }
    @media (max-width: 640px) {
      .wrap { width: min(100% - 28px, 1180px); }
      .nav { height: 66px; }
      .nav-call { display: none; }
      .brand { min-width: 104px; }
      .brand-logo { width: 104px; height: 48px; }
      .hero-grid { padding: 104px 0 54px; gap: 32px; }
      .stats { margin-top: 0; }
      .stats-grid, .service-grid, .portfolio-grid, .process-grid { grid-template-columns: 1fr; }
      .stat { border-right: 0; border-bottom: 1px solid var(--line); }
      .stat:last-child { border-bottom: 0; }
      section { padding: 70px 0; }
      .portfolio-head { align-items: flex-start; flex-direction: column; }
      .phone b { font-size: 34px; }
      .hero .hero-panel { top: 78px; right: 0; max-height: calc(100vh - 90px); transform: translateX(calc(100% - 28px)); }
      .hero-panel { max-width: 180px; }
      .panel-head { padding: 14px 16px 10px; }
      .panel-body { padding: 14px 16px 16px; }
      .quick-sign { right: 8px; width: 92px; }
      .quick-phone { padding: 13px 8px; }
      .quick-phone strong { font-size: 19px; }
      .quick-tags { padding: 13px 8px; font-size: 14px; }
      .quick-kakao, .quick-store, .quick-talk, .quick-youtube, .quick-online, .quick-top { min-height: 34px; font-size: 12px; }
    }
  
    .sub-hero { position: relative; overflow: hidden; color: #fff; background: #111; padding: 152px 0 84px; }
    .sub-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.42)), var(--sub-image); background-size: cover; background-position: center; }
    .sub-hero::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -38%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); filter: blur(10px); transform: rotate(16deg); animation: heroFlash 5.8s ease-in-out infinite; }
    .sub-hero .wrap { position: relative; z-index: 1; }
    .sub-hero h1 { max-width: 900px; }
    .sub-hero p { max-width: 760px; color: rgba(255,255,255,.82); }
    .page-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: start; }
    .content-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 30px; }
    .content-panel h2, .content-panel h3 { margin-top: 0; }
    .content-panel p, .content-panel li { color: var(--muted); line-height: 1.75; }
    .feature-list { display: grid; gap: 12px; padding: 0; margin: 22px 0 0; list-style: none; }
    .feature-list li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-weight: 800; color: #343434; }
    .split-band { background: #fff; }
    .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
    .mini-card { min-height: 150px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
    .mini-card b { display: block; font-size: 19px; }
    .mini-card span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.6; }
    .work-detail { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: start; }
    .detail-visual { min-height: 460px; position: relative; overflow: hidden; border-radius: 8px; background: #9da7aa; box-shadow: var(--shadow); }
    .detail-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(28,25,19,.76), rgba(58,52,42,.62)), var(--pattern); background-size: cover; }
    .detail-visual::after { content: attr(data-label); position: absolute; left: 28px; bottom: 28px; color: #fff; font-size: 38px; font-weight: 1000; }
    .detail-visual.has-image { background-size: cover; background-position: center; }
    .detail-visual.has-image::before { background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.62)); }
    .info-table { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 24px; }
    .info-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 15px; background: #fff; }
    .info-row b { color: var(--ink); }
    .info-row span { color: var(--muted); }
    .contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
    .contact-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; }
    .contact-card strong { display: block; font-size: 24px; }
    .contact-card a, .contact-card span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.6; }
    @media (max-width: 980px) {
      .page-grid, .work-detail, .contact-layout { grid-template-columns: 1fr; }
      .mini-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .sub-hero { padding: 114px 0 64px; }
      .mini-grid { grid-template-columns: 1fr; }
      .detail-visual { min-height: 320px; }
      .info-row { grid-template-columns: 1fr; }
    }






    .photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
    .photo-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
    @media (max-width: 640px) {
      .photo-gallery { grid-template-columns: 1fr; }
    }

    .admin-secret { margin-left: 8px; color: rgba(255,255,255,.18); font-size: 10px; letter-spacing: .04em; }
    .admin-secret:hover { color: rgba(255,255,255,.55); }


    .inner-info { margin-top: 18px; padding: 20px; background: var(--paper); }
    .channel-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
    .channel-links a { display: inline-flex; min-height: 38px; align-items: center; padding: 0 13px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 900; }

    .estimate-live { padding: 56px 0 24px; background: #fff; }
    .estimate-wrap { display: grid; grid-template-columns: .36fr .64fr; gap: 18px; align-items: start; }
    .estimate-head { position: sticky; top: 92px; display: grid; gap: 12px; align-content: start; }
    .estimate-head h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
    .estimate-board { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); box-shadow: 0 16px 34px rgba(20,20,20,.08); }
    .estimate-row { display: grid; grid-template-columns: 68px 86px 1fr 72px; gap: 10px; align-items: center; min-height: 48px; padding: 0 13px; border-bottom: 1px solid var(--line); background: #fff; animation: estimatePulse 4.2s ease-in-out infinite; }
    .estimate-row:last-child { border-bottom: 0; }
    .estimate-row:nth-child(2) { animation-delay: .35s; }
    .estimate-row:nth-child(3) { animation-delay: .7s; }
    .estimate-row:nth-child(4) { animation-delay: 1.05s; }
    .estimate-row:nth-child(5) { animation-delay: 1.4s; }
    .estimate-row:nth-child(6) { animation-delay: 1.75s; }
    .estimate-row .time { color: var(--blue); font-size: 12px; font-weight: 1000; }
    .estimate-row b { font-size: 14px; }
    .estimate-row span:nth-child(3) { color: #424242; font-size: 14px; font-weight: 800; }
    .estimate-row em { justify-self: end; min-width: 62px; padding: 6px 8px; border-radius: 999px; color: #fff; background: var(--green); font-size: 11px; font-style: normal; font-weight: 1000; text-align: center; }
    @keyframes estimatePulse {
      0%, 88%, 100% { background: #fff; }
      92% { background: #f2ede4; }
    }
    @media (max-width: 980px) {
      .estimate-wrap { grid-template-columns: 1fr; }
      .estimate-head { position: static; }
    }
    @media (max-width: 720px) {
      .estimate-row { grid-template-columns: 1fr; gap: 5px; height: auto; padding: 13px 14px; }
      .estimate-row em { justify-self: start; }
    }

    .estimate-summary { grid-column: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
    .estimate-summary div { min-height: 62px; padding: 12px; background: #faf8f3; display: grid; align-content: center; gap: 5px; }
    .estimate-summary b { color: var(--muted); font-size: 12px; }
    .estimate-summary strong { color: var(--ink); font-size: 22px; line-height: 1; }
    @media (max-width: 720px) {
      .estimate-summary { grid-column: 1; grid-template-columns: repeat(2, 1fr); }
      .estimate-summary div:last-child { grid-column: 1 / -1; }
    }




    .door-catalog { background: #fff; }
    .catalog-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
    .door-models { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
    .door-model { min-height: 170px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
    .door-model:hover, .door-model.active { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 16px 34px rgba(28,25,19,.14); }
    .door-model b { display: block; font-size: 23px; }
    .door-model span { display: block; margin-top: 10px; color: var(--muted); font-weight: 800; }
    .door-model strong { display: block; margin-top: 24px; color: var(--blue); font-size: 24px; }
    .estimate-calculator { position: sticky; top: 94px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #faf8f3; box-shadow: var(--shadow); }
    .estimate-calculator h2 { margin: 0 0 16px; font-size: 26px; }
    .estimate-calculator label { display: grid; gap: 7px; margin-top: 10px; color: #333; font-size: 13px; font-weight: 900; }
    .option-list { display: grid; gap: 8px; margin-top: 16px; padding: 14px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
    .option-list label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
    .estimate-total { display: grid; gap: 6px; margin: 18px 0 14px; padding: 18px; border-radius: 8px; background: var(--ink); color: #fff; }
    .estimate-total span { color: #cfc6b6; font-size: 13px; font-weight: 900; }
    .estimate-total strong { color: #d9c7a3; font-size: 32px; line-height: 1; }
    .estimate-total small { color: #e6dfd2; line-height: 1.5; }
    .door-table { display: grid; gap: 1px; margin-top: 26px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); }
    .door-table div { display: grid; grid-template-columns: 160px 1fr 120px; gap: 16px; align-items: center; min-height: 62px; padding: 0 18px; background: #fff; }
    .door-table b { font-size: 16px; }
    .door-table span { color: var(--muted); }
    .door-table strong { color: var(--blue); text-align: right; }
    @media (max-width: 980px) {
      .catalog-layout { grid-template-columns: 1fr; }
      .estimate-calculator { position: static; }
    }
    @media (max-width: 640px) {
      .door-models { grid-template-columns: 1fr; }
      .door-table div { grid-template-columns: 1fr; gap: 7px; padding: 15px; }
      .door-table strong { text-align: left; }
    }

    .hero.video-fallback { background-image: var(--pattern); background-size: 108% auto; background-position: center; animation: heroMotionFallback 16s ease-in-out infinite alternate; }
    .hero.video-fallback video { opacity: 0; }
    @keyframes heroMotionFallback {
      from { background-size: 104% auto; background-position: 48% 50%; }
      to { background-size: 116% auto; background-position: 54% 44%; }
    }

    .about-company { background: #fff; }
    .about-profile { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: stretch; }
    .about-profile p { color: #5c554a; line-height: 1.82; font-weight: 700; }
    .signature { margin-top: 24px; font-size: 22px; color: var(--ink) !important; font-weight: 1000 !important; }
    .profile-card { min-height: 340px; padding: 30px; border-radius: 8px; background: linear-gradient(135deg, rgba(28,25,19,.86), rgba(18,18,18,.9)), var(--pattern); background-size: cover; color: #fff; display: grid; align-content: end; gap: 10px; box-shadow: var(--shadow); }
    .profile-card b { font-size: 34px; line-height: 1.05; }
    .profile-card strong { font-size: 30px; color: #fff; }
    .profile-card span, .profile-card small { color: rgba(255,255,255,.82); font-weight: 800; }
    .org-chart { display: grid; gap: 18px; }
    .org-node { min-height: 76px; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: grid; place-items: center; text-align: center; font-weight: 1000; box-shadow: 0 10px 22px rgba(20,20,20,.06); }
    .org-node.ceo { width: min(360px, 100%); margin: 0 auto; background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
    .org-lines { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .equipment-list { display: grid; gap: 10px; margin-top: 24px; }
    .equipment-list div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
    .equipment-list b { color: var(--ink); }
    .equipment-list span { color: var(--muted); font-weight: 800; }
    .work-visual { position: relative; }
    .work-count { position: absolute; right: 12px; top: 12px; z-index: 3; padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 1000; }
    .photo-gallery { grid-template-columns: repeat(3, 1fr); }
    .photo-gallery a { display: block; }
    .photo-gallery img { display: block; transition: transform .18s ease, box-shadow .18s ease; }
    .photo-gallery a:hover img { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.12); }
    .door-model { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px; min-height: 190px; }
    .door-model-photo { min-height: 150px; border-radius: 7px; background: #cfd5da; background-size: cover; background-position: center; display: grid; place-items: center; color: #fff; font-weight: 1000; overflow: hidden; }
    .door-model-photo.empty { background: linear-gradient(135deg, rgba(28,25,19,.78), rgba(58,52,42,.66)), var(--pattern); }
    .door-model-copy { display: grid; align-content: center; }
    .door-detail-panel { margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #faf8f3; display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; }
    .door-detail-panel h3 { margin: 0 0 10px; font-size: 30px; }
    .door-detail-panel p { color: var(--muted); line-height: 1.72; font-weight: 800; }
    .door-detail-panel ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
    .door-detail-panel li { padding-left: 18px; position: relative; color: #333; font-weight: 900; }
    .door-detail-panel li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
    .door-detail-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .door-detail-gallery img, .door-empty-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #e5e8ec; display: grid; place-items: center; color: var(--muted); font-weight: 1000; }
    @media (max-width: 900px) {
      .about-profile, .org-lines, .door-detail-panel { grid-template-columns: 1fr; }
      .door-model { grid-template-columns: 1fr; }
      .photo-gallery, .door-detail-gallery { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .photo-gallery, .door-detail-gallery { grid-template-columns: 1fr; }
      .equipment-list div { grid-template-columns: 1fr; }
    }


    .gallery-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left; }
    .gallery-open img { width: 100%; }
    .image-lightbox { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: 28px; background: rgba(15,15,15,.82); }
    .image-lightbox.open { display: grid; }
    .image-lightbox-panel { position: relative; width: min(1100px, 100%); max-height: 92vh; display: grid; gap: 10px; }
    .image-lightbox-panel img { max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,.42); background: #111; }
    .image-lightbox-panel p { margin: 0; color: #fff; font-weight: 900; text-align: center; }
    .image-lightbox-close { position: absolute; right: 0; top: -48px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #111; font-size: 26px; font-weight: 1000; cursor: pointer; }
    body.lightbox-open { overflow: hidden; }

    .work-detail { align-items: start; }
    .photo-story { grid-column: 1 / -1; display: grid; gap: 28px; margin-top: 10px; }
    .photo-story figure { margin: 0; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(20,20,20,.08); }
    .photo-story .gallery-open { display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: zoom-in; }
    .photo-story img { display: block; width: 100%; max-height: 880px; object-fit: contain; background: #111; }
    .photo-story figcaption { padding: 12px 16px; color: var(--muted); font-size: 13px; font-weight: 900; text-align: right; }


    /* DJS centered navigation override */
    header {
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid rgba(21,21,21,.08);
      box-shadow: 0 10px 30px rgba(28,25,19,.06);
    }
    .nav {
      height: 104px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 30px;
      position: relative;
    }
    .brand {
      grid-column: 2;
      grid-row: 1;
      min-width: 190px;
      justify-content: center;
      position: relative;
      z-index: 3;
    }
    .brand-logo {
      width: 172px;
      height: 82px;
      object-fit: contain;
      object-position: center;
    }
    .nav nav {
      grid-column: 1 / 4;
      grid-row: 1;
      display: grid;
      grid-template-columns: repeat(6, auto);
      justify-content: center;
      align-items: center;
      column-gap: clamp(34px, 4.6vw, 78px);
      color: #5c554a;
      font-size: 17px;
      font-weight: 1000;
    }
    .nav nav a {
      position: relative;
      padding: 10px 0;
      color: #5c554a;
      text-decoration: none;
      white-space: nowrap;
    }
    .nav nav a:nth-child(1), .nav nav a:nth-child(2), .nav nav a:nth-child(3) { transform: translateX(-112px); }
    .nav nav a:nth-child(4), .nav nav a:nth-child(5) { transform: translateX(112px); }
    .nav nav a::after {
      content: '';
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: 4px;
      height: 3px;
      background: var(--blue);
      border-radius: 999px;
      transition: left .18s ease, right .18s ease;
    }
    .nav nav a:hover::after { left: 0; right: 0; }
    .nav-call {
      justify-self: end;
      position: relative;
      z-index: 4;
      min-height: 40px;
      padding: 0 18px;
      white-space: nowrap;
    }
    .hero-grid { padding-top: 160px; }
    .sub-hero { padding-top: 182px; }
    .company-nav { top: 104px; }
    .company-page section[id] { scroll-margin-top: 164px; }
    @media (max-width: 980px) {
      .nav nav { column-gap: 28px; font-size: 15px; }
      .nav nav a:nth-child(1), .nav nav a:nth-child(2), .nav nav a:nth-child(3) { transform: translateX(-86px); }
      .nav nav a:nth-child(4), .nav nav a:nth-child(5) { transform: translateX(86px); }
      .brand-logo { width: 148px; height: 72px; }
    }
    @media (max-width: 760px) {
      .nav { height: auto; min-height: 92px; grid-template-columns: 1fr; gap: 6px; padding: 8px 0 10px; }
      .brand { grid-column: 1; grid-row: 1; min-width: 120px; }
      .brand-logo { width: 118px; height: 54px; }
      .nav nav { grid-column: 1; grid-row: 2; display: flex; width: 100%; overflow-x: auto; justify-content: flex-start; gap: 18px; padding: 0 4px 4px; font-size: 13px; scrollbar-width: none; }
      .nav nav::-webkit-scrollbar { display: none; }
      .nav nav a:nth-child(n) { transform: none; }
      .nav-call { display: none; }
      .hero-grid { padding-top: 122px; }
      .sub-hero { padding-top: 132px; }
      .company-nav { top: 92px; }
      .company-page section[id] { scroll-margin-top: 144px; }
    }


    /* Admin center redesign */
    .admin-center-body { margin: 0; background: #f2ede4; color: #1c1913; }
    .admin-center-body header:not(.admin-topbar) { position: static; }
    .admin-center { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 78px 1fr; }
    .admin-topbar { position: sticky; top: 0; z-index: 50; grid-column: 1 / -1; height: 78px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e6dfd2; box-shadow: 0 8px 24px rgba(28,25,19,.06); }
    .admin-topbar p { margin: 0 0 3px; color: #1c1913; font-size: 12px; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
    .admin-topbar h1 { margin: 0; font-size: 22px; color: #1c1913; text-shadow: none; }
    .admin-topbar h1::after { display: none; }
    .admin-top-actions, .admin-toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
    .admin-sidebar { position: sticky; top: 78px; height: calc(100vh - 78px); padding: 20px 14px; background: #1c1913; color: #fff; overflow: auto; }
    .admin-logo { display: grid; place-items: center; min-height: 88px; margin-bottom: 14px; border-radius: 8px; background: #fff; }
    .admin-logo img { width: 120px; height: 70px; object-fit: contain; }
    .side-link { width: 100%; min-height: 46px; margin: 3px 0; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: #e6dfd2; text-align: left; font-weight: 900; cursor: pointer; }
    .side-link:hover, .side-link.active { background: #1c1913; color: #fff; }
    .admin-main { padding: 28px; min-width: 0; }
    .admin-view { display: none; max-width: 1280px; margin: 0 auto; }
    .admin-view.active { display: block; }
    .admin-page-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; margin-bottom: 22px; }
    .admin-page-head p { margin: 0 0 7px; color: #1c1913; font-size: 12px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
    .admin-page-head h2 { margin: 0; font-size: 34px; color: #1c1913; }
    .admin-page-head span, .admin-help { color: #7a7367; font-weight: 700; line-height: 1.65; }
    .dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
    .dash-grid article, .admin-card-block, .manager-card { background: #fff; border: 1px solid #e6dfd2; border-radius: 8px; box-shadow: 0 14px 34px rgba(28,25,19,.07); }
    .dash-grid article { padding: 22px; display: grid; gap: 8px; }
    .dash-grid b { color: #7a7367; font-size: 14px; }
    .dash-grid strong { font-size: 42px; color: #1c1913; line-height: 1; }
    .dash-grid strong.small { font-size: 18px; color: #1c1913; line-height: 1.35; }
    .dash-grid span { color: #7a7367; font-weight: 800; }
    .admin-btn { min-height: 38px; padding: 0 14px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; font-weight: 1000; cursor: pointer; }
    .admin-btn.primary { background: #1c1913; color: #fff; }
    .admin-btn.dark { background: #1c1913; color: #fff; }
    .admin-btn.danger { background: #e03131; color: #fff; }
    .admin-btn.secondary, .admin-btn.ghost { background: #f2ede4; color: #3a352c; }
    .admin-card-block { padding: 22px; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    .form-grid label { display: grid; gap: 7px; color: #3a352c; font-size: 13px; font-weight: 1000; }
    .form-grid label.wide { grid-column: 1 / -1; }
    .form-grid input, .form-grid textarea, .form-grid select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #cfc6b6; border-radius: 7px; background: #fff; font: inherit; color: #1c1913; }
    .form-grid textarea { min-height: 98px; resize: vertical; }
    .admin-preview-card { margin-top: 16px; padding: 18px; border-radius: 8px; border: 1px solid #e6dfd2; background: #faf8f3; }
    .admin-preview-card p { margin: 0 0 8px; color: #1c1913; font-size: 12px; font-weight: 1000; text-transform: uppercase; }
    .admin-preview-card h3 { margin: 0 0 8px; font-size: 24px; color: #1c1913; }
    .admin-preview-card span { display: block; color: #7a7367; line-height: 1.6; }
    .admin-preview-card b { display: block; margin-top: 10px; color: #1c1913; }
    .manager-list { display: grid; gap: 16px; }
    .manager-card { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: 18px; }
    .card-side { display: grid; gap: 10px; align-content: start; }
    .admin-thumb-card { min-height: 160px; border-radius: 8px; background: linear-gradient(135deg, rgba(28,25,19,.82), rgba(28,25,19,.72)), #e6dfd2; background-size: cover; background-position: center; display: grid; place-items: center; color: #fff; font-weight: 1000; text-align: center; padding: 12px; }
    .card-body { min-width: 0; }
    .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
    .card-head h3 { margin: 0; font-size: 22px; color: #1c1913; }
    .thumb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; margin: 14px 0; }
    .mini-thumb { min-height: 82px; border-radius: 7px; background: #e6dfd2; background-size: cover; background-position: center; position: relative; overflow: hidden; border: 1px solid #e6dfd2; }
    .mini-thumb.pending { outline: 2px solid #1c1913; }
    .mini-thumb button { position: relative; top: 48px; margin: 2px; min-height: 24px; border: 0; border-radius: 4px; background: rgba(28,25,19,.78); color: #fff; font-size: 11px; font-weight: 900; cursor: pointer; }
    .admin-toast { position: fixed; right: 24px; bottom: 24px; z-index: 200; padding: 14px 18px; border-radius: 8px; background: #1c1913; color: #fff; font-weight: 900; box-shadow: 0 16px 50px rgba(0,0,0,.22); transform: translateY(120px); opacity: 0; transition: .2s ease; }
    .admin-toast.show { transform: translateY(0); opacity: 1; }
    .admin-toast.error { background: #e03131; }
    .admin-lightbox { position: fixed; inset: 0; z-index: 160; display: none; place-items: center; background: rgba(0,0,0,.75); padding: 24px; }
    .admin-lightbox.open { display: grid; }
    .admin-lightbox div { display: grid; gap: 10px; justify-items: end; }
    .admin-lightbox img { max-width: min(980px, 100%); max-height: 80vh; border-radius: 8px; background: #111; }
    .admin-lightbox button { min-height: 36px; border: 0; border-radius: 7px; padding: 0 14px; font-weight: 1000; }
    @media (max-width: 980px) { .admin-center { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } .admin-sidebar { position: static; height: auto; display: flex; overflow-x: auto; gap: 8px; padding: 10px; } .admin-logo { display: none; } .side-link { flex: 0 0 auto; width: auto; white-space: nowrap; } .admin-main { padding: 18px; } .dash-grid { grid-template-columns: repeat(2, 1fr); } .manager-card { grid-template-columns: 1fr; } }
    @media (max-width: 640px) { .admin-topbar { height: auto; min-height: 74px; padding: 12px; align-items: flex-start; flex-direction: column; } .dash-grid, .form-grid { grid-template-columns: 1fr; } .admin-page-head { align-items: flex-start; flex-direction: column; } }


/* 2026-05 quick navigation and factory cards */
.factory-shortcuts{padding:34px 0 12px;background:linear-gradient(180deg,#fff 0%,#f3f6fb 100%)}.factory-shortcuts-grid{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:16px}.factory-card{position:relative;min-height:190px;padding:26px 24px;overflow:hidden;border-radius:10px;border:1px solid #e6dfd2;color:#fff;box-shadow:0 18px 42px rgba(28,25,19,.1);isolation:isolate}.factory-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.25),transparent 30%)}.factory-card small{display:inline-flex;margin-bottom:18px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;font-weight:1000;letter-spacing:.08em}.factory-card h2{margin:0 0 10px;font-size:28px;letter-spacing:-.055em;color:#fff}.factory-card p{margin:0;min-height:48px;color:rgba(255,255,255,.82);line-height:1.55;font-weight:700;word-break:keep-all}.factory-card span{display:inline-flex;margin-top:20px;padding:10px 13px;border-radius:7px;background:#fff;color:#1c1913;font-size:13px;font-weight:1000}.factory-card-primary{background:linear-gradient(135deg,#1c1913,#221f1a)}.factory-card-secondary{background:linear-gradient(135deg,#1c1913,#3a352c)}.factory-card-estimate{background:linear-gradient(135deg,#1c1913,#1c1913)}
.quick-sign{left:18px!important;right:auto!important;width:128px!important;border-radius:7px!important;box-shadow:0 22px 55px rgba(0,0,0,.24)!important}.quick-phone{background:linear-gradient(180deg,#2b2b2b,#1f1f1f)!important}.quick-factory{display:grid;gap:3px;min-height:56px;padding:10px 8px;place-items:center;color:#fff;font-size:13px;line-height:1.2}.quick-factory small{color:rgba(255,255,255,.76);font-size:11px;font-weight:1000}.quick-factory b{font-size:13px;word-break:keep-all}.quick-factory1{background:#1c1913}.quick-factory2{background:#1c1913;border-top:1px solid rgba(255,255,255,.12)}.quick-estimate{display:grid;place-items:center;min-height:58px;padding:9px;background:linear-gradient(135deg,#1c1913,#3a352c);color:#fff;font-size:13px;line-height:1.25;font-weight:1000}.quick-estimate span::before{content:"DOOR";display:inline-grid;place-items:center;min-width:35px;height:18px;margin-right:5px;border-radius:999px;background:#fff;color:#1c1913;font-size:9px;vertical-align:middle}
.manager-card{grid-template-columns:minmax(190px,240px) minmax(0,1fr)!important;gap:28px!important;align-items:start!important}.card-side{min-width:0!important;max-width:240px!important}.admin-thumb-card{width:100%!important;min-height:168px!important;box-sizing:border-box!important}.card-body{min-width:0!important}.card-head h3{word-break:keep-all}
@media(max-width:760px){.factory-shortcuts-grid{grid-template-columns:1fr}.quick-sign{left:8px!important;width:96px!important}.quick-factory,.quick-estimate{min-height:48px;font-size:11px}}


/* Category centered renewal */
.main-categories,.category-page-section,.video-section,.strength-band,.sign-group-section{padding:76px 0;background:#fff}.main-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.main-category-card,.sign-group-card,.work-card,.video-card,.strength-grid article{border:1px solid #e6dfd2;background:#fff;border-radius:10px;box-shadow:0 16px 36px rgba(28,25,19,.08)}.main-category-card{min-height:270px;padding:26px;color:#1c1913;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.main-category-card small,.sign-group-card small{color:#1c1913;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.main-category-card h2{margin:12px 0;font-size:30px;letter-spacing:-.055em}.main-category-card p{line-height:1.65;color:#5c554a;font-weight:700}.main-category-card span{display:inline-flex;width:max-content;padding:11px 14px;border-radius:7px;background:#1c1913;color:#fff;font-weight:1000}.category-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}.category-tabs button{min-height:40px;padding:0 14px;border:1px solid #ddd5c8;border-radius:999px;background:#fff;font-weight:900;cursor:pointer}.category-tabs button.active{background:#1c1913;color:#fff;border-color:#1c1913}.category-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.work-card{overflow:hidden}.work-card-visual{aspect-ratio:4/3;background:linear-gradient(135deg,#efe9df,#ddd5c8);background-size:cover;background-position:center;display:grid;place-items:center;color:#837b6e;font-weight:1000}.work-card-body{padding:18px}.work-card-body small{color:#1c1913;font-weight:1000}.work-card-body h3{margin:8px 0 8px;font-size:21px}.work-card-body p{margin:0;color:#837b6e;line-height:1.6}.work-card-body em{display:block;margin-top:12px;color:#1c1913;font-style:normal;font-weight:900}.video-section{background:#221f1a;color:#fff}.video-section .section-title,.video-section .lead{color:#fff}.video-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:18px}.video-player{min-height:430px;border-radius:12px;background:#141210;overflow:hidden;display:grid;place-items:center}.video-player iframe,.video-player video{width:100%;height:100%;min-height:430px;border:0;display:block}.video-list{display:grid;gap:12px}.video-card{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px;text-align:left;cursor:pointer;background:#fff;color:#1c1913}.video-card-thumb{min-height:84px;border-radius:8px;background:#e6dfd2;background-size:cover;background-position:center;display:grid;place-items:center;color:#837b6e;font-size:12px;font-weight:900}.video-card h3{margin:0 0 6px;font-size:16px}.video-card p{margin:0;color:#837b6e;font-size:13px;line-height:1.45}.video-card time{display:block;margin-top:7px;color:#1c1913;font-size:12px;font-weight:1000}.sign-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sign-group-card{padding:22px}.sign-group-card h3{margin:10px 0;font-size:23px}.sign-group-card b{display:block;color:#5c554a;line-height:1.55}.sign-group-card p{color:#837b6e;line-height:1.6}.strength-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.strength-grid article{padding:24px}.strength-grid b{display:block;margin-bottom:10px;font-size:22px}.strength-grid span{color:#837b6e;line-height:1.6}.empty-state{padding:34px;border:1px dashed #aca594;border-radius:10px;text-align:center;color:#837b6e;background:#fff}
@media(max-width:980px){.main-category-grid,.category-work-grid,.strength-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.video-layout{grid-template-columns:1fr}.video-player,.video-player iframe,.video-player video{min-height:320px}}@media(max-width:640px){.main-category-grid,.category-work-grid,.sign-group-grid,.strength-grid{grid-template-columns:1fr}.video-card{grid-template-columns:94px 1fr}.main-category-card{min-height:220px}}


/* 2026-05 gallery modal and mobile cleanup */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
/* overflow-x:hidden는 position:sticky를 막으므로, 지원 브라우저에서는
   clip으로 교체 → 가로 스크롤 방지는 유지하면서 sticky 메뉴바 정상 동작 */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
img, video, iframe { max-width: 100%; height: auto; }
body.modal-open { overflow: hidden; }
.work-card { cursor: pointer; display: flex; flex-direction: column; }
.work-card-visual { position: relative; overflow: hidden; }
.work-photo-count { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 7px 10px; border-radius: 999px; background: rgba(28,25,19,.84); color: #fff; font-size: 12px; font-weight: 1000; }
.work-detail-button { width: 100%; min-height: 44px; margin-top: 14px; border: 0; border-radius: 7px; background: #1c1913; color: #fff; font-weight: 1000; cursor: pointer; }
.work-card:focus-visible, .work-detail-button:focus-visible, .work-modal-close:focus-visible, .nav-toggle:focus-visible { outline: 3px solid rgba(28,25,19,.35); outline-offset: 3px; }
.work-modal { position: fixed; inset: 0; z-index: 5000; display: none; padding: 24px; }
.work-modal.open { display: grid; place-items: center; }
.work-modal-backdrop { position: absolute; inset: 0; background: rgba(22,19,16,.72); backdrop-filter: blur(4px); }
.work-modal-panel { position: relative; z-index: 1; width: min(1180px, 96vw); max-height: 92vh; overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.34); }
.work-modal-close { position: sticky; top: 0; float: right; z-index: 4; min-width: 76px; min-height: 46px; margin: 12px; border: 0; border-radius: 7px; background: #1c1913; color: #fff; font-weight: 1000; cursor: pointer; }
.work-modal-layout { clear: both; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); gap: 26px; padding: 18px 26px 28px; }
.work-modal-main { display: grid; place-items: center; min-height: 420px; border-radius: 10px; background: #221f1a; overflow: hidden; }
.work-modal-main img { width: 100%; height: 100%; max-height: 68vh; object-fit: contain; }
.work-modal-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.work-modal-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: #f2ede4; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }
.work-modal-thumbs button.active { border-color: #1c1913; }
.work-modal-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.work-modal-info h2 { margin: 6px 0 14px; font-size: 30px; letter-spacing: -.04em; }
.work-modal-info p, .work-modal-info div[data-work-description] { color: #5c554a; line-height: 1.75; white-space: pre-line; word-break: keep-all; }
.work-modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.work-modal-meta span { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border-radius: 999px; background: #f2ede4; color: #1c1913; font-size: 13px; font-weight: 1000; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid #e6dfd2; border-radius: 8px; background: #fff; align-items: center; justify-content: center; gap: 4px; flex-direction: column; cursor: pointer; }
.nav-toggle span { width: 20px; height: 2px; border-radius: 999px; background: #1c1913; }
.table-wrap, .estimate-table-wrap { max-width: 100%; overflow-x: auto; }
button, .btn, input, select, textarea { min-height: 44px; }

@media (max-width: 1024px) {
  .wrap { width: min(100% - 32px, 1180px); }
  .main-category-grid, .category-work-grid, .strength-grid, .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-layout, .page-grid, .work-detail, .contact-layout, .estimate-shell { grid-template-columns: 1fr !important; }
  .summary { position: static !important; }
  .quick-sign { right: 8px; width: 104px; transform: scale(.9); transform-origin: right bottom; }
  .work-modal-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  header { position: sticky; top: 0; z-index: 1000; }
  header .nav { min-height: 66px !important; height: auto !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 10px !important; padding: 8px 0 !important; }
  header .brand { grid-column: 1; }
  header .brand-logo { max-width: 92px; height: auto; }
  header .nav-call { grid-column: 2; justify-self: end; display: inline-flex !important; min-height: 42px; padding: 0 12px; font-size: 13px; }
  header .nav-toggle { grid-column: 3; display: inline-flex; }
  header .nav > nav { grid-column: 1 / -1 !important; grid-row: 2 !important; display: none !important; width: 100% !important; max-height: none; overflow: visible; padding: 8px 0 4px !important; grid-template-columns: 1fr !important; gap: 6px !important; font-size: 15px !important; transform: none !important; }
  header .nav.is-open > nav { display: grid !important; }
  header .nav > nav a { width: 100%; min-height: 44px; padding: 0 12px; display: flex; align-items: center; border-radius: 7px; background: #f3f6fb; transform: none !important; }
  .hero, .sub-hero { min-height: auto; padding: 54px 0 44px; }
  .hero h1, .sub-hero h1 { font-size: clamp(30px, 9vw, 36px); line-height: 1.18; }
  .hero-copy, .sub-hero p { font-size: 15px; line-height: 1.65; }
  .hero-actions, .admin-toolbar, .filter-bar { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .admin-toolbar .admin-btn, .filter-bar select, .smartstore-button, .estimate-cta, .door-estimate-link { width: 100%; }
  .main-categories, .category-page-section, .video-section, .strength-band, .sign-group-section { padding: 46px 0; }
  .main-category-grid, .category-work-grid, .sign-group-grid, .strength-grid, .factory-shortcuts-grid, .option-list, .form-grid, .model-grid, .visual-grid { grid-template-columns: 1fr !important; }
  .main-category-card { min-height: 0; padding: 20px; }
  .main-category-card h2 { font-size: 25px; }
  .main-category-card p, .work-card-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .work-card-visual { aspect-ratio: 4 / 3; min-height: 0; }
  .category-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .category-tabs button { flex: 0 0 auto; scroll-snap-align: start; }
  .video-player, .video-player iframe, .video-player video { min-height: 0 !important; aspect-ratio: 16 / 9; height: auto !important; }
  .video-card { grid-template-columns: 1fr !important; }
  .video-card-thumb { aspect-ratio: 16 / 9; min-height: 0; }
  .recent-inquiry-list, .inquiry-list { display: grid; gap: 12px; }
  table { min-width: 760px; }
  .admin-center { grid-template-columns: 1fr !important; grid-template-rows: auto auto 1fr !important; }
  .admin-sidebar { position: static !important; height: auto !important; display: flex !important; overflow-x: auto !important; gap: 8px; padding: 10px !important; }
  .admin-main { padding: 16px !important; }
  .manager-card { grid-template-columns: 1fr !important; gap: 14px !important; }
  .card-side { max-width: none !important; }
  .admin-thumb-card { min-height: 190px !important; }
  .work-modal { padding: 10px; align-items: start; }
  .work-modal-panel { width: 95vw; max-height: 94vh; border-radius: 10px; }
  .work-modal-layout { padding: 10px 14px 18px; gap: 16px; }
  .work-modal-main { min-height: 260px; }
  .work-modal-main img { max-height: 58vh; }
  .work-modal-info h2 { font-size: 24px; }
  .work-modal-thumbs { display: flex; overflow-x: auto; grid-template-columns: none; padding-bottom: 4px; }
  .work-modal-thumbs button { flex: 0 0 74px; width: 74px; height: 74px; }
  .work-modal-close { width: calc(100% - 24px); margin: 12px; }
  .quick-sign { position: fixed; right: 6px !important; bottom: 8px; top: auto !important; width: 92px !important; transform: scale(.82); transform-origin: right bottom; }
}

@media (max-width: 480px) {
  .wrap { width: min(100% - 24px, 1180px); }
  header .brand-logo { max-width: 78px; }
  header .nav-call { font-size: 12px; padding: 0 9px; }
  .hero h1, .sub-hero h1 { font-size: 30px; }
  .section-title, .admin-page-head h2 { font-size: 26px; }
  .work-card-body, .sign-group-card, .strength-grid article { padding: 16px; }
  .work-photo-count { top: 8px; right: 8px; }
  .quick-sign { transform: scale(.74); }
  .admin-topbar h1 { font-size: 18px; }
}

/* 2026-05 contact touch target fix */
.contact-form .btn, .contact-layout .btn, form .btn.primary { min-height: 44px !important; }


/* 2026-05 recent inquiries restore */
.inquiry-section { padding: 70px 0; background: #f5f7fb; }
.inquiry-layout { display: grid; grid-template-columns: minmax(260px, .38fr) minmax(0, .62fr); gap: 22px; align-items: start; }
.inquiry-copy { position: sticky; top: 110px; }
.inquiry-copy .lead { margin: 12px 0 22px; color: #5c554a; line-height: 1.75; font-weight: 700; }
.recent-inquiries { display: grid; gap: 10px; min-width: 0; transition: transform .5s ease; }
.recent-inquiries.ticker-ready { max-height: 430px; overflow: hidden; transform: translateY(var(--ticker-offset, 0)); }
.inquiry-card { position: relative; display: grid; grid-template-columns: 108px 1fr; gap: 16px; align-items: center; min-height: 72px; padding: 16px 18px; border: 1px solid #e6dfd2; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(28,25,19,.07); }
.inquiry-card time { display: block; margin-bottom: 4px; color: #837b6e; font-size: 13px; font-weight: 900; }
.inquiry-card strong { display: block; color: #1c1913; font-size: 14px; }
.inquiry-card h3 { margin: 4px 0 0; color: #1c1913; font-size: 17px; line-height: 1.35; word-break: keep-all; }
.status-badge { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 1000; white-space: nowrap; }
.status-badge.received { background: #1c1913; }
.status-badge.consulting { background: #0f9f6e; }
.status-badge.estimating { background: #9a8358; }
.status-badge.drawing { background: #7a7367; }
.status-badge.done { background: #837b6e; }
.inquiry-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.inquiry-stats article, .inquiry-auto-note { min-height: 92px; padding: 18px; border: 1px solid #e6dfd2; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(28,25,19,.06); }
.inquiry-stats b { display: block; color: #837b6e; font-size: 13px; }
.inquiry-stats strong { display: block; margin-top: 8px; color: #1c1913; font-size: 30px; line-height: 1; }
.inquiry-auto-note { grid-column: 1 / -1; display: grid; place-items: center; color: #837b6e; font-weight: 900; text-align: center; }

@media (max-width: 980px) {
  .inquiry-layout { grid-template-columns: 1fr; }
  .inquiry-copy { position: static; }
  .inquiry-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .inquiry-section { padding: 46px 0; }
  .inquiry-copy .btn { width: 100%; }
  .inquiry-card { grid-template-columns: 1fr; gap: 9px; min-height: 0; padding: 15px; }
  .status-badge { justify-self: start; }
  .inquiry-card h3 { font-size: 16px; }
  .inquiry-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inquiry-stats article { min-height: 84px; padding: 15px; }
  .inquiry-stats strong { font-size: 26px; }
  .recent-inquiries.ticker-ready { max-height: none; overflow: visible; transform: none !important; }
}


/* 2026-05 hero layout alignment */
.nav-call {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
.hero {
  min-height: clamp(620px, 78vh, 760px);
  display: flex;
  align-items: center;
  padding-top: 104px;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: calc(clamp(620px, 78vh, 760px) - 104px);
}
.hero-content > div {
  width: min(680px, 100%);
  padding: 36px 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(22,19,16,.42), rgba(22,19,16,.22));
  backdrop-filter: blur(7px);
  box-shadow: 0 28px 80px rgba(0,0,0,.18);
}
.hero-content h1 {
  color: #fff;
}
.hero-content .hero-copy {
  max-width: 620px;
  color: rgba(255,255,255,.88);
}
.hero-actions {
  align-items: center;
}
.hero-phone {
  border-color: rgba(255,255,255,.16);
  background: rgba(28,25,19,.92);
  color: #fff;
  border-radius: 12px;
  font-weight: 1000;
}

@media (min-width: 1200px) {
  .hero-content {
    padding-left: 150px;
  }
}

@media (max-width: 1024px) {
  .hero {
    min-height: 640px;
  }
  .hero-content {
    min-height: calc(640px - 104px);
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 560px;
    padding-top: 74px;
  }
  .hero-content {
    min-height: calc(560px - 74px);
  }
  .hero-content > div {
    padding: 24px;
    border-radius: 18px;
  }
  .hero-content .hero-copy {
    margin-top: 16px;
    font-size: 15px;
  }
  .hero-actions {
    gap: 10px;
    margin-top: 22px;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .quick-sign {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hero-content > div {
    padding: 20px;
  }
}


/* 2026-05 hero quick tablet guard */
@media (max-width: 1199px) and (min-width: 769px) {
  .quick-sign {
    display: none !important;
  }
}


/* 2026-05 nav overlap and quick side fix */
@media (min-width: 769px) {
  header .nav {
    padding-right: 166px;
  }
  header .nav-call {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
  }
  header .nav nav {
    padding-right: 118px;
  }
}

@media (min-width: 1200px) {
  .quick-sign {
    left: auto !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    transform-origin: right center !important;
  }
  .hero-content {
    padding-left: 0;
    padding-right: 150px;
  }
}

@media (max-width: 1199px) and (min-width: 769px) {
  header .nav {
    padding-right: 150px;
  }
  header .nav nav {
    padding-right: 104px;
    column-gap: clamp(22px, 3vw, 44px);
  }
  .quick-sign {
    display: none !important;
  }
}


/* 2026-05 nav menu anti-overlap */
@media (min-width: 769px) {
  header .nav nav {
    grid-template-columns: repeat(3, max-content) minmax(160px, 210px) repeat(3, max-content) !important;
    column-gap: clamp(18px, 2.8vw, 52px) !important;
    justify-content: center !important;
    padding-right: 132px !important;
  }
  header .nav nav a:nth-child(n) {
    transform: none !important;
  }
  header .nav nav a:nth-child(4) {
    grid-column: 5;
  }
  header .nav nav a:nth-child(5) {
    grid-column: 6;
  }
  header .nav nav a:nth-child(6) {
    grid-column: 7;
  }
}

@media (max-width: 1180px) and (min-width: 769px) {
  header .nav nav {
    grid-template-columns: repeat(3, max-content) minmax(130px, 170px) repeat(3, max-content) !important;
    column-gap: 18px !important;
    font-size: 15px !important;
  }
}


/* 2026-05 centered logo and inquiry board */
@media (min-width: 769px) {
  header .nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 172px minmax(0, 1fr) !important;
    padding-left: 0 !important;
    padding-right: 150px !important;
  }
  header .brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 172px !important;
    min-width: 172px !important;
    justify-content: center !important;
    z-index: 9 !important;
  }
  header .brand-logo {
    width: 172px !important;
    height: 82px !important;
    object-position: center !important;
  }
  header .nav nav {
    grid-column: 1 / 4 !important;
    display: grid !important;
    grid-template-columns: repeat(3, max-content) minmax(172px, 230px) repeat(3, max-content) !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: clamp(18px, 3.1vw, 58px) !important;
    padding-right: 132px !important;
  }
  header .nav nav a:nth-child(n) {
    transform: none !important;
  }
  header .nav nav a:nth-child(4) { grid-column: 5 !important; }
  header .nav nav a:nth-child(5) { grid-column: 6 !important; }
  header .nav nav a:nth-child(6) { grid-column: 7 !important; }
}

@media (max-width: 1180px) and (min-width: 769px) {
  header .nav {
    padding-right: 138px !important;
  }
  header .nav nav {
    grid-template-columns: repeat(3, max-content) minmax(142px, 174px) repeat(3, max-content) !important;
    column-gap: 17px !important;
    font-size: 15px !important;
    padding-right: 116px !important;
  }
  header .brand,
  header .brand-logo {
    width: 142px !important;
    min-width: 142px !important;
  }
  header .brand-logo {
    height: 70px !important;
  }
}

.inquiry-section {
  background:
    linear-gradient(180deg, #f6f8fc 0%, #f2ede4 100%);
}
.inquiry-layout {
  grid-template-columns: minmax(270px, .34fr) minmax(0, .66fr);
}
.recent-inquiries {
  position: relative;
  padding: 54px 16px 16px;
  border: 1px solid #e6dfd2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(28,25,19,.09);
}
.recent-inquiries::before {
  content: '실시간 상담 게시판';
  position: absolute;
  left: 16px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: #1c1913;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
}
.recent-inquiries::after {
  content: '개인정보 제외 표시';
  position: absolute;
  right: 16px;
  top: 18px;
  color: #837b6e;
  font-size: 12px;
  font-weight: 900;
}
.inquiry-card {
  grid-template-columns: 96px 1fr;
  min-height: 64px;
  padding: 13px 14px;
  border-radius: 9px;
  box-shadow: none;
}
.inquiry-card + .inquiry-card {
  margin-top: 0;
}
.inquiry-card h3 {
  font-size: 16px;
}
.inquiry-stats {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e6dfd2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(28,25,19,.07);
}
.inquiry-stats article,
.inquiry-auto-note {
  min-height: 78px;
  box-shadow: none;
  background: #faf8f3;
}
.inquiry-stats article {
  border-left: 4px solid #1c1913;
}

@media (max-width: 768px) {
  header .brand {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
  }
  header .brand-logo {
    width: auto !important;
    height: auto !important;
  }
  .recent-inquiries {
    padding: 52px 12px 12px;
  }
  .recent-inquiries::after {
    display: none;
  }
  .inquiry-card {
    grid-template-columns: 1fr;
  }
}


/* 2026-05 final logo center and mobile inquiry fix */
@media (min-width: 769px) {
  header .brand {
    position: fixed !important;
    left: 50vw !important;
    top: 11px !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 768px) {
  .inquiry-layout {
    grid-template-columns: 1fr !important;
  }
  .recent-inquiries {
    width: 100% !important;
  }
}


/* 2026-05 final nav alignment */
@media (min-width: 769px) {
  header .nav {
    position: relative !important;
    display: block !important;
    height: 104px !important;
    padding: 0 !important;
  }
  header .brand {
    position: fixed !important;
    left: 50vw !important;
    top: 11px !important;
    width: 172px !important;
    min-width: 172px !important;
    height: 82px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 12 !important;
  }
  header .brand-logo {
    width: 172px !important;
    height: 82px !important;
  }
  header .nav nav {
    position: absolute !important;
    inset: 0 150px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, max-content) minmax(250px, 310px) repeat(3, max-content) !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: clamp(20px, 2.6vw, 48px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  header .nav nav a {
    transform: none !important;
    grid-column: auto !important;
    white-space: nowrap !important;
  }
  header .nav nav a:nth-child(4) {
    grid-column: 5 !important;
  }
  header .nav nav a:nth-child(5) {
    grid-column: 6 !important;
  }
  header .nav nav a:nth-child(6) {
    grid-column: 7 !important;
  }
  header .nav-call {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 13 !important;
  }
}

@media (max-width: 1180px) and (min-width: 769px) {
  header .brand,
  header .brand-logo {
    width: 150px !important;
    min-width: 150px !important;
    height: 74px !important;
  }
  header .brand {
    top: 15px !important;
  }
  header .nav nav {
    right: 140px !important;
    grid-template-columns: repeat(3, max-content) minmax(230px, 260px) repeat(3, max-content) !important;
    column-gap: 20px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 980px) and (min-width: 769px) {
  header .nav-call {
    display: none !important;
  }
  header .nav nav {
    right: 0 !important;
    grid-template-columns: repeat(3, max-content) minmax(210px, 240px) repeat(3, max-content) !important;
    column-gap: 16px !important;
    font-size: 14px !important;
  }
}


/* 2026-05 hero video visible caption */
.hero video {
  opacity: .82 !important;
  filter: none !important;
}
.hero::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.08) 76%),
    linear-gradient(0deg, rgba(0,0,0,.38), transparent 48%) !important;
}
.hero-content {
  align-items: flex-end !important;
  padding-bottom: clamp(46px, 7vh, 78px);
}
.hero-content > div {
  width: min(620px, 100%) !important;
  padding: 28px 32px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(22,19,16,.34), rgba(22,19,16,.12)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(2px) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.16) !important;
}
.hero-content h1 {
  font-size: clamp(40px, 5.5vw, 70px) !important;
}
.hero-content .hero-copy {
  font-size: clamp(16px, 1.45vw, 19px) !important;
  color: rgba(255,255,255,.9) !important;
}
.hero-actions {
  margin-top: 24px !important;
}

@media (min-width: 1200px) {
  .hero-content {
    padding-left: 0 !important;
    padding-right: 190px !important;
  }
}

@media (max-width: 768px) {
  .hero video {
    opacity: .76 !important;
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.68)) !important;
  }
  .hero-content {
    align-items: flex-end !important;
    padding-bottom: 28px;
  }
  .hero-content > div {
    padding: 20px !important;
    background: rgba(22,19,16,.28) !important;
    backdrop-filter: blur(1px) !important;
  }
}


/* 2026-05 hero no heavy box */
.hero-content > div {
  width: min(600px, 100%) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.hero-content h1,
.hero-content .hero-copy,
.hero-content .eyebrow {
  text-shadow: 0 3px 18px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.55);
}
.hero-actions .btn {
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.hero-actions .btn.ghost {
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.58) !important;
}
.hero-phone {
  background: rgba(28,25,19,.82) !important;
}


/* 2026-05 hero soft text bands */
.hero-content .eyebrow,
.hero-content h1,
.hero-content .hero-copy {
  width: fit-content;
  max-width: 100%;
  padding-left: .18em;
  padding-right: .18em;
  border-radius: 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.15), rgba(0,0,0,0));
}
.hero-content .eyebrow {
  padding-top: 4px;
  padding-bottom: 4px;
  background: rgba(0,0,0,.18);
}
.hero-content h1 {
  padding-top: 6px;
  padding-bottom: 8px;
}
.hero-content .hero-copy {
  padding: 8px 10px;
  background: rgba(0,0,0,.2);
}

@media (max-width: 768px) {
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-copy {
    background: rgba(0,0,0,.24);
  }
}


/* 2026-05 video only hero and system section */
.hero.hero-video-only {
  min-height: clamp(560px, 72vh, 760px) !important;
  display: block !important;
  padding-top: 104px !important;
  background: #141210 !important;
}
.hero.hero-video-only video {
  opacity: 1 !important;
  filter: none !important;
}
.hero.hero-video-only::before,
.hero.hero-video-only::after {
  display: none !important;
}
.hero.hero-video-only .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
  pointer-events: none;
}
.hero.hero-video-only .hero-content {
  display: none !important;
}
.system-section {
  position: relative;
  overflow: hidden;
  padding: 74px 0;
  background: linear-gradient(135deg, #ffffff 0%, #f4f7fb 56%, #f2ede4 100%);
}
.system-section::before {
  content: "";
  position: absolute;
  left: -20%;
  top: 0;
  width: 18%;
  height: 100%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(28,25,19,.18), transparent);
  animation: systemSweep 5.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes systemSweep {
  0%, 38% { left: -24%; opacity: 0; }
  50% { opacity: 1; }
  78%, 100% { left: 116%; opacity: 0; }
}
.system-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 28px;
  align-items: center;
}
.system-copy .eyebrow {
  color: #1c1913;
}
.system-title {
  margin: 0 0 16px;
  color: #1c1913;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.055em;
}
.metal-sweep {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-bottom: 16px;
  color: #1c1913;
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.06em;
}
.metal-sweep::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 42%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation: textSweep 4.2s ease-in-out infinite;
}
@keyframes textSweep {
  0%, 42% { left: -60%; }
  72%, 100% { left: 120%; }
}
.system-copy p {
  max-width: 560px;
  color: #5c554a;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 800;
  word-break: keep-all;
}
.system-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.system-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.system-card-grid article {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  padding: 24px;
  border: 1px solid #e6dfd2;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 42px rgba(28,25,19,.08);
}
.system-card-grid article::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -80%;
  width: 48%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transition: left .55s ease;
}
.system-card-grid article:hover::after {
  left: 120%;
}
.system-card-grid b {
  display: block;
  margin-bottom: 10px;
  color: #1c1913;
  font-size: 22px;
  letter-spacing: -.035em;
}
.system-card-grid span {
  color: #837b6e;
  line-height: 1.65;
  font-weight: 700;
}
.quick-phone strong {
  font-size: 21px !important;
  letter-spacing: .02em !important;
}
.quick-tags {
  font-size: 14px !important;
  gap: 7px !important;
}
.quick-online span::before {
  content: "공장" !important;
}

@media (max-width: 980px) {
  .system-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero.hero-video-only {
    min-height: 56vh !important;
    padding-top: 74px !important;
  }
  .system-section {
    padding: 48px 0;
  }
  .system-card-grid {
    grid-template-columns: 1fr;
  }
  .system-actions .btn {
    width: 100%;
  }
  .quick-sign {
    display: none !important;
  }
}


/* 2026-05 premium system and compact video */
.system-section {
  background:
    radial-gradient(circle at 14% 18%, rgba(28,25,19,.16), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(182,172,156,.24), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #f2ede4 48%, #f2ede4 100%) !important;
  border-top: 1px solid rgba(255,255,255,.9);
  border-bottom: 1px solid #e6dfd2;
}
.system-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(28,25,19,.55), rgba(255,255,255,.92), transparent);
}
.system-title {
  text-transform: none;
  text-shadow: 0 8px 24px rgba(28,25,19,.08);
}
.metal-sweep {
  color: #221f1a !important;
  text-shadow: 0 2px 0 #fff, 0 14px 34px rgba(28,25,19,.2);
}
.metal-sweep::before {
  content: "국내 유일";
  display: inline-block;
  margin-right: .22em;
  color: #1c1913;
  text-shadow: 0 8px 22px rgba(28,25,19,.24);
}
.metal-sweep {
  font-size: 0 !important;
}
.metal-sweep::after {
  z-index: 2;
}
.metal-sweep span { display: none; }
.metal-sweep {
  --metal-text: "절곡집 직접운영";
}
.metal-sweep::marker { content: ""; }
.metal-sweep {
  letter-spacing: 0;
}
.metal-sweep::selection { background: rgba(28,25,19,.18); }
.metal-sweep {
  font-size: clamp(32px, 4.6vw, 62px) !important;
}
.metal-sweep { color: transparent !important; }
.metal-sweep {
  background: linear-gradient(180deg, #faf8f3 0%, #1c1913 22%, #4a443b 52%, #221f1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.metal-sweep::before {
  font-size: clamp(30px, 4vw, 54px);
  background: none;
  -webkit-background-clip: initial;
}
.metal-sweep {
  font-weight: 1000;
}
.system-card-grid article {
  border: 1px solid rgba(122,115,103,.38) !important;
  border-left: 5px solid #1c1913 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,248,252,.86)),
    radial-gradient(circle at 88% 12%, rgba(28,25,19,.1), transparent 32%) !important;
  box-shadow: 0 22px 54px rgba(28,25,19,.12), inset 0 1px 0 rgba(255,255,255,.88) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.system-card-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(28,25,19,.62) !important;
  box-shadow: 0 28px 68px rgba(28,25,19,.16), 0 0 0 1px rgba(28,25,19,.08) !important;
}
.system-card-grid article:nth-child(1)::before,
.system-card-grid article:nth-child(2)::before,
.system-card-grid article:nth-child(3)::before,
.system-card-grid article:nth-child(4)::before {
  position: absolute;
  right: 18px;
  top: 16px;
  color: rgba(28,25,19,.18);
  font-size: 32px;
  font-weight: 1000;
}
.system-card-grid article:nth-child(1)::before { content: "01"; }
.system-card-grid article:nth-child(2)::before { content: "02"; }
.system-card-grid article:nth-child(3)::before { content: "03"; }
.system-card-grid article:nth-child(4)::before { content: "04"; }
.system-actions .btn {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  box-shadow: 0 16px 34px rgba(28,25,19,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.system-actions .btn::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -70%;
  width: 44%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transition: left .45s ease;
}
.system-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(28,25,19,.18);
}
.system-actions .btn:hover::after {
  left: 120%;
}
.video-layout {
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, .8fr) !important;
  align-items: start;
}
.video-feature {
  min-width: 0;
}
.video-feature-info {
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
.video-feature-info h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 22px;
}
.video-description {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-feature-info time {
  display: block;
  margin-top: 8px;
  color: #cfc6b6;
  font-size: 13px;
  font-weight: 1000;
}
.video-detail-button {
  min-height: 36px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: #1c1913;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
}
.video-card .video-detail-button {
  min-height: 32px;
  background: #1c1913;
}
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  padding: 24px;
}
.video-modal.open {
  display: grid;
  place-items: center;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22,19,16,.68);
  backdrop-filter: blur(4px);
}
.video-modal-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 92vw);
  max-height: 86vh;
  overflow: auto;
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.video-modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: #1c1913;
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
}
.video-modal-panel h2 {
  margin: 8px 56px 10px 0;
  color: #1c1913;
  font-size: 28px;
}
.video-modal-panel time {
  display: block;
  color: #1c1913;
  font-weight: 1000;
  margin-bottom: 18px;
}
.video-modal-panel [data-video-description] {
  white-space: pre-line;
  color: #5c554a;
  line-height: 1.75;
  margin-bottom: 20px;
}

@media (max-width: 980px) {
  .video-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .system-card-grid {
    grid-template-columns: 1fr !important;
  }
  .metal-sweep,
  .metal-sweep::before {
    font-size: 34px !important;
  }
  .video-feature-info {
    padding: 14px;
  }
  .video-modal {
    padding: 12px;
  }
  .video-modal-panel {
    width: 92vw;
    padding: 22px 18px;
  }
}


/* 2026-05 system word point final */
.metal-sweep {
  display: flex !important;
  flex-wrap: wrap;
  gap: .18em .28em;
  color: #221f1a !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
.metal-sweep::before {
  content: none !important;
}
.metal-sweep .point-blue,
.metal-sweep .point-heavy,
.metal-sweep .point-finish {
  display: inline-block !important;
  position: relative;
  z-index: 1;
}
.metal-sweep .point-blue {
  color: #1c1913;
  text-shadow: 0 10px 28px rgba(28,25,19,.25);
}
.metal-sweep .point-heavy {
  color: #221f1a;
  font-weight: 1000;
  transform: scale(1.03);
  text-shadow: 0 2px 0 #fff, 0 16px 30px rgba(28,25,19,.22);
}
.metal-sweep .point-finish {
  color: #2b2620;
  padding-right: .06em;
  background: linear-gradient(180deg, #faf8f3 0%, #2b2620 28%, #221f1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 대표 인터뷰형 회사소개 섹션 */
.about-interview {
  position: relative;
  overflow: hidden;
  padding: 96px 24px 64px;
  background:
    radial-gradient(circle at 82% 14%, rgba(92,85,74, .13), transparent 32%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 42%, #f2ede4 100%);
  border-top: 1px solid #f2ede4;
  color: #1c1913;
}
.about-interview::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(28,25,19, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.interview-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(380px, 1.02fr);
  gap: 44px;
  align-items: stretch;
}
.interview-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.interview-logo {
  width: 112px;
  margin-bottom: 18px;
}
.interview-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.interview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  color: #5c554a;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .14em;
}
.interview-eyebrow::after {
  content: '';
  width: min(230px, 34vw);
  height: 2px;
  background: linear-gradient(90deg, #5c554a, transparent);
}
.interview-title {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.08;
  font-weight: 1000;
  letter-spacing: -0.06em;
  color: #1c1913;
  text-shadow: 0 16px 36px rgba(28,25,19, .09);
}
.interview-title span {
  color: #3a352c;
}
.interview-lead {
  max-width: 640px;
  margin: 24px 0 28px;
  font-size: 19px;
  line-height: 1.75;
  font-weight: 800;
  color: #3a352c;
  word-break: keep-all;
}
.interview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(28,25,19, .16);
  box-shadow: 0 22px 48px rgba(22,19,16, .13);
}
.interview-stat {
  position: relative;
  min-height: 126px;
  padding: 24px 24px 22px 104px;
  background: linear-gradient(135deg, #3a352c, #5c554a);
  color: #fff;
  transition: transform .22s ease, filter .22s ease;
}
.interview-stat.dark {
  background: linear-gradient(135deg, #1c1913, #1c1913);
}
.interview-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 68%);
  transform: translateX(-125%);
  transition: transform .8s ease;
}
.interview-stat:hover {
  transform: translateY(-2px);
  filter: saturate(1.06);
}
.interview-stat:hover::before {
  transform: translateX(125%);
}
.stat-mark {
  position: absolute;
  left: 26px;
  top: 28px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 8px;
  font-size: 17px;
  font-weight: 1000;
  color: rgba(255,255,255,.92);
}
.interview-stat strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 52px;
  line-height: .95;
  font-weight: 1000;
  letter-spacing: -.035em;
}
.interview-stat em {
  font-style: normal;
  font-size: 18px;
  font-weight: 1000;
}
.interview-stat b {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.35;
  word-break: keep-all;
}
.interview-qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.qa-card {
  border: 1px solid #e6dfd2;
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 26px rgba(28,25,19, .055);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.qa-card:hover,
.qa-card[open] {
  border-color: rgba(92,85,74, .38);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(28,25,19, .1);
}
.qa-card summary {
  position: relative;
  min-height: 60px;
  padding: 18px 48px 16px 20px;
  cursor: pointer;
  list-style: none;
  color: #3a352c;
  font-size: 18px;
  font-weight: 1000;
  word-break: keep-all;
}
.qa-card summary::-webkit-details-marker {
  display: none;
}
.qa-card summary::before {
  content: 'Q.';
  margin-right: 8px;
  color: #5c554a;
}
.qa-card summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2ede4;
  color: #5c554a;
  font-weight: 1000;
}
.qa-card[open] summary::after {
  content: '-';
  background: #5c554a;
  color: #fff;
}
.qa-card p {
  margin: 0;
  padding: 0 20px 20px;
  color: #4a443b;
  font-size: 15px;
  line-height: 1.74;
  font-weight: 700;
  word-break: keep-all;
}
.qa-card p::before {
  content: 'A.';
  margin-right: 8px;
  color: #1c1913;
  font-weight: 1000;
}
.interview-visual {
  position: relative;
  min-width: 0;
}
.interview-photo {
  position: relative;
  overflow: hidden;
  height: 640px;
  margin: 0;
  border-radius: 8px;
  background: #221f1a;
  box-shadow: 0 30px 70px rgba(28,25,19, .2);
}
.interview-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.18), transparent 24%, transparent 72%, rgba(22,19,16, .24));
  pointer-events: none;
}
.interview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.interview-photo figcaption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 8px;
  background: rgba(22,19,16, .62);
  backdrop-filter: blur(10px);
  color: #fff;
}
.interview-photo figcaption b {
  font-size: 18px;
  font-weight: 1000;
}
.interview-photo figcaption span {
  color: #f2ede4;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}
.interview-services {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  padding: 22px 24px 24px;
  border: 1px solid rgba(207,198,182, .5);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(28,25,19, .94), rgba(58,53,44, .92));
  color: #fff;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
  transition: transform .22s ease, border-color .22s ease;
}
.interview-services:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.72);
}
.services-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  color: #f2ede4;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.services-head i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #9a9080, transparent);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.services-grid span {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #f8fbff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
}
.services-grid span::before {
  content: '';
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9a9080;
  box-shadow: 0 0 0 4px rgba(154,144,128, .14);
}
.services-grid span:last-child {
  grid-column: 1 / -1;
}
.interview-info {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1.25fr .8fr;
  gap: 18px;
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid #e6dfd2;
  border-radius: 8px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 38px rgba(28,25,19, .07);
}
.interview-info div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-right: 1px solid #e6dfd2;
}
.interview-info div:last-child {
  border-right: 0;
}
.interview-info b {
  flex: 0 0 auto;
  color: #3a352c;
  font-size: 15px;
  font-weight: 1000;
}
.interview-info span {
  color: #4a443b;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  word-break: keep-all;
}
.about-interview .reveal-item {
  opacity: 1;
  transform: translateY(0);
}
.about-interview.is-visible .reveal-item {
  animation: interviewFadeUp .62s ease both;
}
@keyframes interviewFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.about-interview.is-visible .reveal-item:nth-child(2) { transition-delay: .06s; }
.about-interview.is-visible .reveal-item:nth-child(3) { transition-delay: .12s; }
.about-interview.is-visible .reveal-item:nth-child(4) { transition-delay: .18s; }
.about-interview.is-visible .reveal-item:nth-child(5) { transition-delay: .24s; }
.about-interview.is-visible .reveal-item:nth-child(6) { transition-delay: .3s; }

@media (max-width: 1024px) {
  .about-interview {
    padding: 78px 18px 50px;
  }
  .interview-shell {
    grid-template-columns: 1fr;
  }
  .interview-photo {
    height: 560px;
  }
  .interview-info {
    grid-template-columns: 1fr;
  }
  .interview-info div {
    border-right: 0;
    border-bottom: 1px solid #e6dfd2;
    padding-bottom: 12px;
  }
  .interview-info div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 768px) {
  .company-nav-inner a[href="#interview"] {
    display: inline-flex;
  }
  .interview-logo {
    width: 86px;
  }
  .interview-title {
    font-size: 36px;
  }
  .interview-lead {
    font-size: 16px;
  }
  .interview-stats,
  .interview-qa,
  .services-grid {
    grid-template-columns: 1fr;
  }
  .interview-stat {
    padding-left: 92px;
  }
  .interview-photo {
    height: auto;
    aspect-ratio: 4 / 3.15;
  }
  .interview-services {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 14px;
  }
  .interview-info {
    padding: 18px;
  }
}
@media (max-width: 480px) {
  .about-interview {
    padding: 58px 14px 38px;
  }
  .interview-eyebrow {
    font-size: 12px;
    letter-spacing: .1em;
  }
  .interview-eyebrow::after {
    width: 90px;
  }
  .interview-title {
    font-size: 31px;
  }
  .interview-stat {
    min-height: 112px;
    padding: 21px 18px 20px 78px;
  }
  .stat-mark {
    left: 18px;
    top: 25px;
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  .interview-stat strong {
    font-size: 42px;
  }
  .qa-card summary {
    font-size: 16px;
    padding-right: 44px;
  }
  .interview-info div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}



@media (max-width: 768px) {
  .interview-photo figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    flex-direction: column;
    align-items: flex-start;
  }
  .interview-photo figcaption span {
    text-align: left;
  }
}

/* 회사소개 페이지 스크롤/hover 인터랙션 */
.company-page .scroll-reveal,
.company-page .reveal-up,
.company-page .reveal-left,
.company-page .reveal-right {
  opacity: 0;
  transition:
    opacity .78s cubic-bezier(.22, 1, .36, 1),
    transform .78s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.company-page .reveal-up,
.company-page .scroll-reveal {
  transform: translateY(30px);
}
.company-page .reveal-left {
  transform: translateX(-34px);
}
.company-page .reveal-right {
  transform: translateX(34px);
}
.company-page .is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}
.company-page .reveal-delay-1 { transition-delay: .08s; }
.company-page .reveal-delay-2 { transition-delay: .16s; }
.company-page .reveal-delay-3 { transition-delay: .24s; }
.company-page .reveal-delay-4 { transition-delay: .32s; }
.company-page .reveal-delay-5 { transition-delay: .4s; }
.company-page .reveal-delay-6 { transition-delay: .48s; }

.company-nav a.is-active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 22px rgba(92,85,74, .18);
}

.company-about .company-visual,
.interview-photo,
.map-card,
.info-card,
.photo-card,
.process-card,
.equipment-card,
.process-point,
.qa-card,
.interview-stat {
  backface-visibility: hidden;
}
.company-about .company-visual,
.interview-photo,
.map-card {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.company-about .company-visual:hover,
.interview-photo:hover,
.map-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 76px rgba(28,25,19, .18);
}
.interview-photo img,
.photo-card .photo,
.map-fallback {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .28s ease;
}
.interview-photo:hover img {
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.03);
}
.interview-photo:hover figcaption {
  background: rgba(22,19,16, .74);
  border-color: rgba(255, 255, 255, .52);
}
.interview-photo figcaption,
.company-visual-panel,
.map-caption {
  transition: background .28s ease, border-color .28s ease, transform .28s ease;
}

.qa-card {
  will-change: transform;
}
.qa-card:hover {
  transform: translateY(-6px);
  border-color: rgba(92,85,74, .45);
  box-shadow: 0 18px 40px rgba(28,25,19, .12);
}
.qa-card:hover summary {
  color: #5c554a;
}
.qa-card summary::after {
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.qa-card:hover summary::after {
  transform: rotate(90deg);
}
.qa-card[open]:hover summary::after {
  transform: rotate(180deg);
}

.process-track::after {
  content: '';
  position: absolute;
  left: 7%;
  right: 93%;
  top: 38px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #cfc6b6);
  z-index: 0;
  transition: right 1.05s cubic-bezier(.22, 1, .36, 1);
}
.process-track.is-revealed::after {
  right: 7%;
}
.process-card {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.process-card:hover {
  transform: translateY(-7px);
  border-color: rgba(92,85,74, .35);
  box-shadow: 0 24px 50px rgba(28,25,19, .13);
}
.process-card:hover .process-badge {
  transform: scale(1.08);
  box-shadow: 0 12px 24px rgba(92,85,74, .34);
}
.process-badge,
.equipment-icon {
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.equipment-card {
  position: relative;
  overflow: hidden;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.equipment-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.12) 46%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .74s ease;
}
.equipment-card:hover {
  transform: translateY(-7px);
  border-color: rgba(154,144,128, .5);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .24), 0 0 0 1px rgba(154,144,128, .12) inset;
  background: rgba(255,255,255,.105);
}
.equipment-card:hover::after {
  transform: translateX(120%);
}
.equipment-card:hover .equipment-icon {
  filter: brightness(1.16);
  transform: translateY(-2px) scale(1.04);
}

.photo-card {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.photo-card:hover {
  transform: translateY(-6px);
  border-color: rgba(92,85,74, .28);
  box-shadow: 0 22px 46px rgba(28,25,19, .13);
}
.photo-card:hover .photo {
  transform: scale(1.035);
  filter: saturate(1.06);
}
.equipment-tabs a {
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.equipment-tabs a:hover,
.equipment-tabs a.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(92,85,74, .16);
}

.map-card:hover .map-caption {
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.82));
}
.info-card {
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(92,85,74, .2);
  background: #fff;
  box-shadow: 0 18px 38px rgba(28,25,19, .08);
}
.link-buttons a,
.cta a,
.company-nav a,
.btn,
.phone {
  position: relative;
  overflow: hidden;
}
.link-buttons a::after,
.cta a::after,
.btn::after,
.phone::after {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg);
  transition: left .62s ease;
  pointer-events: none;
}
.link-buttons a:hover::after,
.cta a:hover::after,
.btn:hover::after,
.phone:hover::after {
  left: 130%;
}
.link-buttons a:hover,
.cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(28,25,19, .13);
}

@media (max-width: 768px) {
  .company-page .reveal-left,
  .company-page .reveal-right {
    transform: translateY(24px);
  }
  .company-page .is-revealed {
    transform: translate(0, 0);
  }
  .process-track::after {
    display: none;
  }
  .company-about .company-visual:hover,
  .interview-photo:hover,
  .map-card:hover,
  .process-card:hover,
  .equipment-card:hover,
  .photo-card:hover,
  .info-card:hover,
  .qa-card:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .company-page *,
  .company-page *::before,
  .company-page *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .company-page .scroll-reveal,
  .company-page .reveal-up,
  .company-page .reveal-left,
  .company-page .reveal-right {
    opacity: 1 !important;
  }
}

/* 회사소개 대표 인터뷰 가로형 로고 */
.about-interview .interview-logo {
  width: min(360px, 100%);
  margin-bottom: 22px;
}
.about-interview .interview-logo img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .about-interview .interview-logo {
    width: min(280px, 100%);
  }
}

/* about 페이지 가로형 로고 실제 적용 */
body .brand-logo-wide {
  width: 228px;
  height: 64px;
  display: block;
  object-fit: contain;
}
.about-interview .interview-wide-logo {
  width: min(360px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(28,25,19,.08));
}
.info-wide-logo {
  width: 210px;
  height: auto;
  display: block;
}
.info-card .logo-box:has(.info-wide-logo) {
  width: 220px;
  min-height: 90px;
}
.info-card:has(.info-wide-logo) {
  grid-template-columns: 220px 1fr;
}
@media (max-width: 1024px) {
  body .brand-logo-wide {
    width: 190px;
    height: 58px;
  }
}
@media (max-width: 768px) {
  body .brand-logo-wide {
    width: 148px;
    height: 48px;
  }
  .about-interview .interview-wide-logo {
    width: min(290px, 100%);
  }
  .info-card:has(.info-wide-logo) {
    grid-template-columns: 1fr;
  }
  .info-card .logo-box:has(.info-wide-logo) {
    width: min(240px, 100%);
    min-height: auto;
    justify-content: flex-start;
  }
  .info-wide-logo {
    width: min(230px, 100%);
  }
}

/* 가로형 로고 비율 최종 고정 */
header .brand .brand-logo-wide.brand-logo {
  width: 260px !important;
  min-width: 260px !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: 980 / 260;
}
@media (max-width: 1024px) {
  header .brand .brand-logo-wide.brand-logo {
    width: 210px !important;
    min-width: 210px !important;
  }
}
@media (max-width: 768px) {
  header .brand .brand-logo-wide.brand-logo {
    width: 168px !important;
    min-width: 168px !important;
  }
}

/* 재성샤링절곡 첨부 로고 스타일 */
.js-shearing-logo {
  width: 220px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(28,25,19,.08));
}
.info-card .logo-box:has(.js-shearing-logo) {
  width: 230px;
  min-height: 110px;
}
.info-card:has(.js-shearing-logo) {
  grid-template-columns: 230px 1fr;
}
@media (max-width: 768px) {
  .info-card:has(.js-shearing-logo) {
    grid-template-columns: 1fr;
  }
  .info-card .logo-box:has(.js-shearing-logo) {
    width: min(240px, 100%);
    min-height: auto;
    justify-content: flex-start;
  }
  .js-shearing-logo {
    width: min(230px, 100%);
  }
}

/* 네이버 지도 실패 시 백업 안내 카드 */
.naver-map {
  width: 100%;
  height: 360px;
  min-height: 360px;
  background: #f4f0e8;
}
.map-backup {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px;
  text-align: center;
  background: linear-gradient(135deg, #faf8f3, #f2ede4);
  color: #4a443b;
  font-weight: 800;
  line-height: 1.55;
}
.map-backup strong {
  color: #221f1a;
  font-size: 20px;
  font-weight: 1000;
}
.map-backup span {
  font-size: 16px;
  word-break: keep-all;
}
.map-backup small {
  color: #837b6e;
  font-size: 13px;
}
.map-card.is-map-loaded .map-backup {
  display: none;
}

/* 실제 업로드 로고 PNG 공통 표시 */
header .brand img.brand-logo,
header .brand-logo.header-logo-img,
header .brand-logo {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  max-width: 260px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  display: block;
}
.interview-logo img,
.interview-wide-logo {
  width: min(360px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block;
}
.logo-box,
.location-logo {
  overflow: visible !important;
}
.logo-box img,
.location-logo img,
.info-wide-logo,
.js-shearing-logo {
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 82px !important;
  object-fit: contain !important;
  display: block;
}
.info-card .logo-box {
  width: 210px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
.info-card:has(.info-wide-logo),
.info-card:has(.js-shearing-logo) {
  grid-template-columns: 230px 1fr;
}
@media (max-width: 1024px) {
  header .brand img.brand-logo,
  header .brand-logo.header-logo-img,
  header .brand-logo {
    max-width: 220px !important;
    max-height: 50px !important;
  }
}
@media (max-width: 768px) {
  header .brand img.brand-logo,
  header .brand-logo.header-logo-img,
  header .brand-logo {
    max-width: 168px !important;
    max-height: 42px !important;
  }
  .interview-logo img,
  .interview-wide-logo {
    width: min(290px, 100%) !important;
  }
  .info-card:has(.info-wide-logo),
  .info-card:has(.js-shearing-logo) {
    grid-template-columns: 1fr;
  }
  .info-card .logo-box {
    width: min(240px, 100%);
    min-height: 96px;
    justify-content: flex-start;
  }
  .logo-box img,
  .location-logo img,
  .info-wide-logo,
  .js-shearing-logo {
    max-width: 190px !important;
    max-height: 78px !important;
  }
}

/* 헤더 로고 확대, 회사소개 sticky 메뉴, 퀵메뉴 축소 최종 정리 */
header {
  z-index: 100 !important;
}
header .nav {
  min-height: 132px !important;
  height: 132px !important;
}
header .brand img.brand-logo,
header .brand-logo.header-logo-img,
header .brand-logo {
  max-height: 108px !important;
  max-width: 360px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.company-nav {
  position: sticky !important;
  top: 132px !important;
  z-index: 90 !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(28,25,19,.08) !important;
  box-shadow: 0 8px 24px rgba(28,25,19,.06) !important;
}
.company-nav-inner {
  max-width: 1180px !important;
  padding: 10px 20px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.company-nav a {
  min-height: 38px !important;
  padding: 0 15px !important;
}
.company-nav a.is-active {
  background: var(--blue) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(92,85,74,.18) !important;
}
.company-page section[id],
#about,
#interview,
#process,
#equipment,
#portfolio,
#location {
  scroll-margin-top: 190px !important;
}
body .quick-sign {
  position: fixed !important;
  left: auto !important;
  right: 14px !important;
  top: 176px !important;
  bottom: auto !important;
  width: 84px !important;
  transform: none !important;
  transform-origin: right top !important;
  z-index: 70 !important;
  border-radius: 6px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.22) !important;
}
body .quick-sign a {
  min-height: 32px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
body .quick-phone {
  gap: 3px !important;
  padding: 9px 5px 8px !important;
}
body .quick-icon {
  font-size: 16px !important;
}
body .quick-phone b {
  font-size: 11px !important;
}
body .quick-phone strong {
  font-size: 16px !important;
  line-height: 1.04 !important;
  letter-spacing: .01em !important;
}
body .quick-phone small {
  font-size: 9px !important;
}
body .quick-factory,
body .quick-estimate {
  min-height: 40px !important;
  padding: 6px 4px !important;
  font-size: 10px !important;
  line-height: 1.18 !important;
}
body .quick-factory small {
  font-size: 9px !important;
}
body .quick-factory b {
  font-size: 10px !important;
}
body .quick-estimate span::before {
  min-width: 28px !important;
  height: 15px !important;
  font-size: 8px !important;
  margin-right: 3px !important;
}
body .quick-tags {
  padding: 7px 4px !important;
  gap: 4px !important;
  font-size: 10px !important;
  line-height: 1.22 !important;
}
body .quick-kakao,
body .quick-store,
body .quick-talk,
body .quick-youtube,
body .quick-online,
body .quick-top {
  min-height: 30px !important;
  font-size: 10px !important;
  padding: 4px 2px !important;
}
body .quick-kakao span::before {
  width: 26px !important;
  height: 15px !important;
  font-size: 7px !important;
}
body .quick-store span::before {
  width: 14px !important;
  height: 14px !important;
  font-size: 9px !important;
}
body .quick-top {
  min-height: 28px !important;
}
.mobile-quickbar {
  display: none;
}
@media (max-width: 768px) {
  body {
    padding-bottom: 70px;
  }
  header .nav {
    min-height: 66px !important;
    height: auto !important;
  }
  header .brand img.brand-logo,
  header .brand-logo.header-logo-img,
  header .brand-logo {
    max-height: 42px !important;
    max-width: 168px !important;
  }
  .company-nav {
    top: 66px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  .company-nav::-webkit-scrollbar,
  .company-nav-inner::-webkit-scrollbar {
    display: none;
  }
  .company-nav-inner {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 9px 14px !important;
  }
  .company-nav a {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  .company-page section[id],
  #about,
  #interview,
  #process,
  #equipment,
  #portfolio,
  #location {
    scroll-margin-top: 124px !important;
  }
  body .quick-sign {
    display: none !important;
  }
  .mobile-quickbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    height: 58px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #1c1913;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -12px 32px rgba(0,0,0,.18);
  }
  .mobile-quickbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    border-right: 1px solid rgba(255,255,255,.1);
  }
  .mobile-quickbar a:first-child {
    background: #1c1913;
  }
  .mobile-quickbar a:last-child {
    border-right: 0;
  }
}

/* sticky/quick/logo final correction */
header .brand img.brand-logo,
header .brand-logo.header-logo-img,
header .brand-logo {
  height: 108px !important;
  width: auto !important;
  max-height: 108px !important;
  max-width: none !important;
  object-fit: contain !important;
}
body:has(.company-page) .company-nav {
  position: fixed !important;
  top: 132px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
}
body:has(.company-page) .company-page {
  padding-top: 59px !important;
}
body:has(.company-page) .company-page section[id],
body:has(.company-page) #about,
body:has(.company-page) #interview,
body:has(.company-page) #process,
body:has(.company-page) #equipment,
body:has(.company-page) #portfolio,
body:has(.company-page) #location {
  scroll-margin-top: 198px !important;
}
body .quick-sign {
  width: 78px !important;
  right: 10px !important;
  top: 172px !important;
  max-height: calc(100vh - 190px) !important;
}
body .quick-phone {
  padding: 7px 4px !important;
}
body .quick-phone strong {
  font-size: 14px !important;
  line-height: 1 !important;
}
body .quick-phone small {
  display: block !important;
  font-size: 8px !important;
}
body .quick-tags {
  display: none !important;
}
body .quick-factory,
body .quick-estimate {
  min-height: 34px !important;
  padding: 5px 3px !important;
}
body .quick-kakao,
body .quick-store,
body .quick-talk,
body .quick-youtube,
body .quick-online,
body .quick-top {
  min-height: 25px !important;
  font-size: 9px !important;
}
body .quick-talk,
body .quick-youtube {
  display: none !important;
}
@media (max-width: 768px) {
  header .brand img.brand-logo,
  header .brand-logo.header-logo-img,
  header .brand-logo {
    height: 42px !important;
    width: auto !important;
    max-height: 42px !important;
    max-width: 168px !important;
  }
  body:has(.company-page) .company-nav {
    top: 66px !important;
  }
  body:has(.company-page) .company-page {
    padding-top: 54px !important;
  }
}

/* header center logo final size correction */
.site-header .brand,
header .brand {
  flex: 0 0 216px !important;
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  justify-content: center !important;
}

.site-header .brand img,
header .brand img,
.site-header img.brand-logo,
header img.brand-logo,
.header-logo img {
  width: 216px !important;
  height: 108px !important;
  max-width: 216px !important;
  max-height: 108px !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .site-header .brand,
  header .brand {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 170px !important;
  }

  .site-header .brand img,
  header .brand img,
  .site-header img.brand-logo,
  header img.brand-logo,
  .header-logo img {
    width: auto !important;
    height: 42px !important;
    max-width: 168px !important;
    max-height: 42px !important;
  }
}

/* about page order, image, sticky nav and compact quick menu correction */
:root {
  --site-header-height: 132px;
  --about-sticky-height: 52px;
}

header,
.site-header {
  z-index: 100 !important;
}

body:has(.company-page) .company-nav {
  position: fixed !important;
  top: var(--site-header-height) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
  padding: 7px 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(28,25,19, .08) !important;
  box-shadow: 0 8px 22px rgba(28,25,19, .06) !important;
}

body:has(.company-page) .company-nav-inner {
  padding: 0 20px !important;
  gap: 8px !important;
  min-height: 38px !important;
  align-items: center !important;
}

body:has(.company-page) .company-nav a {
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body:has(.company-page) .company-page {
  padding-top: calc(var(--about-sticky-height) + 28px) !important;
}

body:has(.company-page) #interview,
body:has(.company-page) #about,
body:has(.company-page) #process,
body:has(.company-page) #equipment,
body:has(.company-page) #portfolio,
body:has(.company-page) #location {
  scroll-margin-top: calc(var(--site-header-height) + var(--about-sticky-height) + 48px) !important;
}

body:has(.company-page) .about-interview {
  padding-top: 76px !important;
}

.company-about .company-visual {
  background-image: linear-gradient(180deg, rgba(22,19,16,.05), rgba(22,19,16,.56)), url('assets/회의.png') !important;
  background-size: cover !important;
  background-position: center center !important;
}

.interview-photo img {
  object-fit: cover !important;
  object-position: center center !important;
}

body .quick-sign {
  width: 96px !important;
  right: 12px !important;
  top: calc(var(--site-header-height) + 88px) !important;
  max-height: calc(100vh - 230px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 70 !important;
  transform: none !important;
}

body .quick-phone {
  padding: 8px 4px !important;
  gap: 2px !important;
}

body .quick-phone b {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

body .quick-phone strong {
  font-size: 16px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

body .quick-phone small {
  font-size: 8px !important;
  line-height: 1.1 !important;
}

body .quick-icon {
  font-size: 14px !important;
  line-height: 1 !important;
}

body .quick-sign a,
body .quick-sign button {
  min-height: 32px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  padding: 6px 4px !important;
  word-break: keep-all !important;
}

body .quick-factory,
body .quick-estimate {
  min-height: 40px !important;
  padding: 6px 4px !important;
  word-break: keep-all !important;
}

body .quick-factory small {
  font-size: 10px !important;
}

body .quick-factory b {
  font-size: 11px !important;
  word-break: keep-all !important;
}

body .quick-estimate span::before {
  min-width: 28px !important;
  height: 14px !important;
  font-size: 8px !important;
  margin-right: 3px !important;
}

body .quick-tags,
body .quick-talk,
body .quick-youtube {
  display: none !important;
}

body .quick-kakao,
body .quick-store,
body .quick-online,
body .quick-top {
  min-height: 28px !important;
  font-size: 11px !important;
  padding: 4px 3px !important;
}

@media (max-width: 768px) {
  :root {
    --site-header-height: 66px;
    --about-sticky-height: 50px;
  }

  body:has(.company-page) .company-nav {
    top: var(--site-header-height) !important;
    padding: 7px 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  body:has(.company-page) .company-nav-inner {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 0 14px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:has(.company-page) .company-nav a {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
  }

  body:has(.company-page) .company-page {
    padding-top: calc(var(--about-sticky-height) + 18px) !important;
  }

  body:has(.company-page) #interview,
  body:has(.company-page) #about,
  body:has(.company-page) #process,
  body:has(.company-page) #equipment,
  body:has(.company-page) #portfolio,
  body:has(.company-page) #location {
    scroll-margin-top: calc(var(--site-header-height) + var(--about-sticky-height) + 28px) !important;
  }

  body .quick-sign {
    display: none !important;
  }

  .interview-photo {
    max-height: none !important;
  }
}


/* ===================================================
   업종별 간판 그룹 컴팩트 개선 — 2026-06-05
   대상: sign.html의 .sign-group-section 전용
   다른 페이지에 영향 없음
   =================================================== */

/* 섹션 상하 패딩 축소 */
.sign-group-section {
  padding: 36px 0 !important;
}

/* 타이틀 영역 여백 축소 */
.sign-group-section .eyebrow {
  margin-bottom: 6px !important;
}
.sign-group-section .section-title {
  font-size: clamp(20px, 2.8vw, 30px) !important;
  margin-bottom: 18px !important;
}

/* PC: 5열 × 2행 컴팩트 그리드 */
.sign-group-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* 카드 내부 컴팩트 */
.sign-group-card {
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

/* 번호 */
.sign-group-card small {
  font-size: 10px !important;
  letter-spacing: .1em !important;
  margin-bottom: 4px !important;
}

/* 업종명 제목 */
.sign-group-card h3 {
  font-size: 13px !important;
  margin: 4px 0 6px !important;
  line-height: 1.4 !important;
  word-break: keep-all !important;
  color: #1c1913 !important;
}

/* 대표 키워드 */
.sign-group-card b {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #837b6e !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

/* 설명 p태그 숨김 (HTML 구조 유지, 표시만 제거) */
.sign-group-card p {
  display: none !important;
}

/* "사진 보기" 버튼 소형화 */
.sign-group-card .btn {
  min-height: 30px !important;
  font-size: 11px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  align-self: flex-start !important;
}

/* 태블릿: 980px 이하 → 3열 */
@media (max-width: 980px) {
  .sign-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

/* 모바일: 768px 이하 → 가로 스크롤형 */
@media (max-width: 768px) {
  .sign-group-section {
    padding: 24px 0 !important;
  }
  .sign-group-section .wrap {
    padding-bottom: 4px !important;
  }
  /* flex 가로 스크롤 (grid 오버라이드) */
  .sign-group-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .sign-group-grid::-webkit-scrollbar {
    display: none !important;
  }
  /* 카드 고정 너비로 스크롤 가능하게 */
  .sign-group-card {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    scroll-snap-align: start !important;
  }
  .sign-group-card h3 {
    font-size: 12px !important;
  }
}

/* 소형 모바일: 480px 이하 */
@media (max-width: 480px) {
  .sign-group-card {
    flex: 0 0 136px !important;
    width: 136px !important;
    min-width: 136px !important;
  }
}


/* ===================================================
   작업 상세 블로그 포스팅형 모달 — 2026-06-05
   대상: .work-modal-post 및 하위 요소
   기존 .work-modal-layout 관련 CSS는 이제 미사용
   =================================================== */

/* 패널 너비: 블로그 포스팅 너비로 좁힘 */
.work-modal-panel {
  width: min(760px, 96vw) !important;
}

/* 블로그 포스팅 컨테이너 */
.work-modal-post {
  padding: 4px 32px 40px;
}

/* ── 헤더 영역 ──────────────────────────────────── */
.work-modal-post-header {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 2px solid #e5e7eb;
}
.work-modal-post-header .eyebrow {
  margin-bottom: 8px !important;
}
.work-modal-post-header h2 {
  margin: 0 0 14px !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.03em !important;
  word-break: keep-all !important;
  color: #1c1913 !important;
}

/* ── 본문 텍스트 ────────────────────────────────── */
.work-modal-post-content {
  margin-bottom: 28px;
}
.work-modal-post-content p {
  margin: 0 0 16px !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: #3a352c !important;
  word-break: keep-all !important;
  white-space: pre-line !important;
}
.work-modal-post-content p:last-child {
  margin-bottom: 0 !important;
}

/* ── 이미지 세로 나열 ───────────────────────────── */
.work-modal-post-images {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

/* 이미지 + 캡션 단위 */
.work-modal-post-figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #221f1a;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
.work-modal-post-figure img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
  object-fit: contain;
  background: #221f1a;
}
.work-modal-post-figure figcaption {
  padding: 10px 16px;
  font-size: 13px;
  color: #837b6e;
  font-weight: 700;
  background: #faf8f3;
  border-top: 1px solid #e5e7eb;
  line-height: 1.5;
}

/* ── 블로그 원문 링크 푸터 ──────────────────────── */
.work-modal-post-footer {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid #e5e7eb;
}

/* ── 모바일 반응형 ──────────────────────────────── */
@media (max-width: 768px) {
  .work-modal-panel {
    width: 96vw !important;
    border-radius: 12px !important;
  }
  .work-modal-post {
    padding: 4px 16px 28px !important;
  }
  .work-modal-post-header h2 {
    font-size: 19px !important;
  }
  .work-modal-post-content p {
    font-size: 15px !important;
    line-height: 1.78 !important;
  }
  .work-modal-post-figure img {
    max-height: 60vh !important;
  }
  .work-modal-post-images {
    gap: 10px !important;
  }
  .work-modal-post-footer .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .work-modal-post-header h2 {
    font-size: 17px !important;
  }
  .work-modal-post-figure figcaption {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}


/* ===================================================
   sign.html 좌사이드바 + 인라인 상세뷰 — 2026-06-05
   =================================================== */

/* ── 섹션 전체 배경 ─────────────────────────────── */
.sign-page-section {
  padding: 48px 0 80px !important;
  background: #f4f7fb !important;
}

/* ── 2열 래퍼: 사이드바(200px) + 콘텐츠(1fr) ─────── */
.sign-wrap {
  display: grid !important;
  grid-template-columns: 210px 1fr !important;
  gap: 26px !important;
  align-items: start !important;
}

/* ── 좌측 사이드바 ───────────────────────────────── */
.sign-sidebar {
  position: sticky;
  top: 148px;
  z-index: 10;
}
.sign-sidebar-inner {
  background: #fff;
  border: 1px solid #e6dfd2;
  border-radius: 12px;
  padding: 20px 0 14px;
  box-shadow: 0 8px 28px rgba(28,25,19,.08);
}
.sign-sidebar-inner > .eyebrow {
  padding: 0 18px;
  margin-bottom: 14px !important;
  font-size: 11px !important;
}
.sign-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sign-sidebar-btn {
  width: 100%;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #3a352c;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
  word-break: keep-all;
  line-height: 1.4;
  display: flex;
  align-items: center;
}
.sign-sidebar-btn::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cfc6b6;
  margin-right: 10px;
  flex-shrink: 0;
  transition: background .15s ease, transform .15s ease;
}
.sign-sidebar-btn:hover {
  background: #f2ede4;
  color: #1c1913;
  padding-left: 22px;
}
.sign-sidebar-btn:hover::before { background: #1c1913; transform: scale(1.4); }
.sign-sidebar-btn.active {
  background: #1c1913;
  color: #fff;
  padding-left: 20px;
}
.sign-sidebar-btn.active::before { background: rgba(255,255,255,.7); transform: scale(1.2); }

/* ── 숨겨진 원본 탭 (JS 호환용) ──────────────────── */
.sign-tabs-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ── 우측 콘텐츠 ─────────────────────────────────── */
.sign-content { min-width: 0; }
.sign-work-area { min-width: 0; }

/* ── 작업 카드 hover 효과 ────────────────────────── */
.work-card { cursor: pointer; }
.work-card-visual {
  transition: transform 0.38s cubic-bezier(.22,.61,.36,1),
              filter 0.38s ease;
  overflow: hidden;
  position: relative;
}
.work-card:hover .work-card-visual {
  transform: scale(1.06);
  filter: brightness(1.09);
}
/* 흰색 플래시 sweep */
.work-card-visual::before {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -70%;
  width: 52%;
  z-index: 2;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  opacity: 0;
  pointer-events: none;
}
.work-card:hover .work-card-visual::before {
  animation: signCardFlash 0.66s ease forwards;
}
@keyframes signCardFlash {
  0%   { left: -70%; opacity: 0; }
  16%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* ── inline 상세 보기 컨테이너 ───────────────────── */
.work-post-inline {
  background: #fff;
  border: 1px solid #e6dfd2;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(28,25,19,.10);
  overflow: hidden;
}
.work-post-inline-inner {
  padding: 24px 32px 44px;
}
/* 목록으로 돌아가기 바 */
.work-post-back-bar {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e7eb;
}
.work-post-back-btn {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #e6dfd2;
  border-radius: 8px;
  background: #f4f7fb;
  color: #3a352c;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.work-post-back-btn:hover {
  background: #f2ede4;
  border-color: #1c1913;
  color: #1c1913;
}

/* ── 모바일: 900px 이하 → 1열 + 가로스크롤 사이드바 */
@media (max-width: 900px) {
  .sign-wrap {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .sign-sidebar { position: static !important; }
  .sign-sidebar-inner {
    border-radius: 12px 12px 0 0 !important;
    padding: 10px 0 4px !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .sign-sidebar-inner > .eyebrow { display: none !important; }
  .sign-sidebar-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 0 12px 10px !important;
    gap: 6px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .sign-sidebar-list::-webkit-scrollbar { display: none; }
  .sign-sidebar-list li { flex: 0 0 auto; scroll-snap-align: start; }
  .sign-sidebar-btn {
    width: auto !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    border: 1px solid #e6dfd2 !important;
  }
  .sign-sidebar-btn::before { display: none !important; }
  .sign-sidebar-btn:hover,
  .sign-sidebar-btn.active { padding-left: 13px !important; }
  .sign-sidebar-btn.active {
    border-color: #1c1913 !important;
  }
  .sign-content {
    border: 1px solid #e6dfd2;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #fff;
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .sign-page-section { padding: 28px 0 48px !important; }
  .work-post-inline-inner { padding: 16px 16px 28px !important; }
  .work-post-back-btn { width: 100% !important; }
}

@media (max-width: 480px) {
  .sign-sidebar-btn { font-size: 11px !important; min-height: 30px !important; padding: 0 11px !important; }
}


/* ===================================================
   4가지 문제 통합 수정 — 2026-06-05
   =================================================== */

/* ── 1) #work-post-view scroll-margin-top (header 겹침 수정) ── */
#work-post-view {
  scroll-margin-top: 160px;
}

/* ── 2) 사이드바 헤더 + 토글 버튼 ─────────────────── */
.sign-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 12px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 6px;
}
.sign-sidebar-toggle {
  min-height: 28px;
  width: 28px;
  border: 1px solid #e6dfd2;
  border-radius: 6px;
  background: #f4f7fb;
  color: #837b6e;
  font-size: 11px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  flex-shrink: 0;
}
.sign-sidebar-toggle:hover {
  background: #f2ede4;
  border-color: #1c1913;
  color: #1c1913;
}

/* 사이드바 접힘 상태 */
.sign-sidebar.collapsed {
  width: 48px !important;
  min-width: 48px !important;
  transition: width .22s ease;
}
.sign-sidebar.collapsed .sign-sidebar-list,
.sign-sidebar.collapsed .sign-sidebar-header > .eyebrow {
  display: none !important;
}
.sign-sidebar.collapsed .sign-sidebar-header {
  justify-content: center !important;
  padding: 0 10px 10px !important;
  border-bottom: 0 !important;
}
.sign-sidebar.collapsed + .sign-content {
  /* 접힘 시 콘텐츠 폭이 자동 확장 (grid 1fr이므로 자동) */
}

/* sign-wrap에 width transition 추가 */
.sign-wrap {
  transition: grid-template-columns .22s ease !important;
}

/* 900px 이하에서는 collapsed 효과 비활성화 */
@media (max-width: 900px) {
  .sign-sidebar.collapsed {
    width: auto !important;
    min-width: 0 !important;
  }
  .sign-sidebar.collapsed .sign-sidebar-list {
    display: flex !important;
  }
  .sign-sidebar-toggle {
    display: none !important;
  }
}

/* ── 3) 작업 카드 hover 효과 강화 ──────────────────── */
/* 카드 전체 lift */
.work-card {
  transition: transform 0.32s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.32s ease !important;
}
.work-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(28,25,19,.18) !important;
}
/* 이미지 확대 강화 */
.work-card-visual {
  transition: transform 0.42s cubic-bezier(.22,.61,.36,1),
              filter 0.42s ease !important;
}
.work-card:hover .work-card-visual {
  transform: scale(1.10) !important;
  filter: brightness(1.12) contrast(1.04) !important;
}
/* 플래시 sweep 자연스럽게 */
.work-card-visual::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.48),
    transparent
  ) !important;
}
.work-card:hover .work-card-visual::before {
  animation: signCardFlash 0.72s ease forwards !important;
}

/* ── 4) index.html 최근작업 섹션 디자인 ─────────────── */
/* 섹션 패딩 축소 */
.category-recent-block {
  padding: 48px 0 !important;
  border-bottom: 1px solid #f2ede4;
  background: #fff;
}
.category-recent-block:last-of-type {
  border-bottom: 0 !important;
}

/* 섹션 헤더 레이아웃 */
.recent-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
  padding-bottom: 18px !important;
  border-bottom: 2px solid #f4f0e8 !important;
}
.recent-section-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recent-eyebrow {
  font-size: 11px !important;
  font-weight: 1000 !important;
  color: #1c1913 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.recent-title {
  margin: 0 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 1000 !important;
  color: #1c1913 !important;
  letter-spacing: -.04em !important;
  line-height: 1.2 !important;
}
.recent-desc {
  margin: 2px 0 0 !important;
  font-size: 14px !important;
  color: #837b6e !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

/* 전체 보기 pill 버튼 */
.recent-view-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 2px solid #1c1913 !important;
  background: transparent !important;
  color: #1c1913 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .16s ease, color .16s ease !important;
  flex-shrink: 0 !important;
}
.recent-view-btn:hover {
  background: #1c1913 !important;
  color: #fff !important;
}

/* 빈 상태: 점선 박스 → 연한 배경 안내 */
.empty-state {
  border: 0 !important;
  background: #faf8f3 !important;
  border-radius: 12px !important;
  padding: 44px 24px !important;
  color: #aca594 !important;
}
.empty-state-soft {
  padding: 44px 24px;
  background: #faf8f3;
  border-radius: 12px;
  text-align: center;
  color: #aca594;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}
.empty-state-soft p {
  margin: 0;
}

/* 모바일 */
@media (max-width: 768px) {
  .category-recent-block { padding: 36px 0 !important; }
  .recent-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .recent-title { font-size: 22px !important; }
  .recent-view-btn { min-height: 34px !important; padding: 0 16px !important; font-size: 12px !important; }
  #work-post-view { scroll-margin-top: 80px; }
}


/* ===================================================
   포트폴리오 그리드 카드 — 2026-06-05
   work-card-portfolio: sign.html 카테고리 페이지 전용
   기존 work-card(index.html) 와 별도 적용
   =================================================== */

/* 그리드 간격 조정 (카테고리 페이지만) */
.sign-work-area .category-work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* 포트폴리오 카드 기본 */
.work-card-portfolio {
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

/* 이미지 영역: 4:3 비율, object-fit cover */
.work-card-portfolio .work-card-visual {
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #e6dfd2 !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

/* 이미지 없을 때 텍스트 */
.work-card-portfolio .work-card-visual:empty::after {
  content: '';
}

/* 사진 장수 배지 — 작고 덜 튀게 */
.work-card-portfolio .work-photo-count {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  top: auto !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.52) !important;
  color: #fff !important;
  backdrop-filter: blur(2px);
}

/* 캡션 영역 */
.work-card-caption {
  padding: 8px 12px 10px;
  line-height: 1.35;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 카테고리 라벨 */
.work-card-label {
  color: #1c1913;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: -.01em;
}

/* 작업 이름 */
.work-card-name {
  font-size: 13px;
  font-weight: 800;
  color: #1c1913;
}

/* 기존 card-body, detail-button 포트폴리오 카드에서 숨김 */
.work-card-portfolio .work-card-body,
.work-card-portfolio .work-detail-button {
  display: none !important;
}

/* hover: 카드 lift + 이미지 확대 유지 */
.work-card-portfolio:hover {
  box-shadow: 0 12px 32px rgba(28,25,19,.14) !important;
  transform: translateY(-4px) !important;
}
.work-card-portfolio:hover .work-card-visual {
  transform: scale(1.07) !important;
  filter: brightness(1.08) !important;
}

/* 넓은 화면 4열 */
@media (min-width: 1280px) {
  .sign-work-area .category-work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* 태블릿 2열 */
@media (max-width: 900px) {
  .sign-work-area .category-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* 모바일 2열 유지 (작은 화면) */
@media (max-width: 480px) {
  .sign-work-area .category-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .work-card-caption { padding: 6px 8px 8px; }
  .work-card-name { font-size: 12px; }
}


/* ===================================================
   카드 hover 강화 + scroll reveal — 2026-06-05
   =================================================== */

/* ── 1) hover 효과 강화 (공통 .work-card) ─────────── */
.work-card {
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.45s ease !important;
}
.work-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(28,25,19,.22) !important;
}

/* 이미지 확대 + 밝기/대비 */
.work-card .work-card-visual,
.work-card-portfolio .work-card-visual {
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1),
              filter 0.55s ease !important;
  overflow: hidden !important;
}
.work-card:hover .work-card-visual,
.work-card-portfolio:hover .work-card-visual {
  transform: scale(1.15) !important;
  filter: brightness(1.12) contrast(1.06) !important;
}

/* 플래시 sweep — 자연스럽게 */
.work-card .work-card-visual::before,
.work-card-portfolio .work-card-visual::before {
  content: '';
  position: absolute;
  top: -40%; bottom: -40%; left: -70%;
  width: 45%;
  z-index: 2;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg, transparent, rgba(255,255,255,.38), transparent
  );
  opacity: 0;
  pointer-events: none;
}
.work-card:hover .work-card-visual::before,
.work-card-portfolio:hover .work-card-visual::before {
  animation: cardSweep 0.72s ease forwards !important;
}
@keyframes cardSweep {
  0%   { left: -70%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

/* ── 2) scroll reveal — 초기/표시 상태 ──────────────── */
.work-card.reveal-ready {
  opacity: 0;
  transform: translateY(28px);
  /* hover translateY와 충돌 방지: transition 명시 */
  transition: opacity 0.6s ease,
              transform 0.6s ease,
              box-shadow 0.45s ease !important;
}
.work-card.reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* hover 시에는 translateY(-8px) 적용 */
.work-card.reveal-ready.is-visible:hover {
  transform: translateY(-8px) !important;
}

/* stagger delay (JS에서 style.setProperty로 설정) */
.work-card.reveal-ready {
  transition-delay: var(--reveal-delay, 0s) !important;
}
.work-card.reveal-ready.is-visible {
  transition-delay: var(--reveal-delay, 0s) !important;
}

/* ── 3) prefers-reduced-motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .work-card,
  .work-card .work-card-visual,
  .work-card-portfolio .work-card-visual {
    transition: none !important;
    animation: none !important;
  }
  .work-card.reveal-ready {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 4) 모바일 hover 비활성 (터치 기기 불필요) ─────── */
@media (hover: none) {
  .work-card:hover { transform: none !important; box-shadow: none !important; }
  .work-card:hover .work-card-visual,
  .work-card-portfolio:hover .work-card-visual {
    transform: none !important;
    filter: none !important;
  }
}


/* ===================================================
   index.html 메인 최근작업 — 포트폴리오 그리드 — 2026-06-05
   sign.html(.sign-work-area) 그리드와 동일한 규칙을
   메인(.category-recent-block)에도 적용
   =================================================== */

/* 데이터 0개 섹션 숨김 보장 (JS에서 section.hidden = true 처리) */
.category-recent-block[hidden] { display: none !important; }

/* PC 기본 3열 · 촘촘한 간격 */
.category-recent-block .category-work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* 넓은 화면 4열 */
@media (min-width: 1280px) {
  .category-recent-block .category-work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* 태블릿 2열 */
@media (max-width: 900px) {
  .category-recent-block .category-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* 모바일 2열 유지 */
@media (max-width: 480px) {
  .category-recent-block .category-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}


/* ===================================================
   좌측 플로팅 분류 메뉴 (.floating-section-nav) — 2026-06-05
   index.html / sign.html 공통 · 접기/펼치기 · 스크롤 따라다님
   =================================================== */

.floating-section-nav {
  position: fixed;
  left: 14px;
  top: 150px;
  z-index: 29; /* header(30)보다 아래, 본문보다 위 */
  width: 200px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(28,25,19,.12);
  transition: width .25s ease, padding .25s ease;
}

/* 접기 버튼 — 상단 우측 작게 */
.floating-nav-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  min-height: 26px !important;
  padding: 0;
  border: 1px solid #e6dfd2;
  border-radius: 7px;
  background: #faf8f3;
  color: #5c554a;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .25s ease, background .15s ease;
}
.floating-nav-toggle:hover { background: #f2ede4; color: #1c1913; }

.floating-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 32px;
}
.floating-nav-links > a,
.fn-item > a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: #1c1913;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: background .15s ease, color .15s ease;
}
.floating-nav-links > a:hover,
.fn-item > a:hover { background: #f2ede4; color: #1c1913; }
.floating-nav-links > a.active,
.fn-item > a.active { background: #1c1913; color: #fff; }
.floating-nav-links a.fn-contact { border-top: 1px solid #f4f0e8; margin-top: 4px; color: #1c1913; }
.floating-nav-links a.fn-contact.active { background: #1c1913; color: #fff; }

/* 펼침 상태: 짧은 이름 숨김 */
.fn-short { display: none; }

/* ── 접힘 상태 (PC: 짧은 글자만) ───────────────────── */
.floating-section-nav.collapsed {
  width: 52px;
  padding: 8px 5px;
}
.floating-section-nav.collapsed .floating-nav-toggle {
  position: static;
  margin: 0 auto 6px;
  transform: rotate(180deg);
}
.floating-section-nav.collapsed .floating-nav-links { margin-top: 0; }
.floating-section-nav.collapsed .floating-nav-links > a,
.floating-section-nav.collapsed .fn-item > a {
  justify-content: center;
  padding: 0;
  min-height: 38px;
  font-size: 12px;
}
.floating-section-nav.collapsed .fn-full { display: none; }
.floating-section-nav.collapsed .fn-short { display: block; }

/* 앵커 이동 시 fixed header에 안 가리게 */
#metal-recent, #door-recent, #standing-sign-recent, #sign-recent, #contact {
  scroll-margin-top: 96px;
}

/* 좁은 PC: 살짝 안쪽으로 */
@media (max-width: 1366px) {
  .floating-section-nav { left: 8px; }
}

/* ── 모바일 (900px 이하): 좌측 하단 '작업 분류' 버튼 → 탭하면 펼침 ── */
@media (max-width: 900px) {
  .floating-section-nav {
    top: auto;
    bottom: 76px; /* mobile-quickbar(58px) 위 */
    left: 10px;
    width: auto;
    padding: 8px;
    z-index: 119;
  }
  .floating-section-nav .floating-nav-toggle,
  .floating-section-nav.collapsed .floating-nav-toggle {
    position: static;
    width: auto;
    height: auto;
    min-height: 36px !important;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #1c1913;
    color: #fff;
    font-size: 0;
    transform: none;
  }
  .floating-nav-toggle::after {
    content: '작업 분류';
    font-size: 12px;
    font-weight: 1000;
  }
  .floating-section-nav .floating-nav-links { margin-top: 8px; min-width: 150px; }
  .floating-section-nav .floating-nav-links > a,
  .floating-section-nav .fn-item > a { min-height: 42px; font-size: 14px; justify-content: flex-start; padding: 0 12px; }
  .floating-section-nav .fn-short { display: none !important; }
  .floating-section-nav .fn-full { display: block !important; }
  /* 접힘: 버튼만 보임 */
  .floating-section-nav.collapsed .floating-nav-links { display: none; }
}


/* ===================================================
   통합 분류 메뉴 — 상위 + 하위 호버 펼침 — 2026-06-05
   .fn-item(상위) hover → .fn-sub(하위분류) 자동 펼침
   sign.html은 .fn-inflow(본문 사이드바형)로 동일 메뉴 사용
   =================================================== */

.fn-item { position: relative; }

/* 하위분류 목록 — 기본 접힘 */
.fn-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.fn-sub a {
  display: flex;
  align-items: center;
  min-height: 31px;
  padding: 0 10px 0 24px;
  border-radius: 6px;
  color: #5c554a;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .14s ease, color .14s ease;
}
.fn-sub a:hover { background: #f2ede4; color: #1c1913; }
.fn-sub a.active { background: #f2ede4; color: #1c1913; font-weight: 900; }

/* 펼침(확장) 상태: 상위에 마우스 올리면 하위 펼침 */
.floating-section-nav:not(.collapsed) .fn-item:hover > .fn-sub,
.floating-section-nav:not(.collapsed) .fn-item:focus-within > .fn-sub,
.floating-section-nav .fn-item.fn-open > .fn-sub {
  max-height: 440px;
  overflow-y: auto;
}

/* 메뉴가 화면보다 길어질 때 내부 스크롤 (fixed형만) */
.floating-section-nav:not(.collapsed):not(.fn-inflow) {
  max-height: calc(100vh - 170px);
  overflow-y: auto;
}

/* 접힘 상태(레일형): hover 시 오른쪽 플라이아웃으로 하위분류 표시 */
.floating-section-nav.collapsed .fn-sub {
  position: absolute;
  left: 100%;
  top: 0;
  width: 196px;
  max-height: none;
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 8px solid transparent; /* hover 끊김 방지 브리지 */
  background-clip: padding-box;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(28,25,19,.16);
  display: none;
  transition: none;
  z-index: 5;
}
.floating-section-nav.collapsed .fn-item:hover > .fn-sub {
  display: flex;
  max-height: 60vh;
  overflow-y: auto;
}
.floating-section-nav.collapsed .fn-sub a { padding: 0 10px; }

/* ── sign.html 본문 사이드바형 (.fn-inflow) ─────────── */
.fn-inflow {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 1;
}
.fn-inflow .floating-nav-links { margin-top: 0; }
.fn-inflow .floating-nav-toggle { display: none !important; }

/* PC: 기존 업종 사이드바 숨김 → 통합 메뉴가 그 자리 담당 */
@media (min-width: 901px) {
  .sign-sidebar .sign-sidebar-inner { display: none !important; }
}

/* 모바일: 통합 메뉴(in-flow) 숨김 → 기존 가로 스크롤 업종 필터 유지 */
@media (max-width: 900px) {
  .sign-sidebar .fn-inflow { display: none !important; }
  .floating-section-nav .fn-sub { display: none !important; }
}


/* ===================================================
   프리미엄 랜딩 업그레이드 — 2026-06-05
   스크롤 등장(ani-*) · 히어로 카피 · 통계 카운터 밴드 ·
   시스템 카드 번호 · 카테고리/버튼 호버 인터랙션
   =================================================== */

/* ── 1) 스크롤 등장 애니메이션 (재사용 클래스) ──────────
   body.ani-ready 일 때만 초기 숨김 적용 →
   JS가 꺼져 있으면 콘텐츠가 그냥 다 보이므로 안전 */
body.ani-ready .ani-fade-up,
body.ani-ready .ani-fade-in,
body.ani-ready .ani-slide-left,
body.ani-ready .ani-slide-right {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
body.ani-ready .ani-fade-up { transform: translateY(28px); }
body.ani-ready .ani-slide-left { transform: translateX(-36px); }
body.ani-ready .ani-slide-right { transform: translateX(36px); }
body.ani-ready .ani-fade-up.is-visible,
body.ani-ready .ani-fade-in.is-visible,
body.ani-ready .ani-slide-left.is-visible,
body.ani-ready .ani-slide-right.is-visible {
  opacity: 1;
  transform: none;
}

/* ── 2) 히어로(메인 비주얼) 카피 ─────────────────────── */
.hero.hero-video-only.hero-premium {
  display: grid !important;
  align-items: center !important;
}
.hero-premium video { will-change: transform; transform: scale(1.06); }
.hero-overlay-premium {
  background: linear-gradient(90deg, rgba(22,19,16,.78) 0%, rgba(22,19,16,.46) 50%, rgba(22,19,16,.22) 100%) !important;
}
.hero-inner { position: relative; z-index: 2; padding: 40px 0 56px; }
.hero-eyebrow {
  margin: 0 0 14px;
  color: #b6ac9c;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero-headline {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.14;
  letter-spacing: -.05em;
  word-break: keep-all;
  text-shadow: 0 10px 36px rgba(0,0,0,.42);
}
.hero-sub {
  margin: 0 0 26px;
  max-width: 560px;
  color: rgba(255,255,255,.86);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 700;
  word-break: keep-all;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-btns .btn.ghost { border-color: rgba(255,255,255,.55); }

/* 히어로 페이드 슬라이더(이미지 2장 이상 지정 시 JS가 생성) */
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero-slide.active { opacity: 1; }
.hero-premium .hero-overlay { z-index: 1; }

/* ── 3) 통계 카운터 밴드 ────────────────────────────── */
.stats-band {
  padding: 56px 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(28,25,19,.25), transparent 36%),
    linear-gradient(120deg, #161310 0%, #1c1913 55%, #161310 100%);
  background-size: 120% 120%;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.stats-band-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  text-align: center;
}
.stats-band article strong {
  display: block;
  color: #fff;
  font-size: clamp(34px, 3.6vw, 54px);
  letter-spacing: -.045em;
  line-height: 1;
}
.stats-band article strong span { color: #b6ac9c; }
.stats-band article small {
  display: block;
  margin-top: 10px;
  color: #b6ac9c;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ── 4) 제작 시스템 카드: 번호 + 호버 강화 ───────────── */
.system-card { z-index: 0; }
.system-card-num {
  position: absolute;
  right: 14px;
  top: 4px;
  z-index: -1;
  font-style: normal;
  font-size: 68px;
  font-weight: 1000;
  letter-spacing: -.06em;
  line-height: 1;
  color: rgba(28,25,19,.10);
  pointer-events: none;
}
.system-card-grid article {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.system-card-grid article:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: #cfc6b6;
  box-shadow: 0 26px 60px rgba(28,25,19,.16);
}

/* ── 5) 카테고리 카드 호버 ──────────────────────────── */
.category-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.category-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #1c1913 !important;
  box-shadow: 0 28px 64px rgba(28,25,19,.18);
}
.category-card span { transition: background .25s ease, transform .25s ease; }
.category-card:hover span { background: #3a352c; transform: translateX(3px); }

/* ── 6) 버튼 공통 프리미엄 호버 ─────────────────────── */
.btn-premium {
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease !important;
}
.btn-premium:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 34px rgba(28,25,19,.28);
}

/* ── 7) 최근작업 포트폴리오 호버 강화 ───────────────── */
.work-card-portfolio:hover {
  box-shadow: 0 18px 44px rgba(28,25,19,.2) !important;
}
.work-card-portfolio:hover .work-card-visual {
  transform: scale(1.12) !important;
  filter: brightness(1.1) !important;
}

/* ── 8) 반응형 ──────────────────────────────────────── */
@media (max-width: 980px) {
  .stats-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
}
@media (max-width: 768px) {
  .hero-inner { padding: 26px 0 40px; }
  .hero-headline { font-size: 30px; }
  .hero-sub { font-size: 15px; }
  .hero-btns .btn { width: 100%; }
  .stats-band { padding: 40px 0; }
  .system-card-num { font-size: 48px; }
  /* 모바일은 호버 효과를 약하게 */
  .system-card-grid article:hover,
  .category-card:hover,
  .btn-premium:hover { transform: none; }
}
@media (max-width: 480px) {
  .stats-band-grid { gap: 18px 10px; }
  .stats-band article strong { font-size: 30px; }
}

/* ── 9) prefers-reduced-motion: 모든 효과 비활성화 ───── */
@media (prefers-reduced-motion: reduce) {
  body.ani-ready .ani-fade-up,
  body.ani-ready .ani-fade-in,
  body.ani-ready .ani-slide-left,
  body.ani-ready .ani-slide-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-premium video { transform: none !important; }
  .hero-slide { transition: none !important; }
}


/* ===================================================
   메인 히어로 컬러/레이아웃 개선 — 2026-06-05
   - 영상 색감 보정(채도·대비 업, 흑백 느낌 제거)
   - 네이비/블루 그라데이션 오버레이로 교체
   - 영상 둘레로 블루/시안 빛 번짐(글로우) 배경
   - 히어로 높이 시원하게 확대
   =================================================== */

/* 히어로 영역: 높이 확대 + 영상 밖 글로우 배경 (deep navy + blue/cyan) */
.hero.hero-video-only.hero-premium {
  min-height: clamp(620px, 78vh, 780px) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(92,85,74,.26), transparent 34%),
    radial-gradient(circle at 82% 26%, rgba(122,115,103,.18), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(92,85,74,.14), transparent 42%),
    #161310 !important;
}

/* 영상: 색감 보정(채도/대비 업, 살짝만 어둡게) + 둘레 여백·둥근 모서리로
   뒤쪽 글로우가 자연스럽게 비치게 처리 */
.hero.hero-video-only.hero-premium video {
  filter: saturate(1.28) contrast(1.1) brightness(.85) !important;
  inset: 16px !important;
  width: calc(100% - 32px) !important;
  height: calc(100% - 32px) !important;
  border-radius: 16px;
  object-fit: cover;
  transform: scale(1.08);
}

/* 오버레이: 단색 검정 → 네이비/블루 그라데이션 (영상 디테일 살림) */
.hero-premium .hero-overlay,
.hero-premium .hero-overlay-premium {
  inset: 16px !important;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(22,19,16,.72) 0%, rgba(22,19,16,.36) 48%, rgba(22,19,16,.12) 100%),
    radial-gradient(circle at 72% 28%, rgba(92,85,74,.24), transparent 38%) !important;
}

/* 텍스트 가독성: 타이틀 그림자 약하게 정돈, 서브문구 밝은 회색 */
.hero-premium .hero-headline { text-shadow: 0 6px 26px rgba(0,0,0,.5); }
.hero-premium .hero-sub { color: #cfc6b6; }

/* 모바일: 영상 풀블리드 + 높이 축소 */
@media (max-width: 768px) {
  .hero.hero-video-only.hero-premium { min-height: 60vh !important; }
  .hero.hero-video-only.hero-premium video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    transform: none;
  }
  .hero-premium .hero-overlay,
  .hero-premium .hero-overlay-premium {
    inset: 0 !important;
    border-radius: 0;
  }
}


/* ===================================================
   브랜드 스토리형 랜딩 — 2026-06-05
   문제 제기 / 포트폴리오 인트로 / 통계 텍스트형 /
   문의 전환 버튼
   =================================================== */

/* ── 문제 제기 섹션 ─────────────────────────────────── */
.problem-section {
  padding: 84px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
  border-bottom: 1px solid #f2ede4;
}
.problem-inner {
  max-width: 820px;
  text-align: center;
  margin: 0 auto;
}
.problem-inner .eyebrow { color: #1c1913; letter-spacing: .18em; }
.problem-title {
  margin: 14px 0 18px;
  color: #1c1913;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.25;
  letter-spacing: -.05em;
  word-break: keep-all;
}
.problem-desc {
  margin: 0;
  color: #5c554a;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 700;
  word-break: keep-all;
}

/* ── 포트폴리오 인트로 ──────────────────────────────── */
.portfolio-intro {
  padding: 76px 0 28px;
  background: #fff;
  text-align: center;
}
.portfolio-intro .eyebrow { color: #1c1913; letter-spacing: .18em; }
.portfolio-intro .section-title { margin: 12px 0 14px; }
.portfolio-intro .lead {
  margin: 0 auto;
  max-width: 640px;
  color: #837b6e;
  line-height: 1.75;
  font-weight: 700;
  word-break: keep-all;
}

/* ── 통계 밴드: 텍스트형 항목 (공장직영 / 원스톱 시공) ── */
.stats-band .stats-text {
  font-size: clamp(24px, 2.3vw, 36px) !important;
  line-height: 1.2 !important;
  padding-top: 10px;
  color: #b6ac9c;
  letter-spacing: -.03em;
}

/* ── 문의 전환 버튼 묶음 ────────────────────────────── */
.inquiry-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── 실시간 상담 게시판(표) — 2026-06-05 ─────────────── */
.inquiry-board-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e6dfd2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(28,25,19,.07);
}
.inquiry-board {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 14px;
}
.inquiry-board thead th {
  padding: 14px 14px;
  background: #f2ede4;
  color: #5c554a;
  font-weight: 1000;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #e6dfd2;
}
.inquiry-board tbody td {
  padding: 13px 14px;
  text-align: center;
  color: #4a443b;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}
.inquiry-board tbody tr:last-child td { border-bottom: 0; }
.inquiry-board tbody tr { transition: background .15s ease; }
.inquiry-board tbody tr:hover { background: #f8faff; }
.inquiry-board .ib-no { color: #aca594; font-weight: 800; }
.inquiry-board .ib-name { font-weight: 900; color: #1c1913; white-space: nowrap; }
.inquiry-board .ib-title { text-align: left; }
.inquiry-board .ib-title span { display: block; color: #1c1913; font-weight: 800; word-break: keep-all; }
.inquiry-board .ib-title em { display: block; margin-top: 3px; color: #aca594; font-style: normal; font-size: 12px; }
.inquiry-board .ib-amount { color: #1c1913; font-weight: 900; white-space: nowrap; }
.inquiry-board .ib-date { color: #837b6e; white-space: nowrap; font-size: 13px; }
.inquiry-board .status-badge { min-height: 26px; font-size: 12px; }

.inquiry-board .ib-row { cursor: pointer; }
.inquiry-board .ib-lock { margin-right: 5px; }
.inquiry-board-note {
  margin: 0;
  padding: 11px 14px;
  border-top: 1px solid #eef2f7;
  background: #f8faff;
  color: #837b6e;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 768px) {
  .inquiry-board { font-size: 13px; }
  .inquiry-board thead th,
  .inquiry-board tbody td { padding: 11px 10px; }
}

/* ── 답변 확인 모달 ─────────────────────────────────── */
.inquiry-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  place-items: center;
  padding: 24px;
}
.inquiry-modal.open { display: grid; }
.inquiry-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22,19,16,.62);
  backdrop-filter: blur(2px);
}
.inquiry-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 96vw);
  max-height: 88vh;
  overflow: auto;
  padding: 26px 24px 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
}
.inquiry-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: #1c1913;
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
}
.im-eyebrow { margin: 0 0 6px; color: #1c1913; font-size: 12px; font-weight: 1000; letter-spacing: .12em; }
.im-title { margin: 0 0 12px; color: #1c1913; font-size: 20px; line-height: 1.35; word-break: keep-all; padding-right: 60px; }
.im-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.im-meta span { color: #837b6e; font-size: 13px; font-weight: 800; }
.im-lockform label { display: block; margin-bottom: 10px; color: #5c554a; font-weight: 800; font-size: 14px; }
.im-lockrow { display: flex; gap: 8px; }
.im-lockrow input {
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #ddd5c8;
  border-radius: 8px;
  font-size: 15px;
}
.im-lockrow input:focus { outline: none; border-color: #1c1913; box-shadow: 0 0 0 3px rgba(28,25,19,.14); }
.im-lockrow .btn { white-space: nowrap; }
.im-error { margin: 10px 0 0; color: #dc2626; font-size: 13px; font-weight: 800; }
.im-answer {
  margin-top: 4px;
  padding: 18px;
  border: 1px solid #e6dfd2;
  border-radius: 10px;
  background: #f8faff;
  color: #4a443b;
  line-height: 1.8;
  font-weight: 600;
  word-break: keep-all;
}
.im-answer-label { margin: 0 0 8px; color: #1c1913; font-weight: 1000; font-size: 13px; }
.im-answer p { margin: 0; }
.im-pending { color: #aca594; text-align: center; font-weight: 700; }
body.modal-open { overflow: hidden; }

/* ── 메인 섹션 바로가기 바(스크롤 시 상단 고정) — 2026-06-05 ──────────
   히어로 바로 아래 가로 메뉴. 스크롤하면 헤더 아래에 sticky로 고정 */
.home-quicknav {
  position: sticky;
  top: 76px; /* 고정 헤더 바로 아래 (JS가 실제 헤더 높이로 재조정) */
  z-index: 28; /* 헤더(30)보다 아래, 본문보다 위 */
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #f2ede4;
  box-shadow: 0 8px 22px rgba(28,25,19,.08);
}
.home-quicknav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 14px 0;
}
.home-quicknav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 52px;
  padding: 0 26px;
  border: 1.5px solid #e6dfd2;
  border-radius: 999px;
  background: #fff;
  color: #3a352c;
  font-size: 16.5px;
  font-weight: 1000;
  text-decoration: none;
  letter-spacing: -.025em;
  box-shadow: 0 4px 12px rgba(28,25,19,.05);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* 앞에 작은 점 포인트 */
.home-quicknav a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1c1913;
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.home-quicknav a:hover {
  background: #f2ede4;
  border-color: #1c1913;
  color: #1c1913;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(28,25,19,.16);
}
.home-quicknav a:hover::before { transform: scale(1.25); opacity: 1; }
.home-quicknav a.active {
  background: linear-gradient(135deg, #1c1913, #3a352c);
  border-color: #1c1913;
  color: #fff;
  box-shadow: 0 12px 28px rgba(28,25,19,.32);
}
.home-quicknav a.active::before { background: #fff; opacity: 1; }
/* 견적문의: 항상 강조된 채움형 CTA */
.home-quicknav a.qn-contact {
  background: linear-gradient(135deg, #1c1913, #3a352c);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(28,25,19,.28);
}
.home-quicknav a.qn-contact::before { background: #fff; opacity: .85; }
.home-quicknav a.qn-contact:hover {
  background: linear-gradient(135deg, #3a352c, #1c1913);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(28,25,19,.36);
}
.home-quicknav a.qn-contact.active { background: linear-gradient(135deg, #1c1913, #3a352c); color: #fff; }

/* 바로가기 대상 섹션: 헤더 + 바 높이만큼 여백 확보 */
#metal-recent, #door-recent, #standing-sign-recent, #sign-recent, #contact {
  scroll-margin-top: 162px !important;
}

@media (max-width: 768px) {
  .home-quicknav {
    top: 66px; /* 모바일 헤더 높이 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .home-quicknav::-webkit-scrollbar { display: none; }
  .home-quicknav-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 14px;
    width: max-content;
    min-width: 100%;
  }
  .home-quicknav a { flex: 0 0 auto; min-height: 46px; padding: 0 18px; font-size: 15px; }
  #metal-recent, #door-recent, #standing-sign-recent, #sign-recent, #contact {
    scroll-margin-top: 130px !important;
  }
}

/* ── 문의 섹션: 상단 안내문 + 누적 카운터 + 전체폭 게시판 ── 2026-06-05 ── */
.inquiry-stack { display: block; }
.inquiry-copy-top {
  position: static !important;
  max-width: 760px;
  margin: 0 auto 26px;
  text-align: center;
}
.inquiry-copy-top .lead { margin: 12px auto 22px; }
.inquiry-copy-top .inquiry-cta { justify-content: center; }

/* 누적 카운터 줄: 4칸, 진한 카드 */
.inquiry-stack .inquiry-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}
.inquiry-stack .inquiry-stats article {
  text-align: center;
  background: linear-gradient(135deg, #1c1913 0%, #3a352c 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 38px rgba(28,25,19,.16);
}
.inquiry-stack .inquiry-stats b { color: #b6ac9c; font-weight: 900; }
.inquiry-stack .inquiry-stats strong { color: #fff; font-size: 34px; }

/* 게시판 전체폭 */
.recent-inquiries-full { display: block; max-height: none !important; overflow: visible !important; transform: none !important; }
.recent-inquiries-full .inquiry-board { min-width: 720px; }

@media (max-width: 768px) {
  .inquiry-stack .inquiry-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inquiry-stack .inquiry-stats strong { font-size: 26px; }
  .inquiry-copy-top .inquiry-cta .btn { width: 100%; }
}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .problem-section { padding: 54px 0; }
  .problem-desc { font-size: 15px; }
  .portfolio-intro { padding: 50px 0 16px; }
  .inquiry-cta .btn { width: 100%; }
  .stats-band .stats-text { padding-top: 6px; }
}

/* DJS footer logo reversal */
footer .footer-logo {
  width: min(220px, 70vw);
  height: auto;
  margin: 0 0 18px;
  object-fit: contain;
}

/* DJS premium quickbar color refinement */
body .quick-sign {
  border: 1px solid rgba(198, 161, 91, .34) !important;
  border-radius: 8px !important;
  background: #1f1c18 !important;
  box-shadow: 0 20px 46px rgba(31, 28, 24, .26) !important;
}

body .quick-sign a,
body .quick-sign button {
  border-top: 1px solid rgba(245, 241, 233, .12) !important;
  color: #f5f1e9 !important;
}

body .quick-sign a:first-child {
  border-top: 0 !important;
}

body .quick-sign a::after {
  background: linear-gradient(90deg, transparent, rgba(245, 241, 233, .34), transparent) !important;
}

body .quick-phone {
  background: linear-gradient(160deg, #2b2822 0%, #1f1c18 58%, #161410 100%) !important;
  border-top: 0 !important;
}

body .quick-icon,
body .quick-phone strong {
  color: #c6a15b !important;
}

body .quick-phone b,
body .quick-factory b,
body .quick-estimate,
body .quick-tags,
body .quick-kakao,
body .quick-store,
body .quick-talk,
body .quick-youtube,
body .quick-online,
body .quick-top {
  letter-spacing: 0 !important;
}

body .quick-phone small,
body .quick-factory small {
  color: rgba(245, 241, 233, .72) !important;
}

body .quick-factory,
body .quick-estimate {
  background: linear-gradient(160deg, #5c554a 0%, #3a352c 54%, #1f1c18 100%) !important;
  color: #f5f1e9 !important;
}

body .quick-factory2 {
  background: linear-gradient(160deg, #2b2822 0%, #1f1c18 62%, #17140f 100%) !important;
}

body .quick-estimate span::before {
  background: #f5f1e9 !important;
  color: #1f1c18 !important;
  border: 1px solid rgba(198, 161, 91, .58) !important;
}

body .quick-tags {
  background: #24211c !important;
  color: #f5f1e9 !important;
}

body .quick-tags span {
  color: rgba(245, 241, 233, .88) !important;
}

body .quick-tags span:last-child {
  color: #c6a15b !important;
}

body .quick-kakao,
body .quick-store,
body .quick-talk,
body .quick-youtube,
body .quick-online {
  background: #f5f1e9 !important;
  color: #1f1c18 !important;
}

body .quick-kakao span::before,
body .quick-store span::before {
  background: #b28a4a !important;
  color: #fff !important;
}

body .quick-talk span::before,
body .quick-youtube span::before,
body .quick-online span::before {
  color: #b28a4a !important;
  border-color: #b28a4a !important;
}

body .quick-top {
  background: #1f1c18 !important;
  color: #c6a15b !important;
}

body .quick-top::before {
  color: #c6a15b !important;
}


/* DJS premium quickbar layout refinement */
body .quick-sign {
  width: 112px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
}

body .quick-sign a,
body .quick-sign button,
body .quick-tags {
  width: 100% !important;
  box-sizing: border-box !important;
}

body .quick-phone {
  min-height: 104px !important;
  padding: 12px 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

body .quick-icon {
  font-size: 17px !important;
  line-height: 1 !important;
}

body .quick-phone b {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body .quick-phone strong {
  font-size: 21px !important;
  line-height: 1.04 !important;
  letter-spacing: .02em !important;
}

body .quick-phone small {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

body .quick-factory,
body .quick-estimate {
  min-height: 48px !important;
  padding: 8px 7px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  line-height: 1.18 !important;
}

body .quick-factory small {
  display: block !important;
  min-width: 36px !important;
  height: 18px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgba(245, 241, 233, .92) !important;
  color: #3a352c !important;
  font-size: 10px !important;
  line-height: 18px !important;
}

body .quick-factory b,
body .quick-estimate span {
  display: block !important;
  width: 100% !important;
  font-size: 12px !important;
  line-height: 1.22 !important;
  word-break: keep-all !important;
}

body .quick-estimate span::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 17px !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  line-height: 17px !important;
  vertical-align: 1px !important;
}

body .quick-tags {
  display: none !important;
}

body .quick-kakao,
body .quick-store,
body .quick-talk,
body .quick-youtube,
body .quick-online {
  min-height: 34px !important;
  padding: 0 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

body .quick-kakao span,
body .quick-store span,
body .quick-talk span,
body .quick-youtube span,
body .quick-online span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  white-space: nowrap !important;
  color: #1f1c18 !important;
}

body .quick-kakao span::before,
body .quick-store span::before,
body .quick-talk span::before,
body .quick-youtube span::before,
body .quick-online span::before {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  width: auto !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  line-height: 16px !important;
  vertical-align: 0 !important;
}

body .quick-talk span::before {
  content: "CAFE" !important;
  border: 1px solid #b28a4a !important;
}

body .quick-youtube span::before {
  content: "YT" !important;
  border: 1px solid #b28a4a !important;
}

body .quick-online span::before {
  content: "\ACF5\C7A5" !important;
  border: 1px solid #b28a4a !important;
}

body .quick-top {
  min-height: 34px !important;
  padding: 0 7px 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 1px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body .quick-top::before {
  display: block !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  body .quick-sign {
    width: 96px !important;
  }

  body .quick-phone {
    min-height: 92px !important;
  }

  body .quick-phone strong {
    font-size: 18px !important;
  }

  body .quick-factory,
  body .quick-estimate {
    min-height: 44px !important;
  }

  body .quick-kakao,
  body .quick-store,
  body .quick-talk,
  body .quick-youtube,
  body .quick-online,
  body .quick-top {
    min-height: 32px !important;
    font-size: 11px !important;
  }
}


/* DJS responsive door collection controls */
.door-lineup-controls {
  width: min(1080px, 100%);
  margin: 0 auto 34px;
}

.door-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.door-filter-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #e2dccf;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: #3a352c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(31,28,24,.035);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.door-filter-chip:hover {
  transform: translateY(-1px);
  border-color: #c6a15b;
  box-shadow: 0 12px 24px rgba(31,28,24,.08);
}

.door-filter-chip.active {
  background: #1f1c18;
  border-color: #1f1c18;
  color: #f5f1e9;
  box-shadow: 0 14px 28px rgba(31,28,24,.18);
}

.door-filter-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  position: relative;
  opacity: .78;
}

.door-filter-icon::before,
.door-filter-icon::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid currentColor;
  border-radius: inherit;
}

.door-filter-icon--all {
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, 6px);
  grid-template-rows: repeat(2, 6px);
  gap: 3px;
}

.door-filter-icon--all::before {
  inset: auto;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 9px 0 currentColor, 0 9px currentColor, 9px 9px currentColor;
}

.door-filter-icon--all::after { display: none; }
.door-filter-icon--signature::after { inset: 3px 6px; border-left: 0; border-right: 0; }
.door-filter-icon--classic::before { inset: 3px 6px; }
.door-filter-icon--curve { border-radius: 999px 999px 4px 4px; }
.door-filter-icon--curve::before { inset: 5px 4px 3px; border-radius: 999px 999px 3px 3px; }
.door-filter-icon--grid::before { inset: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent 45%, currentColor 45% 55%, transparent 55%), linear-gradient(0deg, transparent 45%, currentColor 45% 55%, transparent 55%); opacity: .75; }
.door-filter-icon--grid::after { display: none; }
.door-filter-icon--circle { border-radius: 999px; }
.door-filter-icon--circle::before { border-radius: 999px; }
.door-filter-icon--metal-point::before { inset: 3px; border-style: dotted; }
.door-filter-icon--custom::after { inset: -4px 7px; border-top: 0; border-bottom: 0; border-radius: 0; }

.door-filter-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.door-filter-label b {
  font-size: 14px;
  line-height: 1;
}

.door-filter-label small {
  color: #8b8172;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
}

.door-filter-chip.active .door-filter-label small {
  color: rgba(245,241,233,.72);
}

.door-tool-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 134px;
  justify-content: center;
  gap: 12px;
  width: min(576px, 100%);
  margin: 0 auto;
}

.door-search,
.door-sort {
  min-height: 44px;
  border: 1px solid #e2dccf;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  display: flex;
  align-items: center;
  box-shadow: 0 10px 22px rgba(31,28,24,.035);
}

.door-search {
  padding: 0 16px;
  gap: 9px;
}

.door-search > span {
  width: 15px;
  height: 15px;
  border: 1.8px solid #b28a4a;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;
}

.door-search > span::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 1.8px;
  background: #b28a4a;
  transform: rotate(45deg);
  border-radius: 999px;
}

.door-search input,
.door-sort select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #3a352c;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.door-search input::placeholder {
  color: #8b8172;
}

.door-sort {
  padding: 0 12px 0 15px;
  gap: 8px;
}

.door-sort span {
  color: #8b8172;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.door-sort select {
  cursor: pointer;
  font-weight: 950;
}

.door-result-count {
  margin: 13px 0 0;
  color: #8b8172;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.door-result-count strong {
  color: #b28a4a;
}

.door-lineup-empty {
  margin: 30px auto 0;
  padding: 34px 20px;
  border: 1px dashed #d7cdbd;
  border-radius: 8px;
  background: rgba(255,255,255,.58);
  text-align: center;
  color: #5c554a;
}

.door-lineup-empty b,
.door-lineup-empty span {
  display: block;
}

.door-lineup-empty span {
  margin-top: 8px;
  color: #8b8172;
  font-size: 14px;
}

@media (max-width: 900px) {
  .door-filter-row {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 2px 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .door-filter-row::-webkit-scrollbar {
    height: 4px;
  }

  .door-filter-row::-webkit-scrollbar-thumb {
    background: #d7cdbd;
    border-radius: 999px;
  }

  .door-filter-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .door-lineup-controls {
    margin-bottom: 24px;
  }

  .door-filter-chip {
    min-height: 38px;
    padding: 0 12px;
    gap: 7px;
  }

  .door-filter-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .door-filter-label b {
    font-size: 13px;
  }

  .door-filter-label small {
    display: none;
  }

  .door-tool-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .door-search,
  .door-sort {
    min-height: 42px;
    border-radius: 8px;
  }
}


/* DJS large expressive door filter icons */
.door-filter-chip {
  min-height: 54px !important;
  padding: 7px 18px 7px 14px !important;
  gap: 12px !important;
  align-items: center !important;
}

.door-filter-icon {
  width: 30px !important;
  height: 34px !important;
  flex: 0 0 30px !important;
  border-width: 2px !important;
  border-color: currentColor !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: .92 !important;
}

.door-filter-icon::before,
.door-filter-icon::after {
  box-sizing: border-box !important;
  border-color: currentColor !important;
}

.door-filter-icon--all {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
  border: 0 !important;
  background: transparent !important;
  grid-template-columns: repeat(2, 10px) !important;
  grid-template-rows: repeat(2, 10px) !important;
  gap: 5px !important;
}

.door-filter-icon--all::before {
  width: 10px !important;
  height: 10px !important;
  border-radius: 2px !important;
  box-shadow: 15px 0 currentColor, 0 15px currentColor, 15px 15px currentColor !important;
}

.door-filter-icon--signature {
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent 62%, currentColor 62% 68%, transparent 68%) !important;
}

.door-filter-icon--signature::before {
  inset: 6px 8px !important;
  border: 2px solid currentColor !important;
  border-radius: 999px 999px 5px 5px !important;
}

.door-filter-icon--signature::after {
  inset: auto 7px 5px !important;
  height: 5px !important;
  border: 0 !important;
  border-top: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  border-radius: 0 !important;
}

.door-filter-icon--classic {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent 42%, currentColor 42% 48%, transparent 48%) !important;
}

.door-filter-icon--classic::before {
  inset: 5px 7px auto !important;
  height: 9px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
}

.door-filter-icon--classic::after {
  inset: auto 7px 6px !important;
  height: 11px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
}

.door-filter-icon--curve {
  height: 36px !important;
  border-radius: 999px 999px 7px 7px !important;
  background:
    radial-gradient(ellipse at 50% 24%, transparent 0 34%, currentColor 35% 40%, transparent 41%),
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) !important;
}

.door-filter-icon--curve::before {
  inset: 8px 7px 5px !important;
  border: 2px solid currentColor !important;
  border-radius: 999px 999px 5px 5px !important;
}

.door-filter-icon--curve::after {
  display: none !important;
}

.door-filter-icon--grid {
  background:
    linear-gradient(90deg, transparent 31%, currentColor 31% 36%, transparent 36% 64%, currentColor 64% 69%, transparent 69%),
    linear-gradient(0deg, transparent 30%, currentColor 30% 35%, transparent 35% 63%, currentColor 63% 68%, transparent 68%) !important;
}

.door-filter-icon--grid::before,
.door-filter-icon--grid::after {
  display: none !important;
}

.door-filter-icon--circle {
  background:
    radial-gradient(circle at 50% 36%, transparent 0 24%, currentColor 25% 32%, transparent 33%),
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) !important;
  border-radius: 7px !important;
}

.door-filter-icon--circle::before {
  inset: auto 7px 6px !important;
  height: 8px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
}

.door-filter-icon--circle::after {
  display: none !important;
}

.door-filter-icon--metal-point {
  background:
    radial-gradient(circle, currentColor 0 1.4px, transparent 1.6px) 5px 6px / 8px 8px,
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) !important;
}

.door-filter-icon--metal-point::before {
  inset: 5px !important;
  border: 2px dotted currentColor !important;
  border-radius: 4px !important;
}

.door-filter-icon--metal-point::after {
  display: none !important;
}

.door-filter-icon--custom {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) !important;
}

.door-filter-icon--custom::before {
  inset: 6px 8px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
}

.door-filter-icon--custom::after {
  inset: -5px 12px !important;
  border: 0 !important;
  border-left: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  border-radius: 0 !important;
  transform: rotate(90deg) !important;
}

.door-filter-label {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

.door-filter-label b {
  font-size: 14px !important;
}

.door-filter-label small {
  font-size: 9px !important;
}

@media (max-width: 640px) {
  .door-filter-chip {
    min-height: 50px !important;
    padding: 7px 13px 7px 11px !important;
  }

  .door-filter-icon {
    width: 27px !important;
    height: 31px !important;
    flex-basis: 27px !important;
  }

  .door-filter-icon--all {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }

  .door-filter-label {
    align-items: center !important;
  }
}


/* DJS Korean icon-first door filter buttons */
.door-filter-row {
  gap: 14px !important;
}

.door-filter-chip {
  width: 104px !important;
  min-height: 86px !important;
  padding: 11px 8px 10px !important;
  border-radius: 14px !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.door-filter-icon {
  width: 42px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

.door-filter-icon--all {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
}

.door-filter-icon--all::before {
  width: 14px !important;
  height: 14px !important;
  box-shadow: 20px 0 currentColor, 0 20px currentColor, 20px 20px currentColor !important;
}

.door-filter-label {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.door-filter-label b {
  display: block !important;
  width: 100% !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
}

.door-filter-label small {
  display: none !important;
}

.door-filter-chip.active .door-filter-icon {
  color: #f5f1e9 !important;
}

@media (max-width: 900px) {
  .door-filter-chip {
    width: 94px !important;
    min-height: 80px !important;
  }

  .door-filter-icon {
    width: 38px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

@media (max-width: 640px) {
  .door-filter-row {
    gap: 10px !important;
  }

  .door-filter-chip {
    width: 82px !important;
    min-height: 74px !important;
    padding: 9px 7px !important;
    border-radius: 12px !important;
  }

  .door-filter-icon {
    width: 34px !important;
    height: 39px !important;
    flex-basis: 39px !important;
  }

  .door-filter-icon--all {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .door-filter-icon--all::before {
    width: 12px !important;
    height: 12px !important;
    box-shadow: 17px 0 currentColor, 0 17px currentColor, 17px 17px currentColor !important;
  }

  .door-filter-label b {
    font-size: 12px !important;
  }
}

/* ===== 가마찌도어 컬렉션 오버레이 ===== */
.gm-collection-overlay { position: fixed; inset: 0; z-index: 5000; display: none; }
.gm-collection-overlay.on { display: block; }
.gmco-backdrop { position: absolute; inset: 0; background: rgba(20,17,13,.62); }
.gmco-panel { position: absolute; inset: 16px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.45); display: flex; flex-direction: column; animation: gmcoIn .28s ease; }
@keyframes gmcoIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gmco-close { position: absolute; top: 14px; right: 16px; z-index: 3; border: 0; background: rgba(20,17,13,.85); color: #fff; padding: 9px 15px; border-radius: 30px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.gmco-close:hover { background: #1c1913; }
.gmco-frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; }
body.gmco-open { overflow: hidden; }
@media (max-width: 600px) { .gmco-panel { inset: 0; border-radius: 0; } .gmco-close { top: 10px; right: 10px; } }