:root {
  color-scheme: light;
  --background: #f7fbf6;
  --background-deep: #edf6ee;
  --surface: rgba(255,255,255,.78);
  --surface-strong: rgba(255,255,255,.96);
  --border: rgba(77,109,85,.16);
  --text: #26342c;
  --muted: #6f8075;
  --accent: #71ad82;
  --accent-deep: #49825c;
  --accent-soft: rgba(113,173,130,.18);
  --accent-two: #f0a8b8;
  --sky: #dff2ea;
  --hero-overlay: rgba(35,57,43,.72);
  --shadow: 0 24px 70px rgba(71,100,79,.14);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --shell: 1160px;
}

html[data-season="summer"] {
  --background: #f4fbff; --background-deep: #e5f5fb; --border: rgba(44,112,143,.16);
  --text: #173c4b; --muted: #61808c; --accent: #42a9c7; --accent-deep: #217a99;
  --accent-soft: rgba(66,169,199,.18); --accent-two: #ffd36f; --sky: #d9f3fb;
  --hero-overlay: rgba(15,67,85,.72); --shadow: 0 24px 70px rgba(37,113,143,.14);
}
html[data-season="autumn"] {
  --background: #fff9f1; --background-deep: #f8ecdc; --border: rgba(130,79,38,.17);
  --text: #4d3321; --muted: #8c715d; --accent: #d8843f; --accent-deep: #a95626;
  --accent-soft: rgba(216,132,63,.18); --accent-two: #b8503e; --sky: #f8e4c4;
  --hero-overlay: rgba(80,43,23,.72); --shadow: 0 24px 70px rgba(127,78,38,.15);
}
html[data-season="winter"] {
  --background: #f7fbff; --background-deep: #eaf2f8; --border: rgba(68,101,133,.15);
  --text: #263b4d; --muted: #708395; --accent: #799fc4; --accent-deep: #4d7399;
  --accent-soft: rgba(121,159,196,.18); --accent-two: #c1a9d8; --sky: #e1edf7;
  --hero-overlay: rgba(29,55,77,.68); --shadow: 0 24px 70px rgba(72,103,132,.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 3%, color-mix(in srgb, var(--accent-two) 25%, transparent), transparent 25rem),
    radial-gradient(circle at 93% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 30rem),
    linear-gradient(180deg, var(--background), var(--background-deep));
  color: var(--text);
  font-family: Pretendard, "Noto Sans KR", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  transition: background .5s ease, color .4s ease;
}
button, a { font: inherit; } button { color: inherit; } a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }
.shell { width:min(var(--shell), calc(100% - 40px)); margin-inline:auto; }
.ambient { position:fixed; z-index:-1; width:28rem; aspect-ratio:1; border-radius:999px; filter:blur(95px); opacity:.18; pointer-events:none; transition:background .5s ease; }
.ambient-one { left:-14rem; top:28rem; background:var(--accent); }
.ambient-two { right:-13rem; top:7rem; background:var(--accent-two); }

