:root {
    --rebar-black: #0d0d0d;
    --cured-concrete: #4a4a4a;
    --formwork-white: #f5f0e8;
    --exposed-aggregate: #c4b69c;
    --safety-orange: #e85d26;
    --blueprint-midnight: #1a1a2e;
    --page-bg: #f5f0e8;
    --page-text: #0d0d0d;
    --muted-text: #4a4a4a;
    --surface: #c4b69c;
    --grid-alpha: rgba(26, 26, 46, 0.15);
    --shadow-color: rgba(13, 13, 13, 0.24);
    --font-display: "Libre Baskerville", Georgia, serif;
    --font-body: "Space Grotesk", Inter, system-ui, sans-serif;
    --font-korean: "Noto Sans KR", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--page-bg);
    color: var(--page-text);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    transition: background 240ms linear, color 240ms linear;
}

button { font: inherit; color: inherit; }
.site-shell { position: relative; min-height: 100vh; background: radial-gradient(circle at 68% 22%, rgba(232, 93, 38, 0.12), transparent 28vw); }
.scene { min-height: 100vh; position: relative; padding: 8vh 4vw; overflow: hidden; }
.seven-grid { display: grid; grid-template-columns: 0.8fr 1fr 1.2fr 1.4fr 1.2fr 1fr 0.8fr; grid-auto-rows: minmax(15vh, auto); gap: 2.2vw; }

.construction-grid {
    position: fixed;
    inset: -12vh -12vw;
    z-index: -2;
    pointer-events: none;
    transform: rotate(3deg) translate3d(var(--grid-shift-x, 0), var(--grid-shift-y, 0), 0);
    background-image: linear-gradient(to right, var(--grid-alpha) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-alpha) 1px, transparent 1px);
    background-size: 78px 78px;
    transition: transform 100ms linear;
}
.settling-dust { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0.28; background-image: radial-gradient(circle, rgba(232,93,38,0.22) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(196,182,156,0.35) 0 1px, transparent 1.2px); background-size: 160px 120px, 220px 180px; transform: translateY(var(--dust-y, 0)); }
.phase-watermark { position: fixed; top: 45%; left: 47%; z-index: -1; font-family: var(--font-display); font-size: 20vw; font-weight: 700; line-height: 1; color: var(--safety-orange); opacity: var(--stamp-opacity, 0.08); transform: translate(-50%, calc(-50% + var(--stamp-y, 20px))); pointer-events: none; }

.blob { position: relative; filter: drop-shadow(0 28px 42px var(--shadow-color)); isolation: isolate; transition: transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 900ms ease; }
.blob::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--blob-path); background: var(--blob-fill, #c4b69c); background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 2px, rgba(74,74,74,0.12) 2px 5px), radial-gradient(circle at 32% 22%, rgba(245,240,232,0.32), transparent 38%); }
.blob::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--blob-path); opacity: 0; background: linear-gradient(to bottom, transparent 0%, rgba(232,93,38,0.15) 48%, transparent 100%); transform: translateY(-28%); transition: opacity 800ms ease, transform 1300ms ease-out; }
.blob.is-built::after { opacity: 1; transform: translateY(22%); }
.observed { opacity: 0; transform: scale(0.85) translateY(28px); }
.observed.is-built { opacity: 1; transform: scale(1) translateY(0); }

