:root {
  --bg:#f5efe5; --paper:#fffaf2; --ink:#1f1a16; --muted:#6b5d50;
  --dark:#2b241f; --brown:#8b5a34; --gold:#c98e55; --line:#e7d7c5;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif; line-height:1.65; word-break:keep-all; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:50; background:#2b241f; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.topline { border-bottom:1px solid rgba(255,255,255,.08); }
.header-row { height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo span { display:block; font-size:25px; font-weight:950; letter-spacing:-.045em; }
.logo small { display:block; font-size:12px; color:#e6d3bd; margin-top:-5px; }
.top-menu { display:flex; align-items:center; gap:18px; font-size:15px; font-weight:700; white-space:nowrap; }
.nav-cta { padding:9px 15px; background:#fff; color:#2b241f; border-radius:999px; font-weight:900; }
.subnav { background:#f7f0e5; color:#3d3128; border-bottom:1px solid var(--line); }
.subnav-row { height:45px; display:flex; align-items:center; gap:18px; overflow:auto; white-space:nowrap; font-size:14px; font-weight:800; }
.hero { position:relative; min-height:540px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.56),rgba(0,0,0,.16)), url('assets/images/main-hero-rooftile-worker.jpg') 78% center/cover no-repeat; }
.hero .wrap { position:relative; padding:78px 0 96px; }
.hero h1 { margin:12px 0 18px; font-size:clamp(44px,6.3vw,76px); line-height:1.02; letter-spacing:-.065em; }
.hero p { max-width:850px; font-size:clamp(18px,2.15vw,24px); font-weight:800; color:#f4e0c8; }
.eyebrow { display:inline-block; padding:8px 13px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.11); font-weight:950; letter-spacing:.08em; }
.btn { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 24px; border-radius:999px; font-weight:950; border:1px solid transparent; }
.btn.primary { background:var(--gold); color:#1d140d; }
.btn.ghost { background:transparent; color:inherit; border-color:rgba(255,255,255,.4); }
.hero .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-cases { margin-top:-58px; position:relative; z-index:3; }
.case-grid-top { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.case-card { background:var(--paper); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 18px 45px rgba(55,36,20,.12); }
.case-card .imgs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.case-card .imgbox { position:relative; height:180px; overflow:hidden; }
.case-card img { width:100%; height:100%; object-fit:cover; }
.case-card .stamp { position:absolute; left:10px; top:10px; background:rgba(0,0,0,.68); color:#fff; font-size:12px; font-weight:950; border-radius:999px; padding:5px 9px; }
.case-card .body { padding:18px; }
.badge { display:inline-block; background:#efe2d2; color:#794d2b; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:950; margin-bottom:8px; }
.case-card h3 { margin:0 0 6px; font-size:21px; letter-spacing:-.04em; }
.case-card p { margin:0; color:var(--muted); font-size:14px; }
.more-row { text-align:center; margin-top:24px; }
.section { padding:86px 0; }
.section-title { margin-bottom:28px; }
.section-title h2 { margin:0; font-size:clamp(32px,4.2vw,48px); line-height:1.12; letter-spacing:-.055em; }
.section-title p { margin:10px 0 0; color:var(--muted); font-size:18px; font-weight:650; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:24px; min-height:200px; transition:.2s; }
.service-card:hover { transform:translateY(-3px); box-shadow:0 18px 38px rgba(55,36,20,.10); }
.service-card .label { color:#9c6738; font-weight:950; letter-spacing:.08em; font-size:13px; }
.service-card h3 { margin:10px 0 10px; font-size:24px; letter-spacing:-.045em; }
.service-card p { color:var(--muted); margin-bottom:18px; }
.direct-section { background:var(--dark); color:#fff; padding:78px 0; }
.direct-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
.direct-section h2 { margin:0; font-size:clamp(34px,4.4vw,52px); line-height:1.1; letter-spacing:-.055em; }
.direct-section p { color:#e5d1ba; font-size:18px; }
.trust-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.trust-item { border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:22px; background:rgba(255,255,255,.06); }
.trust-item strong { display:block; font-size:22px; margin-bottom:8px; }
.process { counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:24px; }
.step .num { font-size:32px; color:#b9814d; font-weight:950; }
.step h3 { font-size:23px; margin:8px 0; letter-spacing:-.04em; }
.step p { color:var(--muted); font-size:15px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); padding:18px 4px; }
summary { cursor:pointer; font-weight:950; font-size:19px; }
details p { color:var(--muted); padding-top:10px; }
.feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.feature { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:22px; }
.feature h3 { margin:0 0 8px; font-size:22px; }
.bottom-consult { padding:70px 0; background:#efe1d0; }
.consult-box { background:var(--dark); color:#fff; border-radius:30px; padding:38px; display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; }
.consult-box h2 { margin:0 0 8px; font-size:36px; letter-spacing:-.045em; }
.consult-box p { color:#e6d1ba; }
.mini-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.mini-badges span { border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 11px; font-weight:850; }
.consult-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.area-links { padding:28px 0; background:#f8f2e9; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.area-links h3 { margin:0 0 12px; }
.area-links a { display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:999px; margin:4px; background:#fffaf2; font-weight:800; }
.footer { background:#2b241f; color:#fff; padding:48px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:32px; }
.footer h3,.footer h4 { margin:0 0 12px; }
.footer p,.footer li { color:#dcc9b3; }
.footer ul { list-style:none; padding:0; margin:0; }
.footer-cta { display:inline-block; margin-top:12px; padding:10px 16px; border-radius:999px; background:#fff; color:#2b241f; font-weight:950; }
.copyright { text-align:center; padding:20px 0; margin-top:30px; border-top:1px solid rgba(255,255,255,.08); color:#bfae9b; font-size:13px; }
.page-hero { background:var(--dark); color:#fff; padding:74px 0; }
.page-hero .label { display:inline-block; color:#d99f62; font-weight:950; letter-spacing:.1em; margin-bottom:8px; }
.page-hero h1 { margin:0 0 14px; font-size:clamp(38px,5.4vw,64px); line-height:1.06; letter-spacing:-.06em; }
.page-hero p { max-width:820px; font-size:19px; color:#e8d3bc; font-weight:750; }
.breadcrumb { color:#c9b59f; margin-bottom:12px; font-size:14px; }
.content { padding:74px 0; }
.content-grid { display:grid; grid-template-columns:1fr 320px; gap:34px; align-items:start; }
.prose { background:var(--paper); border:1px solid var(--line); border-radius:28px; padding:34px; }
.prose h2 { font-size:30px; margin:10px 0 16px; letter-spacing:-.045em; }
.type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:24px 0 34px; }
.type-card { border:1px solid var(--line); border-radius:22px; padding:22px; background:#fffdf7; }
.type-card .code { color:#9a6337; font-weight:950; letter-spacing:.08em; font-size:13px; }
.type-card h3 { margin:8px 0; font-size:21px; }
.side-card { position:sticky; top:140px; background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:24px; }
.side-card h3 { margin-top:0; font-size:22px; }
.before-after { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 28px; }
.ba { position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--line); }
.ba img { height:320px; width:100%; object-fit:cover; }
.ba span { position:absolute; left:12px; top:12px; z-index:2; background:rgba(0,0,0,.68); color:#fff; padding:5px 10px; border-radius:999px; font-weight:950; font-size:12px; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery img { border-radius:18px; height:230px; width:100%; object-fit:cover; border:1px solid var(--line); }
.notice { margin-top:24px; padding:18px; border-radius:18px; background:#f0e3d3; color:#5f4e40; font-weight:750; }
.consult-panel { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.consult-panel div { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:20px; }
.sitemap-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sitemap-list a { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:18px; font-weight:900; }
@media (max-width:900px) {
  .top-menu { display:none; }
  .case-grid-top,.service-grid,.process,.feature-row,.direct-grid,.footer-grid,.content-grid,.type-grid,.consult-box,.consult-panel,.sitemap-list { grid-template-columns:1fr; }
  .hero h1 { font-size:42px; }
  .case-card .imgbox { height:150px; }
  .subnav-row { gap:14px; }
  .before-after { grid-template-columns:1fr; }
}


/* update: duplicated secondary navigation removed */
.subnav,
.subnav-row {
  display: none !important;
}


/* update: prevent header menu overlap */
.header-row {
  gap: 32px;
}
.top-menu {
  gap: 24px;
  flex-shrink: 0;
}
.logo {
  flex-shrink: 0;
}
.nav-cta {
  margin-left: 4px;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .top-menu {
    gap: 16px;
    font-size: 14px;
  }
  .nav-cta {
    padding: 8px 13px;
  }
}


/* update: restore 전체 서비스 without overlap */
.header-row { gap: 20px !important; }
.logo { flex-shrink: 0; }
.logo span { font-size: 23px; }
.top-menu { display:flex; align-items:center; gap: 16px !important; font-size: 14px !important; font-weight: 700; white-space: nowrap; flex-shrink: 1; }
.top-menu a { white-space: nowrap; }
.nav-cta { margin-left: 2px !important; padding: 8px 14px !important; }
@media (max-width: 1180px) { .wrap { width:min(1240px,calc(100% - 24px)); } .top-menu { gap: 12px !important; font-size: 13px !important; } .logo span { font-size: 21px; } .logo small { font-size: 11px; } .nav-cta { padding: 8px 12px !important; } }
@media (max-width: 900px) { .top-menu { display:none !important; } }


/* update: main hero image replaced */
@media (max-width: 900px) {
  .hero::before { background: linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.56),rgba(0,0,0,.16)), url('assets/images/main-hero-rooftile-worker.jpg') 68% center/cover no-repeat !important; }
}


/* update v11: clean footer layout and prevent duplicated-looking copy */
.footer-grid {
  grid-template-columns: 1.35fr .75fr 1fr !important;
  column-gap: 58px !important;
}
.footer p {
  max-width: 420px;
}
.footer li {
  margin-bottom: 7px;
  line-height: 1.55;
}
.footer h4 {
  color: #ffffff;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    row-gap: 30px !important;
  }
}


/* update v13: SEO internal-link chip menu */
.quick-links {
  background: #f7f0e5;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}
.quick-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 7px 0;
  scrollbar-width: none;
}
.quick-row::-webkit-scrollbar {
  display: none;
}
.quick-row span {
  font-size: 13px;
  font-weight: 950;
  color: #8b5a34;
  margin-right: 4px;
}
.quick-row a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #e1cfb9;
  border-radius: 999px;
  background: #fffaf2;
  font-size: 13px;
  font-weight: 850;
  color: #3d3128;
}
.case-card img,
.gallery img,
.before-after img {
  background: #eadfce;
}

/* update v13: detailed service content blocks */
.detail-block {
  margin: 34px 0;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.detail-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  background: #fffdf7;
}
.detail-card h3 {
  margin: 0 0 8px;
  font-size: 21px;
  letter-spacing: -0.04em;
}
.detail-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}
@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}


/* update v18: reduce oversized headings for better readability */


/* update v19: paragraph spacing, card spacing, button sizing refinement */
body, p { line-height: 1.72; }
.section { padding: 78px 0; }
.content { padding: 70px 0; }
.section-title { margin-bottom: 32px; }
.section-title p { line-height: 1.65; max-width: 980px; }
.hero .wrap { padding: 72px 0 88px; }
.hero p { line-height: 1.55; margin-top: 0; }
.hero .actions { gap: 10px; margin-top: 24px; }
.btn { min-height: 48px; padding: 0 22px; font-size: 15.5px; }
.nav-cta { min-height: 42px; display: inline-flex; align-items: center; }
.quick-row { gap: 10px; }
.quick-row a { min-height: 34px; padding: 0 13px; }
.case-grid-top { gap: 22px; }
.case-card { border-radius: 22px; }
.case-card .imgbox { height: 176px; }
.case-card .body { padding: 20px; }
.case-card h3 { margin-bottom: 8px; }
.case-card p { line-height: 1.68; }
.service-grid { gap: 22px; }
.service-card { padding: 26px; min-height: 190px; }
.service-card p { line-height: 1.68; margin-bottom: 16px; }
.process, .feature-row, .detail-grid, .type-grid { gap: 18px; }
.step { padding: 26px 24px; }
.step p, .feature p, .detail-card p, .type-card p, .side-card p, .side-card li { line-height: 1.68; }
.feature, .type-card { padding: 24px; }
.detail-card { padding: 22px; }
.gallery, .before-after { gap: 14px; }
.consult-box { padding: 36px; gap: 24px; }
.consult-box p { line-height: 1.65; }
.consult-actions { gap: 12px; }
.mini-badges { gap: 9px; }
.area-links a { padding: 8px 13px; }
.footer { padding-top: 52px; }
.footer-grid { column-gap: 64px !important; }
.footer p, .footer li { line-height: 1.68; }
.side-card { padding: 26px; }

@media (max-width: 900px) {
  .section { padding: 58px 0; }
  .content { padding: 54px 0; }
  .hero .wrap { padding: 58px 0 72px; }
  .btn { min-height: 46px; padding: 0 20px; }
  .case-grid-top, .service-grid, .process, .feature-row, .detail-grid, .type-grid { gap: 16px; }
  .case-card .imgbox { height: 152px; }
}


/* update v20: mobile sticky header consultation button */
.mobile-header-cta {
  display: none;
}
@media (max-width: 900px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .header-row {
    height: 74px;
    gap: 12px !important;
  }
  .logo span {
    font-size: 27px !important;
    line-height: 1.05;
  }
  .logo small {
    font-size: 12px !important;
    margin-top: 2px;
  }
  .mobile-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    background: #ffffff;
    color: #2b241f;
    font-size: 14px;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
  }
  .quick-links {
    z-index: 90;
  }
}
@media (max-width: 390px) {
  .mobile-header-cta {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
  .logo span {
    font-size: 25px !important;
  }
  .logo small {
    font-size: 11px !important;
  }
}


/* update v21: mobile readability fixes */
h1, h2, h3, strong, .btn, .badge, .quick-row a, .mini-badges span {
  word-break: keep-all;
  overflow-wrap: normal;
}
@media (max-width: 900px) {
  body {
    line-height: 1.72;
  }

  /* dark direct section: prevent words like 직접시공 from breaking */
  .direct-section {
    padding: 58px 0 64px;
  }
  .direct-grid {
    gap: 24px !important;
  }
  .direct-section h2 {
    font-size: clamp(32px, 8.8vw, 42px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.055em;
  }
  .direct-section p {
    font-size: 18px;
    line-height: 1.68;
  }
  .trust-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .trust-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 14px;
    padding: 18px 20px !important;
    border-radius: 18px;
  }
  .trust-item strong {
    font-size: 22px !important;
    line-height: 1.18;
    white-space: nowrap;
    margin: 0 !important;
  }
  .trust-item span,
  .trust-item p {
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
  }

  /* service and process cards: avoid cramped text */
  .service-card h3,
  .step h3,
  .feature h3,
  .detail-card h3,
  .type-card h3 {
    white-space: normal;
    line-height: 1.28;
  }
  .service-card p,
  .step p,
  .feature p,
  .detail-card p,
  .type-card p {
    font-size: 15.5px;
    line-height: 1.68;
  }
  .service-card,
  .step,
  .feature,
  .detail-card,
  .type-card {
    padding: 22px !important;
  }

  /* hero readability */
  .hero h1 {
    font-size: clamp(40px, 12vw, 52px) !important;
    line-height: 1.05 !important;
  }
  .hero p {
    font-size: clamp(19px, 5.4vw, 25px) !important;
    line-height: 1.52 !important;
  }
  .hero .actions {
    gap: 10px;
  }

  /* page hero readability */
  .page-hero {
    padding: 54px 0 58px;
  }
  .page-hero h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.12 !important;
  }
  .page-hero p {
    font-size: 17px !important;
    line-height: 1.64;
  }

  /* bottom consult box */
  .consult-box {
    padding: 28px !important;
  }
  .consult-box h2 {
    font-size: 32px !important;
    line-height: 1.18;
  }
  .mini-badges span {
    font-size: 14px;
    padding: 7px 10px;
  }
}

@media (max-width: 420px) {
  .trust-item {
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 17px 18px !important;
  }
  .trust-item strong {
    font-size: 21px !important;
  }
  .trust-item span,
  .trust-item p {
    font-size: 15px;
  }
  .direct-section h2 {
    font-size: clamp(30px, 8.6vw, 38px) !important;
  }
}