/* =========================================================
   GYEOLHWI TILEWORKS · FINAL COMPACT UI
   2026-07-26
   - PC/mobile spacing and type scale normalization
   - persistent current-menu underline removal
   - Kakao action color/border consistency
   - project detail hierarchy and compact bottom navigation
   ========================================================= */

:root{
  --gh-green:#1f332a;
  --gh-copper:#b56a47;
  --gh-kakao:#fee500;
  --gh-kakao-border:#d6c000;
  --gh-kakao-ink:#181816;
  --gh-compact-line:rgba(31,51,42,.15);
  --header:72px;
  --head:72px;
}
html{font-size:15.5px!important;scroll-padding-top:84px}
body{line-height:1.62!important}
.wrap,.container{width:min(calc(100% - 40px),1280px)!important}

/* Header/navigation: retain page recognition without a permanent underline. */
.site-header,.header{height:72px!important}
.desktop-nav{gap:17px!important}
.desktop-nav a,.nav a{font-size:.79rem!important;letter-spacing:-.015em!important}
.desktop-nav a.current,.nav a.current{color:var(--gh-copper)!important;font-weight:900!important}
.desktop-nav a.current::after,.nav a.current::after{display:none!important;transform:scaleX(0)!important}
.header-cta,.header-cta.kakao{min-height:44px!important;padding:0 17px!important;font-size:.79rem!important}
.btn{min-height:46px!important;padding:0 18px!important;font-size:.84rem!important}

/* All clearly actionable Kakao buttons use the same yellow and visible border. */
.btn.kakao,
.project-consultation-actions .btn.kakao,
.portfolio-cta .btn.kakao,
.project-cta .btn.kakao,
.case-cta .btn.kakao,
.kakao-contact{
  border:1px solid var(--gh-kakao-border)!important;
  background:var(--gh-kakao)!important;
  color:var(--gh-kakao-ink)!important;
  text-shadow:none!important;
}

/* Main page: reduce vertical dead space without flattening the hierarchy. */
.hero{min-height:720px!important;padding:calc(var(--head) + 52px) 0 54px!important}
.hero-content{max-width:650px!important;padding-top:10px!important}
.hero h1{margin-bottom:20px!important;font-size:clamp(3.2rem,5.9vw,5.85rem)!important;line-height:1.04!important}
.hero-lead{margin-bottom:23px!important;font-size:.96rem!important;line-height:1.72!important}
.hero-badge{margin-top:17px!important}
.hero-meaning{right:max(20px,calc((100vw - 1280px)/2))!important;bottom:34px!important;width:310px!important;padding:21px!important}
.section{padding:78px 0!important}
.headline{grid-template-columns:124px minmax(0,1fr)!important;gap:28px!important;margin-bottom:39px!important}
.headline h2{max-width:760px!important;margin-bottom:11px!important;font-size:clamp(2.2rem,3.65vw,3.65rem)!important;line-height:1.16!important}
.headline p{font-size:.92rem!important;line-height:1.72!important}
.index{width:36px!important;height:36px!important}
.meaning{gap:14px!important}
.meaning-title{min-height:410px!important;padding:35px 33px!important}
.meaning-title h2{margin:24px 0 17px!important;font-size:clamp(2.15rem,3.45vw,3.45rem)!important}
.meaning-title>p:not(.slogan){margin-bottom:24px!important}
.services{gap:12px!important}
.service{min-height:292px!important;padding:24px!important}
.service-symbol{width:52px!important;height:52px!important;margin:27px 0 22px!important}
.service h3{font-size:1.22rem!important}
.gallery{gap:14px!important}
.gallery-main{min-height:510px!important}
.gallery-side{gap:14px!important}
.gallery-card{min-height:248px!important}
.process{gap:9px!important}
.process article{padding:22px 18px!important}
.process h3{margin:17px 0 8px!important;font-size:1.08rem!important}
.standard{min-height:180px!important;padding:25px!important;grid-template-columns:45px 1fr!important}
.area{gap:48px!important}
.area-copy h2{margin-bottom:18px!important;font-size:clamp(2.25rem,3.75vw,3.8rem)!important}
.area-points{margin-top:24px!important}
.contact-grid{gap:52px!important}
.contact-copy h2{margin:10px 0 17px!important;font-size:clamp(2.25rem,3.65vw,3.65rem)!important}
.contact-list{margin-top:28px!important}
.form{padding:30px!important}
.footer{padding-top:38px!important}
.footer-top{padding-bottom:25px!important}

/* About / services / contact pages: compact hero and section rhythm. */
.sub-hero{padding:calc(var(--header) + 38px) 0 50px!important}
.sub-hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:42px!important;align-items:center!important}
.sub-hero h1{max-width:11.5em!important;font-size:clamp(2.7rem,3.85vw,4.15rem)!important;line-height:1.16!important;letter-spacing:-.055em!important}
.sub-hero-copy{padding-bottom:0!important}
.sub-hero-copy p{max-width:620px!important;font-size:.93rem!important;line-height:1.72!important}
.sub-hero-links{margin-top:20px!important}
.content-section{padding:68px 0!important}
.section-head{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;gap:38px!important;margin-bottom:29px!important;align-items:end!important}
.section-head h2{font-size:clamp(2.05rem,3vw,3.15rem)!important;line-height:1.19!important}
.section-head p{font-size:.9rem!important;line-height:1.72!important}
.sub-kicker,.section-kicker{margin-bottom:12px!important;font-size:.63rem!important}
.brand-meaning-grid,.service-card-grid,.standard-grid{gap:12px!important}
.meaning-card,.service-card,.standard-card{padding:26px!important}
.meaning-card b,.service-card b,.standard-card b{margin-bottom:20px!important}
.meaning-card h3,.service-card h3,.standard-card h3{margin-bottom:9px!important;font-size:1.22rem!important}
.about-statement{gap:42px!important}
.about-statement blockquote{font-size:clamp(2.15rem,3.15vw,3.25rem)!important;line-height:1.24!important}
.fact-list{margin-top:21px!important}
.fact-list div{padding:14px 0!important}
.process-wide article{min-height:160px!important;padding:21px 18px!important}
.process-wide b{margin-bottom:22px!important}
.page-cta{padding:54px 0!important}
.page-cta-box{gap:26px!important;padding:29px!important}
.page-cta-box h2{font-size:clamp(1.9rem,2.8vw,2.85rem)!important;line-height:1.2!important}
.contact-page-grid{gap:42px!important}
.contact-panel,.contact-form{padding:30px!important}
.contact-panel h2{font-size:clamp(2.1rem,3vw,3rem)!important}
.contact-links{margin-top:24px!important}
.contact-form h2{font-size:1.85rem!important}
.contact-form textarea{min-height:125px!important}

/* Project archive: smaller hero and denser cards. */
.portfolio-hero{padding:calc(var(--header) + 42px) 0 50px!important}
.hero-grid{grid-template-columns:minmax(0,1fr) 210px!important;gap:46px!important;align-items:end!important}
.portfolio-hero .breadcrumb{margin-bottom:23px!important}
.portfolio-hero h1{max-width:830px!important;margin-bottom:17px!important;font-size:clamp(2.85rem,4.45vw,4.55rem)!important;line-height:1.12!important}
.lead{font-size:.92rem!important;line-height:1.72!important}
.hero-count{padding:21px 0 14px!important}
.hero-count .count-label{margin-bottom:10px!important}
.hero-count .count-value b{font-size:3.35rem!important}
.hero-count p{margin-top:10px!important}
.portfolio-section{padding:68px 0!important}
.portfolio-section .section-head{margin-bottom:31px!important}
.portfolio-section .section-head h2{font-size:clamp(2.05rem,3vw,3.15rem)!important}
.project-list{gap:18px!important}
.project-copy{padding:25px 24px 27px!important}
.project-copy h3{margin:8px 0 11px!important;font-size:clamp(1.65rem,2.3vw,2.35rem)!important;line-height:1.2!important}
.project-copy>p{font-size:.9rem!important;line-height:1.68!important}
.tags{margin:18px 0!important}
.project-copy dl{margin-bottom:20px!important}
.portfolio-cta{padding:56px 0!important}
.portfolio-cta .cta{gap:28px!important;padding:30px!important}
.portfolio-cta h2{font-size:clamp(1.9rem,2.8vw,2.9rem)!important;line-height:1.2!important}
.portfolio-cta .cta-actions .btn{min-height:48px!important;font-size:.82rem!important}

/* Project detail pages: clean editorial hierarchy and shorter scans. */
.case-hero{padding:calc(var(--header) + 35px) 0 44px!important}
.case-hero .breadcrumb{margin-bottom:22px!important}
.case-hero-grid{grid-template-columns:minmax(0,1fr) minmax(410px,.9fr)!important;gap:45px!important;align-items:center!important}
.hero-copy h1,.case-title h1{max-width:12em!important;margin-bottom:18px!important;font-size:clamp(2.85rem,3.65vw,3.9rem)!important;line-height:1.13!important;letter-spacing:-.055em!important}
.hero-copy>p,.case-title>p{max-width:650px!important;font-size:.92rem!important;line-height:1.72!important}
.case-title .tags,.hero-copy .tags{margin-top:18px!important}
.hero-photo{box-shadow:0 18px 45px rgba(31,51,42,.1)!important}
.overview,.overview-strip{margin-top:27px!important}
.overview div,.overview-strip div{padding:13px!important}
.case-intro,.intro-section{padding:58px 0!important}
.case-intro .intro-grid,.intro-section .intro-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;gap:39px!important;align-items:center!important}
.case-intro h2,.intro-grid h2{font-size:clamp(2rem,2.85vw,2.95rem)!important;line-height:1.21!important}
.case-intro .intro-grid>div:last-child,.intro-grid>div:last-child{padding:0 0 0 25px!important}
.gallery-section,.bathroom-section,.work-points,.work-section,.process-section,.related-section{padding:64px 0!important}
.gallery-head,.room-head,.work-section header{gap:36px!important;margin-bottom:27px!important;padding-bottom:19px!important}
.gallery-head h2,.room-head h2,.work-section header h2,.work-points h2{font-size:clamp(1.9rem,2.55vw,2.65rem)!important;line-height:1.2!important}
.gallery-head>p{padding-left:24px!important;font-size:.9rem!important;line-height:1.7!important}
.room-head{align-items:end!important}
.room-facts{gap:12px!important}
.work-grid{gap:11px!important}
.work-grid article{min-height:205px!important;padding:24px!important}
.work-grid h3{margin:24px 0 10px!important;font-size:1.08rem!important}
.process-section header{margin-bottom:23px!important}
.process-section header h2{font-size:1.72rem!important}
.process-grid div{min-height:116px!important;padding:16px 13px!important}
.process-grid b{margin-bottom:16px!important}
.related{gap:38px!important}
.related h2{font-size:clamp(1.9rem,2.65vw,2.7rem)!important}
.related>a{min-height:176px!important;grid-template-columns:210px 1fr!important}
.related>a div{padding:24px!important}
.related>a strong{font-size:1.35rem!important}