.blob-a { --blob-path: polygon(48% 3%, 70% 6%, 91% 24%, 97% 51%, 85% 78%, 58% 94%, 26% 88%, 5% 61%, 13% 30%); --blob-fill: #c4b69c; }
.blob-b { --blob-path: polygon(19% 4%, 72% 1%, 96% 24%, 92% 70%, 61% 100%, 18% 89%, 2% 43%); --blob-fill: #f5f0e8; }
.blob-c { --blob-path: polygon(36% 0%, 88% 14%, 100% 58%, 74% 95%, 28% 88%, 0% 52%, 10% 16%); --blob-fill: #c4b69c; }
.blob-d { --blob-path: polygon(10% 21%, 50% 0%, 90% 9%, 98% 48%, 82% 88%, 41% 100%, 3% 71%); --blob-fill: #f5f0e8; }
.blob-e { --blob-path: polygon(22% 8%, 63% 1%, 100% 35%, 89% 78%, 54% 98%, 11% 84%, 0% 37%); --blob-fill: #c4b69c; }
.blob-f { --blob-path: polygon(36% 6%, 77% 0%, 100% 31%, 94% 74%, 57% 100%, 13% 88%, 0% 39%); --blob-fill: #e85d26; }
.blob-g { --blob-path: polygon(21% 7%, 68% 0%, 98% 29%, 91% 81%, 47% 100%, 5% 75%, 0% 31%); --blob-fill: #c4b69c; }
.blob-h { --blob-path: polygon(34% 2%, 75% 9%, 99% 43%, 88% 82%, 51% 100%, 15% 86%, 0% 45%, 9% 14%); --blob-fill: #1a1a2e; }

.foundation-scene { overflow: visible; }
.blueprint-tag { position: absolute; top: 4vh; left: 4vw; width: min(45vw, 520px); font-weight: 300; font-size: 0.84rem; letter-spacing: 0.16em; color: var(--muted-text); text-transform: lowercase; }
.blueprint-tag svg { display: block; width: 100%; height: 80px; margin-top: 0.5rem; overflow: visible; }
.blueprint-tag path { fill: none; stroke: var(--muted-text); stroke-width: 1; stroke-dasharray: 7 8; }
.hero-blob { position: absolute; left: 48%; top: 22%; width: min(54vw, 720px); min-height: min(54vw, 720px); padding: clamp(3rem, 8vw, 7rem); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.hero-blob h1 { margin: 0; font-family: var(--font-display); font-size: clamp(5rem, 12vw, 9rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 700; color: #0d0d0d; }
.hero-blob p, .permit-seal, .coordinate-readout, code, .phase-kicker { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(13,13,13,0.55); }
.permit-seal { border: 1px dashed rgba(13,13,13,0.38); padding: 0.35rem 0.6rem; transform: rotate(-4deg); }
.hero-probe { position: absolute; left: 15vw; bottom: 13vh; }
.floating-note, .side-annotation { position: absolute; font-family: var(--font-mono); font-size: 0.7rem; color: var(--safety-orange); border: 1px solid currentColor; padding: 0.4rem 0.7rem; background: color-mix(in srgb, var(--page-bg) 82%, transparent); }
.note-foundation { right: 15vw; top: 16vh; transform: rotate(7deg); }
.coordinate-readout { position: absolute; right: 7vw; bottom: 7vh; color: var(--muted-text); }
.rebar-web { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.72; }
.rebar-web path { fill: none; stroke: #1a1a2e; stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--path-length, 1400); stroke-dashoffset: var(--path-length, 1400); transition: stroke-dashoffset 2s ease-out; }
.rebar-web.is-built path { stroke-dashoffset: 0; }

.scaffolding-scene { padding-top: 10vh; }
.phase-index { min-height: 86vh; }
.phase-card { min-height: 260px; padding: 3rem 2.4rem; border: 2px solid rgba(74,74,74,0.65); cursor: not-allowed; }
.phase-card:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; transform: rotate(15deg) scale(0.85); }
.phase-card:nth-child(2) { grid-column: 3 / 6; grid-row: 2 / 4; margin-top: -6vh; transform: rotate(-7deg) scale(0.85); }
.phase-card:nth-child(3) { grid-column: 2 / 5; grid-row: 4 / 6; margin-top: -4vh; transform: rotate(22deg) scale(0.85); }
.phase-card:nth-child(4) { grid-column: 4 / 6; grid-row: 5 / 7; margin-top: -8vh; transform: rotate(-13deg) scale(0.85); }
.phase-card.is-built:nth-child(1) { transform: rotate(15deg) scale(1); }
.phase-card.is-built:nth-child(2) { transform: rotate(-7deg) scale(1); }
.phase-card.is-built:nth-child(3) { transform: rotate(22deg) scale(1); }
.phase-card.is-built:nth-child(4) { transform: rotate(-13deg) scale(1); }
.card-grid { position: absolute; inset: 0; clip-path: var(--blob-path); background-image: radial-gradient(circle, rgba(26,26,46,0.25) 1px, transparent 1px); background-size: 14px 14px; opacity: 0.7; transition: opacity 1200ms ease; }
.phase-card.is-built .card-grid { opacity: 0.12; }
.phase-stamp { position: absolute; top: -0.18em; right: 0.08em; font-family: var(--font-display); font-size: 8rem; line-height: 1; color: rgba(232,93,38,0.15); }
.phase-card h2, .detail-panel h2, .completion-blob h2 { margin: 0 0 1rem; font-family: var(--font-korean); font-weight: 900; font-size: clamp(1.8rem, 3.2vw, 3.4rem); letter-spacing: -0.03em; }
.phase-card p { margin: 0 0 1.2rem; color: var(--muted-text); }
.annotation-column { grid-column: 6 / 8; grid-row: 1 / 7; max-height: 78vh; overflow-y: auto; padding: 1.25rem 0.9rem 1.25rem 1.1rem; border-left: 1px dashed rgba(74,74,74,0.45); }
.annotation-column::-webkit-scrollbar { width: 6px; }
.annotation-column::-webkit-scrollbar-track { background: repeating-linear-gradient(to bottom, transparent 0 46px, rgba(74,74,74,0.35) 46px 50px); }
.annotation-column::-webkit-scrollbar-thumb { background: repeating-linear-gradient(to bottom, #e85d26 0 10px, #c4b69c 10px 14px); border-radius: 0; }
.annotation-column p { margin: 0 0 1.45rem; font-family: var(--font-korean); font-weight: 300; }
.annotation-column .spec { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; opacity: 0.7; }
.annotation-column svg { width: 16px; height: 16px; margin-right: 0.4rem; vertical-align: -0.2rem; fill: var(--safety-orange); }

.rebar-scene { overflow: visible; min-height: 115vh; }
.detail-panel { width: min(62vw, 760px); min-height: 540px; margin-left: 25vw; margin-top: 6vh; padding: clamp(3rem, 7vw, 6rem); color: #0d0d0d; }
.detail-panel p { max-width: 45ch; }
.detail-panel code { display: block; margin-top: 1.5rem; }
.detail-float { float: left; width: 28vw; height: 42vw; max-height: 560px; margin: 16vh -5vw 0 -9vw; shape-outside: polygon(36% 6%, 77% 0%, 100% 31%, 94% 74%, 57% 100%, 13% 88%, 0% 39%); opacity: 0.82; }
.a1 { top: 20vh; left: 7vw; } .a2 { right: 13vw; top: 16vh; transform: rotate(-8deg); } .a3 { left: 42vw; bottom: 9vh; transform: rotate(5deg); }
.pour-mask { position: absolute; inset: 0; clip-path: var(--blob-path); background: linear-gradient(to bottom, rgba(232,93,38,0.22), transparent 60%); transform: translateY(-100%); transition: transform 1400ms ease-out; }
.is-built .pour-mask { transform: translateY(0); }

.curing-scene { background: radial-gradient(circle at 42% 50%, rgba(232,93,38,0.16), transparent 38vw); }
.completion-wrap { min-height: 80vh; position: relative; }
.completion-blob { grid-column: 2 / 6; grid-row: 2 / 6; min-height: 560px; padding: clamp(3rem, 7vw, 6rem); color: #f5f0e8; }
.completion-blob p { max-width: 48ch; font-weight: 300; }
.completion-blob .phase-kicker { color: rgba(245,240,232,0.58); }
.inspection-bubble { position: absolute; width: 92px; height: 92px; border-radius: 999px; border: 2px solid #e85d26; background: var(--page-bg); color: #e85d26; font-family: var(--font-korean); font-weight: 900; cursor: not-allowed; box-shadow: 0 16px 30px rgba(13,13,13,0.18); animation: float-bubble 3s ease-in-out infinite; }
.b1 { left: 6%; top: 18%; } .b2 { right: 18%; top: 11%; animation-delay: -0.8s; } .b3 { left: 59%; bottom: 10%; animation-delay: -1.5s; } .b4 { right: 6%; bottom: 27%; animation-delay: -2.1s; }

.under-construction { position: relative; border: 2px solid var(--cured-concrete); background: color-mix(in srgb, var(--page-bg) 82%, #c4b69c); padding: 0.8rem 1.1rem; font-family: var(--font-mono); font-size: 0.76rem; }
.under-construction::after { content: "공사중 — Under Construction"; position: absolute; left: 50%; bottom: calc(100% + 0.75rem); transform: translateX(-50%); white-space: nowrap; padding: 0.55rem 0.75rem; background: #e85d26; color: #f5f0e8; opacity: 0; pointer-events: none; transition: opacity 160ms ease; z-index: 20; }
.under-construction.shake { animation: shake 400ms ease-in-out; border-color: #e85d26 !important; }
.under-construction.shake::after { opacity: 1; }

@keyframes shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-6px)} 20%,40%,60%,80%{transform:translateX(6px)} }
@keyframes float-bubble { 0%,100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-16px) rotate(3deg); } }

body.night { --stamp-opacity: 0.12; }
body.night .rebar-web path { stroke: #e85d26; }
body.night .phase-card { border-color: rgba(196,182,156,0.45); }
body.night .blob-b, body.night .blob-d { --blob-fill: #1a1a2e; color: #f5f0e8; }
body.night .phase-card p { color: #c4b69c; }
body.night .phase-card code { color: rgba(245,240,232,0.55); }

@media (max-width: 900px) {
    .scene { padding: 7vh 5vw; }
    .seven-grid, .phase-index { display: block; }
    .hero-blob { left: 14vw; top: 24vh; width: 78vw; min-height: 78vw; }
    .phase-card { position: relative; width: 88vw; min-height: 230px; margin: 0 0 2rem !important; transform: rotate(-2deg) scale(0.85) !important; }
    .phase-card.is-built { transform: rotate(-2deg) scale(1) !important; }
    .annotation-column { max-height: 58vh; margin-top: 4vh; }
    .detail-panel { width: 92vw; margin: 14vh 0 0; min-height: 560px; }
    .detail-float { display: none; }
    .completion-blob { min-height: 540px; }
}

@media (max-width: 560px) {
    .hero-blob { left: 4vw; width: 92vw; min-height: 92vw; padding: 2.2rem; }
    .hero-probe, .coordinate-readout { display: none; }
    .phase-stamp { font-size: 5.5rem; }
    .inspection-bubble { width: 72px; height: 72px; font-size: 0.82rem; }
}