.hero { padding:30px 0 54px; }
.brand { display:inline-flex; align-items:center; gap:13px; }
.brand-avatar { width:50px; height:50px; border-radius:17px; border:1px solid var(--border); background:#fff; box-shadow:0 12px 30px rgba(64,91,72,.14); }
.brand span { display:grid; line-height:1.25; }
.brand strong { font-size:.98rem; letter-spacing:.01em; }
.brand small { margin-top:4px; color:var(--muted); font-size:.72rem; }
.hero-copy { padding-top:62px; max-width:800px; }
.hero-topline { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.eyebrow,.nav-label { margin:0; color:var(--accent-deep); font-size:.72rem; font-weight:850; letter-spacing:.18em; }
h1 { margin:16px 0 20px; font-size:clamp(2.45rem,6vw,5.1rem); line-height:1.06; letter-spacing:-.058em; }
.hero-description { max-width:670px; margin:0; color:var(--muted); font-size:clamp(.98rem,2vw,1.12rem); }

.page-layout { display:grid; grid-template-columns:132px minmax(0,1fr); gap:34px; align-items:start; }
.service-nav-sticky { position:sticky; top:20px; }
.nav-label { margin:0 0 14px 5px; }
.service-buttons { display:grid; gap:13px; }
.service-button { position:relative; width:116px; aspect-ratio:1; padding:0; overflow:hidden; cursor:pointer; border:1px solid rgba(255,255,255,.8); border-radius:24px; background:var(--surface); box-shadow:0 14px 30px rgba(61,92,70,.13); transform:scale(.94); opacity:.74; transition:.25s ease; }
.service-button::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,var(--hero-overlay)); }
.service-button img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease,filter .25s ease; }
.service-button span { position:absolute; z-index:1; left:11px; right:11px; bottom:9px; color:#fff; text-align:left; text-shadow:0 2px 10px rgba(0,0,0,.25); font-size:.78rem; font-weight:850; line-height:1.25; }
.service-button:hover { transform:scale(1); opacity:.94; }
.service-button:hover img { transform:scale(1.06); }
.service-button[aria-selected="true"] { transform:scale(1.07); opacity:1; border-color:var(--accent); box-shadow:0 20px 42px color-mix(in srgb,var(--accent) 24%, transparent),0 0 0 5px var(--accent-soft); }

.service-panel { min-height:650px; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(22px); }
.panel-loading { padding:48px; color:var(--muted); }
.panel-content { animation:panelIn .38s ease both; }
@keyframes panelIn { from { opacity:0; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
.hero-image-wrap { position:relative; height:clamp(290px,44vw,520px); overflow:hidden; }
.hero-image-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,var(--hero-overlay)); }
.service-hero-image { width:100%; height:100%; object-fit:cover; animation:imageReveal .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes imageReveal { from { transform:scale(1.08); opacity:.45; } to { transform:scale(1); opacity:1; } }
.service-badge { position:absolute; z-index:2; top:22px; left:22px; padding:8px 13px; border:1px solid rgba(255,255,255,.8); border-radius:999px; background:rgba(255,255,255,.82); color:var(--accent-deep); box-shadow:0 8px 25px rgba(39,67,48,.1); backdrop-filter:blur(14px); font-size:.72rem; font-weight:850; letter-spacing:.08em; }
.service-content { padding:clamp(26px,5vw,52px); }
.service-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.service-heading h2 { margin:0; font-size:clamp(2rem,5vw,3.8rem); line-height:1.05; letter-spacing:-.045em; }
.service-kicker { margin:0 0 8px; color:var(--accent-deep); font-size:.78rem; font-weight:850; letter-spacing:.12em; }
.service-description { max-width:720px; margin:24px 0 0; color:var(--muted); font-size:1.04rem; white-space:pre-line; }
.link-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.link-button { display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 17px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.82); box-shadow:0 7px 18px rgba(58,88,67,.07); font-size:.88rem; font-weight:750; transition:.2s ease; }
.link-button:hover { transform:translateY(-2px); background:var(--surface-strong); border-color:var(--accent); box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 15%, transparent); }
.link-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:8px; background:var(--accent-soft); color:var(--accent-deep); font-size:.78rem; }
.instagram-section { margin-top:42px; padding-top:34px; border-top:1px solid var(--border); }
.instagram-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.instagram-title { margin:3px 0 0; font-size:clamp(1.35rem,3vw,2rem); letter-spacing:-.03em; }
.instagram-profile-link { flex:none; color:var(--accent-deep); font-size:.84rem; font-weight:800; }
.instagram-profile-link:hover { text-decoration:underline; }
.instagram-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px; align-items:start; }
.instagram-embed-wrap { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:0 10px 26px rgba(54,83,63,.08); }
.instagram-embed-wrap .instagram-media { min-width:0!important; width:100%!important; margin:0!important; border:0!important; box-shadow:none!important; }
.gallery-section { margin-top:42px; }
.section-title { margin:0 0 15px; font-size:.84rem; letter-spacing:.08em; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.gallery-button { padding:0; overflow:hidden; cursor:zoom-in; border:1px solid rgba(255,255,255,.95); border-radius:var(--radius-md); background:#fff; box-shadow:0 8px 22px rgba(54,83,63,.09); aspect-ratio:4/3; }
.gallery-button img { width:100%; height:100%; object-fit:cover; transition:.35s ease; }
.gallery-button:hover img { transform:scale(1.055); filter:brightness(1.04) saturate(1.05); }
.footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:34px 0 44px; color:var(--muted); font-size:.8rem; }
.footer-actions { display:flex; align-items:center; gap:14px; }
.footer-button { min-height:34px; padding:0 12px; cursor:pointer; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.55); color:var(--muted); font-size:.74rem; font-weight:750; transition:.2s ease; }
.footer-button:hover { color:var(--accent-deep); border-color:var(--accent); background:var(--surface-strong); transform:translateY(-1px); }
.text-button { padding:0; cursor:pointer; border:0; background:none; color:var(--accent-deep); font-weight:750; }
.text-button:hover { text-decoration:underline; }
.lightbox { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:30px; background:rgba(27,44,34,.72); backdrop-filter:blur(16px); }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:min(1100px,94vw); max-height:86vh; border-radius:22px; box-shadow:0 30px 90px rgba(23,42,29,.34); }
.lightbox-close { position:fixed; top:20px; right:24px; width:48px; height:48px; cursor:pointer; border:1px solid rgba(255,255,255,.7); border-radius:16px; background:rgba(255,255,255,.88); color:var(--text); font-size:1.6rem; }

@media (max-width:760px) {
  .shell { width:min(100% - 28px,var(--shell)); }
  .hero { padding-top:22px; padding-bottom:34px; }
  .hero-copy { padding-top:45px; }
  .hero-topline { align-items:flex-start; flex-direction:column; gap:16px; }
  h1 { font-size:clamp(2.35rem,12vw,4rem); }
  .page-layout { display:block; }
  .service-nav { position:sticky; z-index:5; top:0; margin:0 -14px 14px; padding:10px 14px; background:linear-gradient(180deg,color-mix(in srgb,var(--background) 94%, transparent) 75%,transparent); backdrop-filter:blur(18px); }
  .service-nav-sticky { position:static; }
  .nav-label { display:none; }
  .service-buttons { display:flex; gap:10px; overflow-x:auto; padding:6px 4px 13px; scrollbar-width:none; }
  .service-buttons::-webkit-scrollbar { display:none; }
  .service-button { flex:0 0 76px; width:76px; border-radius:20px; }
  .service-button span { left:8px; right:8px; bottom:7px; font-size:.68rem; }
  .service-panel { min-height:0; border-radius:26px; }
  .hero-image-wrap { height:290px; }
  .service-content { padding:25px 20px 30px; }
  .service-heading { display:block; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-button:first-child { grid-column:1/-1; aspect-ratio:16/9; }
  .footer { align-items:flex-start; flex-direction:column; }
  .footer-actions { width:100%; justify-content:space-between; }
  .instagram-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .instagram-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }