/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
:root {
  --studio-ink: #151e2e;
  --studio-blue: #2453d5;
  --studio-blue-dark: #1740aa;
  --studio-mist: #ebf1fd;
  --studio-line: #d9e1ef;
  --studio-paper: #fff;
  --studio-soft: #f4f7fb;
  --studio-muted: #4f6077;
  --studio-shadow: rgba(13, 23, 39, .77);
  --studio-clear: rgba(13, 23, 39, .09);
  --studio-font: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
html, body.studio-home { overflow-x: clip; }
body.studio-home { color: var(--studio-ink); background: var(--studio-paper); font-family: var(--studio-font); }
.studio-home h1,.studio-home h2,.studio-home h3 { overflow-wrap:anywhere; word-break:keep-all; min-width:0; }
.studio-home a:focus-visible,.studio-home button:focus-visible { outline:3px solid var(--studio-blue); outline-offset:4px; }
.studio-wrap { width:min(100% - 56px,1272px); margin-inline:auto; }
.studio-header { background:var(--studio-paper); border-bottom:1px solid var(--studio-line); }
.studio-header-row { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.studio-brand { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.studio-brand img,.studio-footer-brand img { border-radius:8px; object-fit:contain; }
.studio-brand strong { display:block; font-size:clamp(18px,2.25vw,25px); font-weight:950; letter-spacing:-.075em; line-height:1.08; }
.studio-brand small { color:var(--studio-blue-dark); font-size:9px; font-weight:800; letter-spacing:.075em; }
.studio-header nav { display:flex; align-items:center; gap:clamp(14px,2.5vw,32px); font-weight:750; font-size:14px; }
.studio-nav-link:hover { color:var(--studio-blue); }
.studio-cta,.studio-secondary { display:inline-flex; width:fit-content; align-items:center; justify-content:center; gap:12px; padding:13px 19px; min-height:46px; font-weight:800; font-size:14px; white-space:nowrap; border-radius:10px; }
.studio-cta { background:var(--studio-blue); color:var(--studio-paper); }
.studio-cta:hover { background:var(--studio-blue-dark); }
.studio-secondary { border:1px solid var(--studio-line); color:var(--studio-ink); }
.studio-secondary:hover { background:var(--studio-paper); }
.studio-hero { display:grid; grid-template-columns:minmax(0, 2.1fr) minmax(0,1fr); gap:20px; margin-top:34px; }
.studio-main,.studio-aside { border-radius:24px; overflow:hidden; }
.studio-main { position:relative; min-height:505px; display:flex; align-items:center; color:var(--studio-paper); background:var(--studio-ink); isolation:isolate; }
.studio-main::after,.studio-hero-image { position:absolute; inset:0; width:100%; height:100%; }
.studio-hero-image { object-fit:cover; object-position:center 56%; z-index:-2; }
.studio-main::after { content:""; background:linear-gradient(90deg,var(--studio-shadow) 0%,var(--studio-shadow) 32%,var(--studio-clear) 100%); z-index:-1; }
.studio-main-copy { padding:clamp(24px,5vw,62px); }
.studio-kicker { font-size:13px; font-weight:850; letter-spacing:.055em; color:var(--studio-blue-dark); }
.studio-main .studio-kicker { color:var(--studio-paper); }
.studio-main h1 { margin:16px 0; font-size:clamp(42px,5.1vw,78px); font-weight:950; line-height:1.08; letter-spacing:-.085em; }
.studio-lead { font-size:clamp(15px,1.45vw,19px); line-height:1.68; word-break:keep-all; margin-bottom:25px; }
.studio-caption { position:absolute; bottom:14px; right:16px; font-size:11px; padding:4px 8px; border-radius:4px; background:var(--studio-shadow); }
.studio-aside,.studio-estimate-aside { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(22px,3.4vw,42px); background:var(--studio-mist); border:1px solid var(--studio-line); }
.studio-aside h2,.studio-estimate-aside h3 { font-size:clamp(31px,3.25vw,49px); line-height:1.13; letter-spacing:-.075em; margin:17px 0; font-weight:900; }
.studio-aside p:not(.studio-kicker) { color:var(--studio-muted); line-height:1.7; word-break:keep-all; margin-bottom:20px; }
.studio-aside-contact { width:100%; margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; font-size:13px; color:var(--studio-muted); }
.studio-aside-contact a { color:var(--studio-ink); font-size:21px; font-weight:900; white-space:nowrap; }
.studio-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; margin:30px 0 0; }
.studio-facts div { padding:23px 5px; border-right:1px solid var(--studio-line); }
.studio-facts div:last-child { border:0; }
.studio-facts dt { font-size:13px; color:var(--studio-muted); }
.studio-facts dd { font-size:clamp(16px,2.6vw,32px); color:var(--studio-blue); font-weight:950; letter-spacing:-.065em; margin:5px 0 0; }
.studio-home :is(#service,#estimate) { color:var(--studio-ink); background:var(--studio-paper); padding-block:clamp(50px,7vw,90px); }
.studio-home #portfolio { color:var(--studio-ink); background:var(--studio-soft); padding-block:clamp(50px,7vw,90px); }
.studio-home :is(#service,#estimate,#portfolio) > div { max-width:1320px; }
.studio-home :is(#service,#estimate) .glass-card { border:1px solid var(--studio-line); background:var(--studio-soft); }
.studio-home :is(#service,#estimate) :is(h3,input,select,textarea) { color:var(--studio-ink); }
.studio-home :is(#service,#estimate,#portfolio) .text-slate-400 { color:var(--studio-muted); }
.studio-home #estimate :is(input:not([type=checkbox]),select,textarea) { background:var(--studio-paper); border-color:var(--studio-line); }
.studio-home #estimate button[type=submit] { color:var(--studio-paper); background:var(--studio-blue); }
.studio-home #estimate button[type=submit]:hover { background:var(--studio-blue-dark); }
.studio-estimate-aside { border-radius:24px; }
.studio-estimate-aside ul { padding-left:20px; list-style:disc; color:var(--studio-muted); line-height:1.8; margin:10px 0 24px; }
.studio-footer-brand { display:flex; align-items:center; justify-content:center; gap:8px; }
@media (max-width: 840px) {
  .studio-wrap { width:calc(100% - 32px); }
  .studio-header-row { min-height:72px; }
  .studio-header .studio-nav-link { display:none; }
  .studio-hero { grid-template-columns:minmax(0,1fr); margin-top:20px; gap:12px; }
  .studio-main { min-height:390px; }
  .studio-main,.studio-aside { border-radius:17px; }
  .studio-aside-contact { padding-top:17px; }
}
@media (max-width: 420px) {
  .studio-header .studio-cta { padding:10px 11px; min-height:40px; gap:5px; }
  .studio-brand img { width:34px; height:34px; }
  .studio-brand small { font-size:7px; }
  .studio-main { min-height:375px; }
  .studio-main h1 { font-size:clamp(36px,11vw,43px); }
  .studio-facts dt { font-size:11px; }
}



#studio-filter-cafe:checked ~ .studio-photo-grid article:not([data-studio-photo="cafe"]) { display:none; }
#studio-filter-apartment:checked ~ .studio-photo-grid article:not([data-studio-photo="apartment"]) { display:none; }
#studio-filter-restaurant:checked ~ .studio-photo-grid article:not([data-studio-photo="restaurant"]) { display:none; }
#studio-filter-retail:checked ~ .studio-photo-grid article:not([data-studio-photo="retail"]) { display:none; }
#studio-filter-beauty:checked ~ .studio-photo-grid article:not([data-studio-photo="beauty"]) { display:none; }
#studio-filter-office:checked ~ .studio-photo-grid article:not([data-studio-photo="office"]) { display:none; }
#studio-filter-clinic:checked ~ .studio-photo-grid article:not([data-studio-photo="clinic"]) { display:none; }
#studio-filter-kids:checked ~ .studio-photo-grid article:not([data-studio-photo="kids"]) { display:none; }
#studio-filter-all:checked ~ .studio-filters label[for="studio-filter-all"],
#studio-filter-cafe:checked ~ .studio-filters label[for="studio-filter-cafe"],
#studio-filter-apartment:checked ~ .studio-filters label[for="studio-filter-apartment"],
#studio-filter-restaurant:checked ~ .studio-filters label[for="studio-filter-restaurant"],
#studio-filter-retail:checked ~ .studio-filters label[for="studio-filter-retail"],
#studio-filter-beauty:checked ~ .studio-filters label[for="studio-filter-beauty"],
#studio-filter-office:checked ~ .studio-filters label[for="studio-filter-office"],
#studio-filter-clinic:checked ~ .studio-filters label[for="studio-filter-clinic"],
#studio-filter-kids:checked ~ .studio-filters label[for="studio-filter-kids"] { color:var(--studio-blue); }
#studio-filter-all:checked ~ .studio-filters label[for="studio-filter-all"] > span,
#studio-filter-cafe:checked ~ .studio-filters label[for="studio-filter-cafe"] > span,
#studio-filter-apartment:checked ~ .studio-filters label[for="studio-filter-apartment"] > span,
#studio-filter-restaurant:checked ~ .studio-filters label[for="studio-filter-restaurant"] > span,
#studio-filter-retail:checked ~ .studio-filters label[for="studio-filter-retail"] > span,
#studio-filter-beauty:checked ~ .studio-filters label[for="studio-filter-beauty"] > span,
#studio-filter-office:checked ~ .studio-filters label[for="studio-filter-office"] > span,
#studio-filter-clinic:checked ~ .studio-filters label[for="studio-filter-clinic"] > span,
#studio-filter-kids:checked ~ .studio-filters label[for="studio-filter-kids"] > span { background:var(--studio-mist); }

.studio-section { padding-block:clamp(42px,6vw,82px); }
.studio-title { margin:14px 0 0; font-size:clamp(28px,3.2vw,44px); line-height:1.18; font-weight:950; letter-spacing:-.065em; }
.studio-section-head { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.studio-text-link { display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:800; white-space:nowrap; }
.studio-text-link:hover,.studio-footer a:hover { color:var(--studio-blue); }
.studio-photo-grid { display:grid; gap:16px; }
.studio-photo-filter { position:relative; padding:0; min-width:0; border:0; }
.studio-filter-input,.studio-sr-only { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.studio-photo-filter:focus-within .studio-filters { outline:2px solid var(--studio-blue); outline-offset:5px; border-radius:10px; }
.studio-filters { display:flex; flex-wrap:wrap; gap:11px 22px; margin:0 0 28px; }
.studio-filters label { min-width:61px; display:grid; justify-items:center; gap:6px; cursor:pointer; font-size:12px; font-weight:750; color:var(--studio-muted); }
.studio-filters label > span { display:grid; place-items:center; width:57px; height:57px; border-radius:15px; background:var(--studio-soft); }
.studio-filters svg { width:24px; height:24px; }
.studio-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:23px; }
.studio-photo-grid a { display:block; }
.studio-photo-frame { position:relative; overflow:hidden; border-radius:16px; aspect-ratio:4/5; background:var(--studio-soft); }
.studio-photo-tag,.studio-photo-arrow { position:absolute; background:var(--studio-paper); color:var(--studio-ink); }
.studio-photo-tag { top:11px; left:11px; font-size:10px; padding:4px 7px; border-radius:5px; }
.studio-photo-arrow { bottom:11px; right:11px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; }
.studio-photo-category { color:var(--studio-blue); margin-top:11px; font-size:12px; font-weight:750; }
.studio-photo-grid h3 { margin-top:5px; font-size:clamp(14px,1.45vw,18px); font-weight:850; letter-spacing:-.04em; }
.studio-process > p:not(.studio-kicker) { margin-top:13px; color:var(--studio-muted); }
.copy-guide-block { margin-top:37px; }
.copy-guide-block h2 { font-size:clamp(23px,2.5vw,33px); font-weight:900; letter-spacing:-.055em; }
.journey-step { border-top:1px solid var(--studio-line); padding:15px 0 2px; }
.journey-step:last-child { border-color:var(--studio-blue); }
.journey-medallion { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.journey-inner { display:grid; place-items:center; flex:none; width:35px; height:35px; border-radius:10px; background:var(--studio-mist); color:var(--studio-blue-dark); }
.journey-inner svg { width:23px; height:23px; }
.journey-number { font-size:28px; font-weight:550; }
.copy-guide-block h3 { font-size:16px; font-weight:850; letter-spacing:-.035em; }
.copy-guide-block p { font-size:14px; color:var(--studio-muted); margin-top:8px; line-height:1.65; word-break:keep-all; }
.discovery-faq { margin-top:17px; border-top:1px solid var(--studio-line); }
.discovery-faq details { padding:13px 5px; border-bottom:1px solid var(--studio-line); }
.discovery-faq summary { cursor:pointer; font-weight:750; }
.studio-selected-work { color:var(--studio-blue-dark); font-size:14px; font-weight:800; margin-bottom:12px; }
.studio-footer { background:var(--studio-soft); color:var(--studio-ink); border-top:1px solid var(--studio-line); }
.studio-footer-cta { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:17px; padding:42px 0 60px; }
.studio-footer-cta > div p:last-child { margin-top:12px; font-size:14px; color:var(--studio-muted); }
.studio-footer-cta .studio-cta:hover { color:var(--studio-paper); }
.studio-footer-identity,.studio-footer-links,.studio-footer-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; }
.studio-footer-identity p,.studio-footer-links,.studio-footer-meta,.studio-footer-warranty { color:var(--studio-muted); font-size:13px; line-height:1.65; }
.studio-footer-links { margin:19px 0; }
.studio-footer-meta { row-gap:5px; }
.studio-footer-warranty { margin:17px 0; }
.studio-footer-bottom { border-top:1px solid var(--studio-line); padding:20px 0 29px; font-size:14px; font-weight:850; }
.studio-footer-bottom span { margin-left:7px; }
@media (max-width:840px) {
  .studio-footer-cta { padding-bottom:38px; }
}
@media (max-width:420px) {
  .studio-photo-grid { gap:10px; }
  .studio-filters { gap:9px 6px; }
  .studio-filters label { min-width:49px; }
  .studio-filters label > span { width:43px; height:43px; }
  .studio-photo-frame { border-radius:12px; }
}
@media (prefers-reduced-motion:reduce) {
}


.studio-aside-contact { flex-direction:column; align-items:flex-start; gap:4px; }
.studio-aside-contact .studio-phone { font-size:clamp(30px,3.3vw,50px); line-height:1.08; letter-spacing:-.045em; }
.studio-gallery-count { margin:-8px 0 18px; color:var(--studio-muted); font-size:14px; }
.studio-checklist { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:19px; margin:24px 0 0; padding:0; list-style:none; }
.studio-checklist .journey-step { padding:16px; border:1px solid var(--studio-line); border-radius:13px; }
.studio-checklist .journey-step:last-child { border-color:var(--studio-blue); }
.studio-checklist h3 { font-size:16px; font-weight:850; }
.studio-checklist p { margin-top:7px; color:var(--studio-muted); font-size:14px; line-height:1.6; word-break:keep-all; }
@media (max-width:840px) { .studio-checklist { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px) { .studio-checklist { grid-template-columns:minmax(0,1fr); } }
@media (max-width:840px) { .studio-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.studio-facts .studio-fact-note { font-size:12px; line-height:1.55; letter-spacing:0; font-weight:500; color:var(--studio-muted); overflow-wrap:anywhere; }
.studio-float { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); z-index:45; display:flex; flex-direction:column; gap:8px; }
.studio-float a { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; font-weight:900; box-shadow:0 3px 12px rgba(14,30,59,.18); }
.studio-float-kakao { background:#fee500; color:#241c00; }
.studio-float-top { background:var(--studio-blue); color:var(--studio-paper); }
.studio-float a:hover { filter:brightness(.94); }
.studio-portfolio-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:clamp(135px,15vw,195px); gap:12px; }
.studio-portfolio-photo { position:relative; display:block; min-width:0; overflow:hidden; isolation:isolate; border-radius:14px; background:var(--studio-mist); }
.studio-portfolio-photo:first-child { grid-row:span 2; }
.studio-portfolio-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.studio-portfolio-photo:hover img { transform:scale(1.035); }
.studio-portfolio-photo::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,var(--studio-shadow)); }
.studio-portfolio-caption { position:absolute; z-index:1; bottom:11px; inset-inline:12px; color:var(--studio-paper); display:grid; gap:1px; line-height:1.35; }
.studio-portfolio-caption small { font-size:11px; }
.studio-portfolio-caption strong { font-size:clamp(13px,1.4vw,19px); word-break:keep-all; }
.studio-portfolio-archive { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:17px; }
.studio-portfolio-archive strong { margin-right:4px; font-size:14px; }
.studio-archive-link { padding:7px 10px; border:1px solid var(--studio-line); border-radius:8px; font-size:13px; background:var(--studio-paper); }
.studio-archive-link span { margin-left:3px; color:var(--studio-muted); }
@media(max-width:740px) {
  .studio-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(110px,34vw,180px); }
  .studio-portfolio-photo:first-child { grid-column:span 2; grid-row:auto; }
  .studio-facts .studio-fact-note { font-size:10px; }
  .studio-float { right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); }
  .studio-float a { width:44px; height:44px; }
}
@media(prefers-reduced-motion:reduce) { .studio-portfolio-photo img { transition:none; } }
.studio-photo-frame img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .24s ease; }
.studio-photo-grid a:hover img { transform:scale(1.04); }
@media(prefers-reduced-motion:reduce) { .studio-photo-frame img { transition:none; } }