/* Compact project bottom navigation. */
.project-consultation.project-bottom-menu{padding:18px 0 20px!important;background:#eee8dd!important}
.project-consultation-actions{display:grid!important;width:100%!important;max-width:none!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
.project-consultation-actions .btn{
  display:grid!important;
  min-height:58px!important;
  padding:0 17px!important;
  grid-template-columns:1fr auto!important;
  gap:8px!important;
  align-items:center!important;
  justify-content:stretch!important;
  border-width:1px!important;
  text-align:left!important;
  box-shadow:none!important;
}
.project-consultation-actions .cta-index{display:none!important}
.project-consultation-actions .cta-copy{display:flex!important;min-width:0!important;flex-direction:column!important;gap:1px!important}
.project-consultation-actions .cta-copy small{display:block!important;opacity:.58!important;font-size:.48rem!important;letter-spacing:.12em!important}
.project-consultation-actions .cta-copy strong{display:block!important;font-size:.78rem!important;line-height:1.2!important;white-space:nowrap!important}
.project-consultation-actions .cta-arrow{display:block!important;font-size:.9rem!important;opacity:.7!important}
.project-consultation-actions .btn.quote{grid-column:auto!important;background:#f8f5ef!important}

/* Bathroom design page. */
.design-hero{padding:calc(var(--head) + 38px) 0 55px!important}
.design-hero-grid{grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr)!important;gap:43px!important}
.design-hero h1{margin-bottom:17px!important;font-size:clamp(2.8rem,4.05vw,4.15rem)!important;line-height:1.12!important}
.design-actions{margin-top:20px!important;gap:8px!important}
.design-hero .hero-photo{height:520px!important}
.disclaimer{margin-top:18px!important;padding:12px 14px!important}
.styles{gap:16px!important}
.kakao-contact{margin:20px 0 12px!important;padding:16px 18px!important}

/* Footer density. */
.site-footer{padding-bottom:20px!important}
.footer-contacts a{min-height:75px!important;padding-top:16px!important;padding-bottom:16px!important}
.footer-main{padding:27px 0 22px!important}
.footer-bottom{padding-top:15px!important}

@media(max-width:1023px){
  .wrap,.container{width:min(calc(100% - 30px),1280px)!important}
  .case-hero-grid{grid-template-columns:minmax(0,.94fr) minmax(360px,1.06fr)!important;gap:30px!important}
  .hero-copy h1,.case-title h1{font-size:clamp(2.7rem,5vw,3.45rem)!important}
  .project-consultation-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:850px){
  :root{--header:64px;--head:64px}
  html{font-size:15px!important;scroll-padding-top:74px}
  body{padding-bottom:58px!important}
  .site-header,.header{height:64px!important}
  .wrap,.container{width:min(calc(100% - 26px),1280px)!important}
  .btn{min-height:44px!important;padding:0 15px!important;font-size:.81rem!important}

  /* Mobile Kakao normalization: no green variants, no borderless variants. */
  .mobile-kakao{
    min-height:48px!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid var(--gh-kakao-border)!important;
    background:var(--gh-kakao)!important;
    color:var(--gh-kakao-ink)!important;
    font-size:.84rem!important;
    font-weight:900!important;
  }
  .mobilebar,.mobile-bar{height:58px!important;grid-template-columns:.82fr 1fr 1.28fr!important}
  .mobilebar>a,.mobile-bar>a{font-size:.73rem!important}
  .mobilebar>a[href*="pf.kakao.com"],.mobile-bar>a[href*="pf.kakao.com"]{
    border:1px solid var(--gh-kakao-border)!important;
    border-bottom:0!important;
    background:var(--gh-kakao)!important;
    color:var(--gh-kakao-ink)!important;
  }
  .mobile-menu nav{padding:12px 0!important}
  .mobile-menu nav a,.v9-menu-links a{min-height:50px!important;font-size:1rem!important}

  .hero{min-height:610px!important;padding:calc(var(--head) + 34px) 0 40px!important}
  .hero-bg{inset:41% 0 0!important}
  .hero-content{padding-top:0!important}
  .hero h1{font-size:clamp(2.75rem,10.5vw,4rem)!important;line-height:1.08!important}
  .hero-lead{font-size:.91rem!important}
  .hero-meaning{position:relative!important;right:auto!important;bottom:auto!important;width:auto!important;margin-top:25px!important;padding:18px!important}
  .section{padding:56px 0!important}
  .headline{grid-template-columns:1fr!important;gap:13px!important;margin-bottom:27px!important}
  .headline h2{font-size:clamp(1.95rem,7vw,2.65rem)!important}
  .meaning-title{min-height:auto!important;padding:27px 23px!important}
  .meaning-title h2{font-size:clamp(2rem,8vw,2.85rem)!important}
  .service{min-height:auto!important;padding:22px!important}
  .gallery-main{min-height:350px!important}
  .gallery-card{min-height:245px!important}
  .standard{min-height:auto!important;padding:22px!important}
  .contact-grid{gap:31px!important}
  .form{padding:24px!important}

  .sub-hero{padding:calc(var(--header) + 29px) 0 40px!important}
  .sub-hero-grid,.section-head,.about-statement,.contact-page-grid,.page-cta-box{grid-template-columns:1fr!important;gap:19px!important}
  .sub-hero h1{font-size:clamp(2.25rem,9.4vw,3.2rem)!important}
  .content-section{padding:52px 0!important}
  .section-head{margin-bottom:24px!important}
  .section-head h2{font-size:clamp(1.85rem,7.3vw,2.55rem)!important}
  .meaning-card,.service-card,.standard-card{padding:22px!important}
  .about-statement blockquote{font-size:clamp(2rem,8.2vw,2.8rem)!important}
  .process-wide article{min-height:auto!important;padding:19px!important}
  .process-wide b{margin-bottom:13px!important}
  .page-cta{padding:46px 0!important}
  .page-cta-box{padding:23px!important}
  .contact-panel,.contact-form{padding:24px!important}

  .portfolio-hero{padding:calc(var(--header) + 31px) 0 41px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:25px!important}
  .portfolio-hero h1{font-size:clamp(2.35rem,9vw,3.25rem)!important}
  .hero-count{max-width:none!important;width:100%!important}
  .portfolio-section{padding:52px 0!important}
  .project-copy{padding:23px!important}
  .project-copy h3{font-size:clamp(1.6rem,7vw,2.15rem)!important}
  .portfolio-cta{padding:46px 0!important}
  .portfolio-cta .cta{padding:23px!important}

  .case-hero{padding:calc(var(--header) + 27px) 0 38px!important}
  .case-hero-grid,.case-intro .intro-grid,.intro-section .intro-grid,.gallery-head,.room-head,.work-section header,.related{grid-template-columns:1fr!important;gap:18px!important}
  .hero-copy h1,.case-title h1{max-width:none!important;font-size:clamp(2.25rem,8.9vw,3.15rem)!important}
  .hero-copy>p,.case-title>p{font-size:.9rem!important}
  .case-intro,.intro-section,.gallery-section,.bathroom-section,.work-points,.work-section,.process-section,.related-section{padding:50px 0!important}
  .case-intro .intro-grid>div:last-child,.intro-grid>div:last-child,.gallery-head>p{padding:0!important;border-left:0!important}
  .case-intro h2,.intro-grid h2,.gallery-head h2,.room-head h2,.work-section header h2,.work-points h2{font-size:clamp(1.8rem,7.6vw,2.45rem)!important}
  .gallery-head,.room-head,.work-section header{margin-bottom:22px!important;padding-bottom:16px!important}
  .work-grid article{min-height:auto!important;padding:21px!important}
  .process-grid div{min-height:auto!important;padding:15px!important}
  .related>a{grid-template-columns:1fr!important;min-height:auto!important}
  .related>a img{height:215px!important}
  .project-consultation.project-bottom-menu{padding:14px 0 16px!important}
  .project-consultation-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .project-consultation-actions .btn{min-height:52px!important;padding:0 13px!important}
  .project-consultation-actions .cta-copy small{display:none!important}
  .project-consultation-actions .cta-copy strong{font-size:.76rem!important}

  .design-hero{padding:calc(var(--head) + 28px) 0 44px!important}
  .design-hero-grid{grid-template-columns:1fr!important;gap:27px!important}
  .design-hero h1{font-size:clamp(2.3rem,9.2vw,3.2rem)!important}
  .design-hero .hero-photo{height:390px!important}
  .styles{grid-template-columns:1fr!important;gap:13px!important}
}

@media(max-width:520px){
  .wrap,.container{width:min(calc(100% - 22px),1280px)!important}
  .hero{min-height:570px!important}
  .section{padding:48px 0!important}
  .content-section{padding:46px 0!important}
  .sub-hero{padding-bottom:35px!important}
  .page-cta{padding:40px 0!important}
  .portfolio-section,.case-intro,.intro-section,.gallery-section,.bathroom-section,.work-points,.work-section,.process-section,.related-section{padding:44px 0!important}
  .project-consultation-actions{grid-template-columns:1fr 1fr!important}
  .project-consultation-actions .btn{min-height:50px!important}
  .mobilebar,.mobile-bar{height:56px!important}
  body{padding-bottom:56px!important}
}

/* Final Kakao consistency pass: header and prominent photo-consultation actions. */
.header-cta,.header-cta.kakao,
.page-cta-actions a[href*="pf.kakao.com"],
.sub-hero-links a[href*="pf.kakao.com"]{
  border:1px solid var(--gh-kakao-border)!important;
  background:var(--gh-kakao)!important;
  color:var(--gh-kakao-ink)!important;
  box-shadow:0 7px 18px rgba(112,94,0,.12)!important;
}
.header-cta:hover,.header-cta.kakao:hover,
.page-cta-actions a[href*="pf.kakao.com"]:hover,
.sub-hero-links a[href*="pf.kakao.com"]:hover{
  border-color:#c9b500!important;
  background:#f2da00!important;
  color:var(--gh-kakao-ink)!important;
}


/* FINAL NAVIGATION + MOBILE HOME FLOW FIX · 2026-07-26 */
/* Exactly one desktop menu item is highlighted at a time. */
.desktop-nav a,
.header .nav a{
  color:var(--gh-kakao-ink, #181816)!important;
  font-weight:780!important;
}
.desktop-nav a.current,
.header .nav a.current{
  color:var(--gh-copper, #b56a47)!important;
  font-weight:900!important;
}
.desktop-nav a.current::after,
.header .nav a.current::after{
  display:none!important;
  transform:scaleX(0)!important;
}

/* Home item added ahead of About; keep the full PC menu comfortably inside the header. */
@media (min-width:851px){
  .desktop-nav,
  .header .nav{
    gap:15px!important;
  }
  .desktop-nav a,
  .header .nav a{
    font-size:.77rem!important;
  }
}

/* Mobile menu also shows the active destination without a persistent underline. */
.v9-menu-links a.current,
.mobile-menu nav a.current{
  color:var(--gh-copper, #b56a47)!important;
}
.v9-menu-links a.current strong{
  color:inherit!important;
}

/* Mobile home: content, photo and brand meaning are now three separate blocks.
   No button or text sits on top of the bathroom photo. */
@media (max-width:850px){
  .hero{
    display:flex!important;
    min-height:0!important;
    padding:calc(var(--head) + 34px) 0 0!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:var(--paper, #f5f2eb)!important;
  }
  .hero > .container{
    position:relative!important;
    z-index:2!important;
    order:1!important;
  }
  .hero > .hero-gridline{
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    pointer-events:none!important;
  }
  .hero > .hero-bg{
    position:relative!important;
    z-index:1!important;
    inset:auto!important;
    order:2!important;
    width:100%!important;
    height:clamp(300px, 84vw, 430px)!important;
    margin:26px 0 0!important;
  }
  .hero > .hero-bg::after{
    background:linear-gradient(180deg, rgba(245,242,235,.14) 0%, rgba(245,242,235,0) 23%)!important;
  }
  .hero > .hero-meaning{
    position:relative!important;
    z-index:2!important;
    right:auto!important;
    bottom:auto!important;
    order:3!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:22px max(24px, calc((100vw - 1280px)/2))!important;
    background:#24231f!important;
    box-shadow:none!important;
  }
  .hero > .hero-meaning b,
  .hero > .hero-meaning p{
    max-width:680px!important;
  }
}

@media (max-width:520px){
  .hero > .hero-bg{
    height:clamp(290px, 92vw, 390px)!important;
    margin-top:22px!important;
  }
  .hero > .hero-meaning{
    padding:20px 22px 22px!important;
  }
}