@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600&family=Playfair+Display:wght@400;500&display=swap');:root{--ink:#292923;--muted:#77776d;--cream:#f6f4ef;--sand:#e8e2d8;--green:#747965}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fbfaf7;font-family:'Noto Sans KR','Noto Sans JP',sans-serif;font-weight:400}a{color:inherit;text-decoration:none}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:#fbfaf7}.brand{font-family:'Playfair Display',serif;font-size:23px;letter-spacing:.08em}.brand img{display:block;width:150px;height:auto;max-height:58px;object-fit:contain;object-position:left center}.brand span{font-family:inherit;font-size:13px;letter-spacing:.18em}.nav nav{display:flex;gap:27px;font-size:10px;letter-spacing:.13em}.langs{display:flex;gap:8px;font-size:11px}.langs a{color:#999}.langs .active{color:var(--ink);border-bottom:1px solid;padding-bottom:4px}.hero{position:relative;height:min(690px,75vw);min-height:520px;overflow:hidden;background:#d9d5cc}.hero>img{width:100%;height:100%;object-fit:cover;filter:brightness(.74)}.hero-copy{position:absolute;left:12%;top:20%;color:white}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--green);font-weight:600}.hero .eyebrow{color:#f4f0e8}.hero h1{font-family:'Noto Sans KR','Noto Sans JP',sans-serif;font-weight:400;font-size:clamp(42px,6vw,77px);line-height:1.25;letter-spacing:-.04em;margin:22px 0}.hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.9}.button{display:inline-flex;gap:30px;align-items:center;margin-top:22px;padding:15px 20px;background:var(--ink);color:white;font-size:12px}.hero .button{background:white;color:var(--ink)}.button span{font-size:17px}.hero-note{position:absolute;right:6%;bottom:28px;color:white;font-size:9px;letter-spacing:.18em}.section{padding:105px 12%}.intro{text-align:center;background:var(--cream)}h2{font-size:clamp(30px,4vw,48px);font-weight:400;line-height:1.45;letter-spacing:-.04em;margin:20px 0}h2 em{font-style:normal;color:var(--green)}.lead{max-width:660px;margin:22px auto;color:var(--muted);line-height:2;font-size:15px}.section-head{margin-bottom:42px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.service-grid article{padding-top:20px;border-top:1px solid #c9c5bb}.service-grid b,.process ol b{font:13px 'Playfair Display',serif;color:var(--green)}h3{font-size:18px;font-weight:500;margin:19px 0 12px}.service-grid p,.process p{font-size:13px;color:var(--muted);line-height:1.9}.projects{background:var(--cream)}.project-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}.project{position:relative;min-height:260px;overflow:hidden;background:#dedbd3}.project-wide{grid-row:span 2}.project img{width:100%;height:100%;min-height:260px;position:absolute;inset:0;object-fit:cover;transition:transform .5s}.project:hover img{transform:scale(1.035)}.project:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#0008)}.project div{position:absolute;z-index:1;left:24px;bottom:20px;color:white}.project small{font-size:9px;letter-spacing:.14em}.project h3{margin:8px 0}.caption{font-size:11px;color:var(--muted)}.process{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.process>img{width:100%;height:350px;object-fit:cover}.process ol{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0;list-style:none}.process li{padding-top:16px;border-top:1px solid #c9c5bb;font-size:13px}.process li b{margin-right:9px}.faq{background:var(--cream)}.faq details{border-bottom:1px solid #d7d2c8;padding:20px 0;max-width:850px}.faq summary{cursor:pointer;font-size:15px}.faq details p{color:var(--muted);line-height:1.8;font-size:14px}.contact{text-align:center;background:#e8e5dc}.contact>p:not(.eyebrow){color:var(--muted)}.contact-placeholder{font-size:12px;margin-top:28px!important}footer{padding:38px 8%;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}footer .brand{color:var(--ink)}footer small{font-size:10px}@media(max-width:760px){.brand img{width:126px;max-height:50px}.nav{height:70px;padding:0 5%}.nav nav{display:none}.hero{height:660px;min-height:0}.hero-copy{left:8%;top:23%}.hero h1{font-size:48px}.section{padding:75px 7%}.service-grid{grid-template-columns:1fr 1fr;gap:24px 18px}.project-grid{grid-template-columns:1fr 1fr;gap:10px}.project-wide{grid-column:1/-1;grid-row:auto;min-height:300px}.project{min-height:220px}.project img{min-height:220px}.process{grid-template-columns:1fr}.process>img{height:260px}.process ol{grid-template-columns:1fr 1fr}.process li{line-height:1.7}footer{flex-wrap:wrap;gap:12px}footer p{width:100%;order:3}}@media(max-width:420px){.hero-copy>p:not(.eyebrow){font-size:13px}.service-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.project-wide{grid-column:auto}.project{min-height:260px}.process ol{grid-template-columns:1fr 1fr}}

/* Project grid Instagram card and bilingual contact details */
.project.instagram-project{position:relative;display:flex;min-height:260px;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:28px;background:#e7e2d8;color:var(--ink);text-decoration:none;transition:background .25s}
.project.instagram-project:after{display:none}
.project.instagram-project:hover{background:#ded8cc}
.instagram-mark{position:absolute;top:26px;left:28px;width:34px;height:34px;color:var(--ink)}
.instagram-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.instagram-mark .instagram-dot{fill:currentColor;stroke:none}
.project.instagram-project small{margin-bottom:9px;color:var(--green);font-size:9px;letter-spacing:.14em}
.project.instagram-project strong{font-size:20px;font-weight:500}
.instagram-copy{max-width:230px;margin-top:10px;color:var(--muted);font-size:12px;line-height:1.8}
.instagram-arrow{position:absolute;right:27px;bottom:25px;font-size:22px}
.contact-links{display:flex;justify-content:center;gap:0;max-width:900px;margin:38px auto 0;border-top:1px solid #d1ccc1;border-bottom:1px solid #d1ccc1}
.contact-links>a,.contact-links>div{display:flex;flex:1;flex-direction:column;gap:9px;padding:22px 16px;text-align:left}
.contact-links>a+a,.contact-links>div{border-left:1px solid #d1ccc1}
.contact-links span{color:var(--muted);font-size:11px;letter-spacing:.08em}
.contact-links strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.contact-links strong b{display:block;margin-top:5px;color:var(--green);font-size:11px}
.footer-contact{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto;margin-right:20px}
.footer-contact a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.project.instagram-project{min-height:220px;padding:20px}.instagram-mark{top:20px;left:20px;width:30px;height:30px}.contact-links{flex-direction:column}.contact-links>a,.contact-links>div{padding:17px 12px}.contact-links>a+a,.contact-links>div{border-left:0;border-top:1px solid #d1ccc1}.footer-contact{width:100%;order:4;margin:0;gap:8px 16px}}


/* Interactive Project Cards & Links */
a.project {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.project-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #ffffff;
  font-weight: 500;
  opacity: 0.9;
  transition: transform 0.2s, opacity 0.2s;
}
a.project:hover .project-card-arrow {
  transform: translateX(3px);
  opacity: 1;
  color: #e5dfd3;
}
.project-desc {
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  max-width: 92%;
}
.section-sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* Detail Page Styles */
.detail-hero {
  padding: 60px 12% 40px;
  background: var(--cream);
  border-bottom: 1px solid #e2ddd3;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--green);
  margin-bottom: 24px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.2s;
}
.back-link:hover {
  transform: translateX(-4px);
}
.detail-title {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.03em;
  margin: 12px 0 20px;
}
.detail-meta-table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  margin: 32px 0 0;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #dfd9cc;
}
.detail-meta-table th {
  width: 22%;
  padding: 14px 18px;
  background: #f7f4ed;
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid #dfd9cc;
  border-right: 1px solid #dfd9cc;
}
.detail-meta-table td {
  padding: 14px 18px;
  color: #4f4f45;
  border-bottom: 1px solid #dfd9cc;
  line-height: 1.6;
}
.detail-meta-table tr:last-child th,
.detail-meta-table tr:last-child td {
  border-bottom: none;
}
.detail-main-img {
  width: 100%;
  height: min(560px, 60vw);
  object-fit: cover;
  display: block;
  margin: 40px 0;
  background: #dedbd3;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.detail-content {
  padding: 70px 12%;
  max-width: 1100px;
  margin: 0 auto;
}
.detail-section {
  margin-bottom: 50px;
}
.detail-section h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink);
  position: relative;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sand);
}
.detail-section p {
  font-size: 14px;
  line-height: 2;
  color: #4a4a40;
  margin: 0 0 16px;
}
.detail-cta-box {
  background: #e8e5dc;
  padding: 48px;
  text-align: center;
  margin-top: 60px;
  border-radius: 4px;
}
.detail-cta-box h3 {
  font-size: 24px;
  margin: 0 0 12px;
  border: none;
  padding: 0;
}
.detail-cta-box p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}
.detail-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Floating Contact & Toast */
.floating-contact {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.fab-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, background 0.2s;
  cursor: pointer;
  border: none;
  font-family: inherit;
  line-height: 1;
}
.fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24);
}
.fab-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.fab-line {
  background: #06C755;
  color: #ffffff;
}
.fab-line:hover {
  background: #05b34c;
}
.fab-kakao {
  background: #FEE500;
  color: #191919;
}
.fab-kakao:hover {
  background: #f4dc00;
}
.fab-badge {
  font-size: 10px;
  background: rgba(0,0,0,0.08);
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
}
.ksi-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #292923;
  color: #ffffff;
  padding: 13px 24px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  text-align: center;
  max-width: 90vw;
  line-height: 1.5;
}
.ksi-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Footer Corp Info */
footer {
  padding: 48px 8% 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #f4f0e8;
  border-top: 1px solid #e5ded2;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-desc {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.footer-corp {
  padding-top: 22px;
  border-top: 1px solid #e0d9cd;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.corp-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: #5c5c52;
}
.corp-info span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.corp-info strong {
  color: var(--ink);
  font-weight: 500;
}
.corp-tag {
  display: inline-block;
  background: #e3dccd;
  color: #49493f;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}
.copy-kakao {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.copy-kakao:hover {
  color: var(--ink);
}

@media(max-width: 760px) {
  .detail-hero, .detail-content {
    padding: 40px 6%;
  }
  .detail-meta-table th, .detail-meta-table td {
    display: block;
    width: 100%;
    padding: 10px 14px;
  }
  .detail-meta-table th {
    background: #eae5d8;
    border-right: none;
    padding-bottom: 4px;
  }
  .detail-cta-box {
    padding: 30px 20px;
  }
  .floating-contact {
    right: 16px;
    bottom: 18px;
    gap: 8px;
  }
  .fab-btn {
    padding: 10px 14px;
    font-size: 12px;
  }
  .fab-btn svg {
    width: 18px;
    height: 18px;
  }
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-contact {
    margin: 0;
    width: 100%;
  }
  .corp-info {
    flex-direction: column;
    gap: 5px;
  }
}