@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

:root {
  --ink: #14262a;
  --ink-soft: #506064;
  --teal: #0d7068;
  --teal-dark: #075b56;
  --mint: #dff3ee;
  --mint-soft: #f0faf7;
  --coral: #ff775f;
  --warm: #fafaf7;
  --white: #fff;
  --line: #dfe8e6;
  --shadow: 0 22px 60px rgba(15, 71, 67, .11);
  --shadow-soft: 0 12px 34px rgba(26, 56, 53, .08);
  --radius: 22px;
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--warm); color: var(--ink); font-family: 'Noto Sans KR', system-ui, sans-serif; font-size: 16px; line-height: 1.72; word-break: keep-all; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
em { color: var(--teal); font-style: normal; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 10px 16px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.section-shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.section-pad { padding: 112px 0; }

.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(19, 51, 50, .08); background: rgba(250, 250, 247, .9); backdrop-filter: blur(18px); }
.nav-wrap { width: min(1240px, calc(100% - 40px)); height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.04em; font-size: 1.14rem; white-space: nowrap; }
.brand-mark { width: 27px; aspect-ratio: 1; transform: rotate(45deg); border-radius: 8px; background: linear-gradient(135deg, #149b8f 0 50%, #075b56 50%); display: grid; place-items: center; }
.brand-mark i { width: 12px; height: 12px; background: #e8f8f4; border-radius: 3px; }
.desktop-nav { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.desktop-nav a { color: #405255; font-weight: 600; font-size: .93rem; transition: color .2s; }
.desktop-nav a:hover { color: var(--teal); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.text-button { border: 0; background: none; color: #405255; cursor: pointer; padding: 10px 14px; font-weight: 600; }
.button { border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--teal); color: white; box-shadow: 0 9px 22px rgba(13, 112, 104, .2); }
.button-primary:hover { background: var(--teal-dark); box-shadow: 0 12px 28px rgba(13, 112, 104, .28); }
.button-small { min-height: 42px; padding: 0 19px; font-size: .88rem; }
.button-large { min-height: 56px; padding: 0 25px; }
.button-ghost { border-color: #d6e0de; background: rgba(255,255,255,.76); color: var(--ink); }
.button-outline { min-height: 50px; border-color: #cddad7; background: white; color: var(--ink); }
.menu-button { display: none; width: 42px; height: 42px; border: 0; background: transparent; padding: 10px; cursor: pointer; }
.menu-button span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: var(--ink); transition: transform .2s; }
.mobile-nav { background: white; border-top: 1px solid var(--line); padding: 12px 24px 20px; }
.mobile-nav a, .mobile-nav .text-button { display: block; width: 100%; text-align: left; padding: 12px 8px; font-weight: 650; }

.hero { min-height: 680px; padding-top: 88px; padding-bottom: 92px; display: grid; grid-template-columns: .92fr 1.25fr; align-items: center; gap: 66px; }
.eyebrow { color: var(--teal); font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.eyebrow span { width: 7px; height: 7px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,119,95,.12); }
.hero h1 { margin: 20px 0 24px; font-size: clamp(2.7rem, 4.2vw, 4.5rem); line-height: 1.18; letter-spacing: -.065em; }
.hero-description { max-width: 530px; margin: 0 0 32px; font-size: 1.1rem; color: var(--ink-soft); }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trust-note { margin: 18px 0 0; color: #68777a; font-size: .84rem; }
.trust-note span { color: var(--teal); margin-right: 5px; }
.hero-product { position: relative; min-width: 0; }
.glow-orb { position: absolute; inset: -70px -50px -90px -30px; z-index: -1; background: radial-gradient(circle at 50% 45%, rgba(189, 231, 220, .65), rgba(240, 250, 247, 0) 64%); }
.editor-window { border: 1px solid rgba(23, 83, 78, .14); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 28px 80px rgba(30, 81, 75, .18); transform: perspective(1200px) rotateY(-1deg); }
.window-bar { height: 49px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: .72rem; font-weight: 800; }
.mini-brand { display: flex; align-items: center; gap: 7px; }
.mini-gem { width: 15px; height: 15px; border-radius: 4px; transform: rotate(45deg); background: var(--teal); }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #afbebc; }
.editor-body { display: grid; grid-template-columns: 54px minmax(0, 1fr) 176px; min-height: 455px; }
.tool-rail { padding-top: 15px; display: flex; align-items: center; flex-direction: column; gap: 11px; background: #073e40; color: #d9efec; }
.tool-rail span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; font-size: .8rem; }
.tool-rail span.active { background: #0f7770; color: white; }
.editor-canvas { background: #f2f5f3; padding: 11px 15px 17px; min-width: 0; }
.save-row { margin-bottom: 8px; display: flex; justify-content: space-between; color: #72807f; font-size: .64rem; }
.save-row i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #45a77c; margin-right: 3px; }
.product-page { width: 78%; min-height: 384px; margin: auto; padding: 14px 17px 20px; text-align: center; background: #f9f7f1; box-shadow: 0 5px 18px rgba(40,65,59,.1); }
.product-photo, .crop-product { background-image: url('assets/design-reference.png'); background-repeat: no-repeat; background-color: #eee9df; background-size: 370px auto; background-position: 0 -314px; }
.product-photo { height: 193px; border-radius: 2px; margin-bottom: 14px; }
.product-page .product-kicker { margin: 0; color: var(--teal); font-family: 'Gowun Dodum', sans-serif; font-size: .68rem; }
.product-page h2 { margin: 2px 0 7px; font-size: 1.23rem; line-height: 1.35; letter-spacing: -.04em; }
.product-page > p:last-of-type { margin: 0; color: #63706e; font-size: .57rem; line-height: 1.6; }
.feature-pills { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.feature-pills span { padding: 4px 6px; border-radius: 10px; background: rgba(13,112,104,.09); color: var(--teal); font-size: .49rem; font-weight: 700; }
.status-panel { padding: 17px 13px; border-left: 1px solid var(--line); font-size: .58rem; }
.panel-title { display: flex; justify-content: space-between; margin-bottom: 7px; color: #344744; }.panel-title b { color: var(--teal); }
.progress { height: 5px; margin-bottom: 14px; overflow: hidden; border-radius: 5px; background: #e9efed; }.progress i { display: block; width: 70%; height: 100%; border-radius: inherit; background: var(--teal); }
.status-panel ul { list-style: none; margin: 0; padding: 0 0 13px; border-bottom: 1px solid var(--line); }.status-panel li { display: flex; gap: 6px; margin: 8px 0; color: #7b8785; }.status-panel li.done { color: #3f5652; }.status-panel li span { color: #4aaa80; }
.export-label { margin: 13px 0 8px; font-weight: 800; color: #314540; }
.status-panel button { width: 100%; margin-bottom: 6px; padding: 7px 5px; border: 1px solid var(--line); border-radius: 6px; background: white; color: #3a504c; font-size: .54rem; text-align: left; }
.floating-note { position: absolute; padding: 10px 13px; border: 1px solid rgba(13,112,104,.1); border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-soft); color: #64716f; font-family: 'Gowun Dodum', sans-serif; font-size: .75rem; line-height: 1.4; transform: rotate(-3deg); }
.floating-note b { color: var(--teal); }.note-left { left: -50px; bottom: -30px; }.note-right { right: -20px; top: -35px; transform: rotate(3deg); }

.benefit-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.78); }
.benefit-grid { min-height: 124px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.benefit-grid article { min-width: 0; padding: 0 22px; display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--line); }.benefit-grid article:last-child { border: 0; }
.line-icon { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #e5f6f2; color: var(--teal); font-weight: 900; font-size: 1.2rem; }
.benefit-grid h2 { margin: 0 0 2px; font-size: .93rem; }.benefit-grid p { margin: 0; color: #71807e; font-size: .72rem; white-space: nowrap; }

.section-heading { max-width: 700px; margin-bottom: 48px; }.section-heading.centered { text-align: center; margin-inline: auto; }.section-heading.centered .eyebrow { justify-content: center; }
.section-heading h2, .showcase-copy h2, .demo-copy h2, .faq-intro h2 { margin: 12px 0 12px; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.28; letter-spacing: -.055em; }
.section-heading > p:last-child, .showcase-copy > p, .demo-copy > p, .faq-intro > p { color: var(--ink-soft); }
.process { background: #fff; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.process-card { min-height: 395px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 28px rgba(35, 76, 70, .045); }
.step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }.step-head b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: white; }.step-head span { padding: 4px 9px; border-radius: 20px; background: #eef5f3; color: #637573; font-size: .68rem; font-weight: 700; }
.process-card h3 { margin: 0 0 8px; font-size: 1.18rem; }.process-card > p { min-height: 52px; margin: 0 0 22px; color: #71807e; font-size: .88rem; }
.mini-ui { min-height: 160px; padding: 14px; border-radius: 14px; background: #f4f7f6; box-shadow: inset 0 0 0 1px #e8efed; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; height: 92px; }.thumbs i { border-radius: 7px; background-image: url('assets/design-reference.png'); background-size: 230px auto; background-position: -8px -195px; }.thumbs i:nth-child(2) { background-position: -42px -175px; }.thumbs i:nth-child(3) { background-position: -80px -205px; }
.upload-ui button { width: 100%; height: 39px; margin-top: 8px; border: 1px dashed #91b7b2; border-radius: 8px; background: white; color: var(--teal); font-size: .7rem; font-weight: 700; }
.analysis-ui { display: flex; flex-direction: column; gap: 9px; font-size: .72rem; }.analysis-ui strong { margin-bottom: 3px; }.analysis-ui span { padding: 7px 9px; border-radius: 7px; background: white; }.analysis-ui i { color: var(--teal); font-style: normal; margin-right: 5px; }
.block-ui { display: grid; gap: 7px; }.block-ui span { padding: 8px 10px; display: flex; justify-content: space-between; border: 1px solid #e0e7e5; border-radius: 7px; background: white; font-size: .68rem; }.block-ui b { color: var(--teal); }
.export-ui { display: grid; gap: 8px; }.export-ui span { padding: 10px; border-radius: 8px; background: white; font-size: .7rem; box-shadow: 0 2px 7px rgba(30,70,65,.05); }.export-ui b { display: inline-grid; min-width: 39px; margin-right: 7px; color: var(--teal); }

.showcase { background: linear-gradient(180deg, #f5f8f6, #fafaf7); }
.before-after { display: grid; grid-template-columns: 1fr 46px 1fr 1.12fr; align-items: center; gap: 26px; }
.raw-card, .result-card { min-height: 415px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-soft); position: relative; }
.card-label { position: absolute; left: 18px; top: -14px; padding: 5px 15px; border-radius: 16px; background: #e9edec; color: #667472; font-size: .65rem; font-weight: 800; }.card-label.accent { background: var(--coral); color: white; }
.raw-grid { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px; gap: 7px; }.crop-product.small { border-radius: 8px; background-size: 300px auto; background-position: -15px -235px; }.crop-product.small:first-child { grid-row: span 2; }.crop-product.small.offset { background-position: -93px -310px; }.crop-product.small.close { background-position: -8px -315px; }
.raw-info { margin-top: 14px; padding: 14px; display: grid; gap: 4px; border-radius: 12px; background: #f6f7f5; color: #71807e; font-size: .72rem; }.raw-info b { color: var(--ink); margin-bottom: 3px; }
.transform-arrow { color: var(--teal); font-size: 2.6rem; font-weight: 300; }
.result-page { padding: 18px 17px; background: #f6f1e7; text-align: center; }.result-page .crop-product { height: 210px; background-size: 390px auto; background-position: -5px -330px; }.result-page p { margin: 16px 0 2px; color: var(--teal); font-size: .65rem; }.result-page h3 { margin: 0; font-size: 1.3rem; }.result-page div:last-child { display: flex; justify-content: center; gap: 5px; margin-top: 13px; }.result-page span { padding: 4px 6px; border-radius: 9px; background: white; color: #4c5f5b; font-size: .53rem; }
.showcase-copy { padding-left: 16px; }.showcase-copy h2 em { display: inline; }.showcase-copy > p { margin-bottom: 24px; }.text-link { color: var(--teal); font-weight: 800; border-bottom: 1px solid rgba(13,112,104,.3); padding-bottom: 4px; }.text-link span { margin-left: 5px; }

.features { background: white; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { position: relative; min-height: 420px; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.feature-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-4px); transition: .25s ease; }.feature-no { color: #98aaa7; font-size: .68rem; font-weight: 800; }
.feature-visual { height: 170px; margin: 18px 0 22px; border-radius: 15px; background: #f2f7f5; overflow: hidden; }
.feature-card h3 { margin: 0 0 9px; font-size: 1.05rem; line-height: 1.45; }.feature-card p { margin: 0; color: #71807e; font-size: .84rem; }
.product-visual { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 4px; padding: 17px; position: relative; }.product-visual .crop-product { height: 105px; border-radius: 11px; background-size: 280px auto; background-position: -5px -250px; }.product-visual .bg-swatch { height: 105px; border-radius: 11px; background: linear-gradient(145deg,#d8f0ea,#fff 65%); }.product-visual b { color: var(--teal); }.product-visual i { position: absolute; bottom: 13px; font-style: normal; font-size: .56rem; color: #6f7d7a; }.product-visual i:first-of-type { left: 25%; }.product-visual i:last-child { right: 20%; }
.evidence-visual, .regen-visual { padding: 20px; display: grid; align-content: center; gap: 10px; }.evidence-visual span, .regen-visual span { padding: 9px 11px; border-radius: 8px; background: white; color: #4c5e5b; font-size: .7rem; box-shadow: 0 3px 10px rgba(30,70,65,.04); }.evidence-visual i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border-radius: 50%; background: #dff4e5; color: #3e9b67; font-style: normal; }.regen-visual span { display: flex; justify-content: space-between; }.regen-visual b { color: var(--teal); }
.files-visual { display: flex; justify-content: center; align-items: center; gap: 9px; }.files-visual span { width: 59px; height: 73px; display: grid; place-items: center; border-radius: 7px 7px 12px 12px; background: white; box-shadow: 0 6px 16px rgba(27,65,60,.08); color: var(--teal); font-size: .65rem; font-weight: 900; }.files-visual span:last-child { color: #ed6d52; }

.editor-demo { background: linear-gradient(120deg, #eaf8f4, #f8fbf9 54%, #e2f4f0); }
.demo-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 72px; align-items: center; }
.hand-note { font-family: 'Gowun Dodum', sans-serif; color: var(--teal) !important; transform: rotate(-2deg); }
.demo-copy > p:not(.hand-note):not(.demo-status) { max-width: 470px; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }.demo-controls button { padding: 11px 13px; border: 1px solid #bed5d0; border-radius: 10px; background: white; color: #4c5e5b; cursor: pointer; font-size: .77rem; font-weight: 700; }.demo-controls button.active { border-color: var(--teal); background: var(--teal); color: white; }.demo-controls span { margin-right: 5px; }
.demo-status { min-height: 22px; margin-top: 13px; color: var(--teal) !important; font-size: .78rem; font-weight: 700; }
.demo-editor { overflow: hidden; border: 1px solid rgba(13,112,104,.16); border-radius: 18px; background: white; box-shadow: 0 28px 70px rgba(30,91,82,.16); }
.demo-top { min-height: 54px; padding: 0 18px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); color: #60716e; font-size: .72rem; }.demo-top span:nth-child(2) { margin-left: auto; }.demo-top i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #45a77c; }.demo-top button { border: 0; border-radius: 7px; padding: 8px 13px; background: var(--teal); color: white; font-size: .7rem; }
.demo-stage { min-height: 400px; padding: 22px; display: grid; grid-template-columns: 1fr 155px; gap: 14px; background: #f3f6f5; }
.live-block { padding: 20px; display: grid; grid-template-rows: 218px auto; transition: background .35s, color .35s; }.live-image { border-radius: 8px; background-size: 450px auto; background-position: -5px -370px; transition: filter .3s, background-position .3s; }.live-block[data-image="1"] .live-image { background-position: -85px -400px; filter: saturate(.75) sepia(.1); }.live-block[data-image="2"] .live-image { background-position: -15px -455px; filter: contrast(1.05); }
.live-copy { padding: 19px 10px 4px; text-align: center; }.live-copy p { margin: 0; font-family: 'Gowun Dodum', sans-serif; color: var(--teal); font-size: .72rem; }.live-copy h3 { margin: 2px 0 8px; font-size: 1.35rem; letter-spacing: -.04em; }.live-copy span { color: #6e7b79; font-size: .66rem; }
.theme-mint { background: #f3f4ed; }.theme-warm { background: #fff2e9; }.theme-warm .live-copy p { color: #b65c49; }.theme-dark { background: #183537; color: white; }.theme-dark .live-copy p { color: #95e0d4; }.theme-dark .live-copy span { color: #d7e4e1; }
.demo-panel { padding: 16px; border-radius: 10px; background: white; font-size: .68rem; }.demo-panel strong { display: block; margin-bottom: 17px; }.demo-panel label { display: block; margin: 12px 0 5px; color: #72817e; }.fake-input { padding: 8px; border: 1px solid var(--line); border-radius: 6px; }.image-row { display: flex; gap: 5px; }.image-row i { width: 35px; height: 35px; border-radius: 5px; background-image: url('assets/design-reference.png'); background-size: 140px auto; background-position: -2px -120px; border: 2px solid transparent; }.image-row i:nth-child(2) { background-position: -35px -125px; }.image-row i:nth-child(3) { background-position: -68px -125px; }.image-row i.active { border-color: var(--teal); }.palette { display: flex; gap: 7px; }.palette button { width: 21px; height: 21px; border: 2px solid white; border-radius: 50%; background: #d4eee6; box-shadow: 0 0 0 1px #bdc9c7; cursor: pointer; }.palette button:nth-child(2) { background: #f9d5be; }.palette button:nth-child(3) { background: #183537; }.palette button.selected { box-shadow: 0 0 0 2px var(--teal); }

.pricing { background: white; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 18px; max-width: 1000px; margin: 0 auto; }
.price-card { position: relative; min-height: 510px; padding: 31px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: white; }.price-card.featured { border: 2px solid var(--coral); transform: translateY(-10px); box-shadow: 0 18px 45px rgba(255,119,95,.12); }.popular { position: absolute; top: -16px; right: 24px; padding: 6px 14px; border-radius: 18px; background: var(--coral); color: white; font-size: .7rem; font-weight: 800; }
.plan { color: var(--teal); font-size: .8rem; font-weight: 900; }.price-card h3 { margin: 8px 0 4px; font-size: 1rem; }.price-card h3 b { font-size: 2.2rem; letter-spacing: -.05em; }.price-card > div p { min-height: 45px; margin: 5px 0 0; color: #71807e; font-size: .78rem; }.price-card ul { list-style: none; padding: 0; margin: 30px 0; }.price-card li { position: relative; margin: 13px 0; padding-left: 23px; color: #4c5d5a; font-size: .87rem; }.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 900; }.price-card .button { width: 100%; margin-top: auto; }.pricing-note { margin: 30px 0 0; text-align: center; color: #7c8987; font-size: .74rem; }

.faq { background: #f7f8f5; }
.faq-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 90px; }.faq-intro .text-link { display: inline-block; margin-top: 20px; font-size: .84rem; }.accordion { display: grid; gap: 10px; }.accordion details { border: 1px solid var(--line); border-radius: 14px; background: white; overflow: hidden; }.accordion summary { list-style: none; padding: 21px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-weight: 700; }.accordion summary::-webkit-details-marker { display: none; }.accordion summary span { flex: 0 0 18px; height: 18px; position: relative; }.accordion summary span::before, .accordion summary span::after { content: ''; position: absolute; left: 2px; right: 2px; top: 8px; height: 2px; background: var(--teal); transition: transform .2s; }.accordion summary span::after { transform: rotate(90deg); }.accordion details[open] summary span::after { transform: rotate(0); }.accordion details p { margin: 0; padding: 0 24px 22px; color: #657572; font-size: .88rem; }

.final-cta { min-height: 245px; margin-top: 82px; margin-bottom: 82px; padding: 48px 56px; display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 32px; overflow: hidden; border-radius: 26px; background: linear-gradient(110deg, #e7f7f2, #d7f1eb); }
.final-cta h2 { margin: 7px 0 0; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.25; letter-spacing: -.05em; }.final-cta p { margin: 0; color: var(--teal); font-size: .85rem; font-weight: 750; }.cta-art { width: 112px; height: 112px; position: relative; border-radius: 50%; background: white; }.cta-art span { position: absolute; left: 46px; top: 34px; color: var(--coral); font-size: 2rem; }.cta-art i, .cta-art b { position: absolute; border-radius: 50%; background: var(--teal); }.cta-art i { width: 18px; height: 18px; left: 22px; bottom: 27px; }.cta-art b { width: 26px; height: 26px; right: 20px; bottom: 19px; opacity: .25; }

.footer { padding: 60px 0 28px; border-top: 1px solid var(--line); background: #fff; }.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 70px; }.footer-grid > div { display: flex; flex-direction: column; gap: 10px; }.footer-grid > div:first-child p { color: #71807e; font-size: .82rem; }.footer-grid strong { margin-bottom: 5px; font-size: .8rem; }.footer-grid > div:not(:first-child) a { color: #657572; font-size: .8rem; }.footer-grid a:hover { color: var(--teal); }.footer-bottom { margin-top: 52px; padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: #8a9694; font-size: .7rem; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 200; width: min(390px, calc(100% - 48px)); padding: 16px 18px; display: flex; flex-direction: column; border: 1px solid #cfe2de; border-radius: 14px; background: white; box-shadow: var(--shadow); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .25s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast strong { color: var(--teal); }.toast span { color: #657572; font-size: .8rem; margin-top: 3px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }.delay-1 { transition-delay: .08s; }.delay-2 { transition-delay: .16s; }.delay-3 { transition-delay: .24s; }

@media (max-width: 1040px) {
  .desktop-nav { display: none; }.menu-button { display: block; }.login-button { display: none; }
  .hero { grid-template-columns: 1fr; gap: 80px; padding-top: 70px; }.hero-copy { max-width: 720px; text-align: center; margin-inline: auto; }.hero-description { margin-inline: auto; }.hero-actions { justify-content: center; }.editor-window { max-width: 720px; margin-inline: auto; }
  .process-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }.before-after { grid-template-columns: 1fr 40px 1fr; }.showcase-copy { grid-column: 1 / -1; padding: 35px 0 0; max-width: 680px; }.demo-grid { grid-template-columns: 1fr; gap: 45px; }.demo-copy { max-width: 700px; }.benefit-grid { grid-template-columns: repeat(2, 1fr); padding-block: 17px; }.benefit-grid article { min-height: 78px; }.benefit-grid article:nth-child(2) { border-right: 0; }.faq-layout { gap: 50px; }.final-cta { grid-template-columns: 90px 1fr; }.final-cta > .button { grid-column: 2; justify-self: start; }.cta-art { width: 85px; height: 85px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 66px; } body { font-size: 16px; }.section-shell { width: min(100% - 32px, var(--shell)); }.section-pad { padding: 78px 0; }.nav-wrap { width: calc(100% - 28px); height: 66px; }.nav-actions .button-small { min-height: 39px; padding: 0 13px; font-size: .75rem; }.brand { font-size: 1rem; }.brand-mark { width: 24px; }.menu-button { width: 38px; }
  .hero { min-height: auto; padding-top: 54px; padding-bottom: 75px; gap: 55px; }.hero h1 { margin-top: 14px; font-size: clamp(2.25rem, 10vw, 3.25rem); }.hero-description { font-size: 1rem; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-actions .button { width: 100%; }.trust-note { font-size: .75rem; }.eyebrow { font-size: .75rem; justify-content: center; }.note-left, .note-right { display: none; }.editor-window { transform: none; border-radius: 14px; }.window-bar { height: 42px; }.editor-body { grid-template-columns: 42px minmax(0,1fr); min-height: 395px; }.status-panel { display: none; }.tool-rail span { width: 30px; height: 30px; }.editor-canvas { padding: 9px; }.product-page { width: 88%; min-height: 330px; padding: 12px; }.product-photo { height: 166px; background-size: 320px auto; background-position: 0 -272px; }
  .benefit-grid { grid-template-columns: 1fr 1fr; padding: 10px 0; }.benefit-grid article { min-height: 92px; padding: 10px 8px; gap: 9px; border-bottom: 1px solid var(--line); }.benefit-grid article:nth-last-child(-n+2) { border-bottom: 0; }.line-icon { flex-basis: 36px; height: 36px; }.benefit-grid h2 { font-size: .8rem; }.benefit-grid p { font-size: .62rem; white-space: normal; line-height: 1.5; }
  .section-heading { margin-bottom: 35px; }.section-heading h2, .showcase-copy h2, .demo-copy h2, .faq-intro h2 { font-size: 2rem; }.process-grid, .feature-grid, .pricing-grid { grid-template-columns: 1fr; }.process-card { min-height: auto; }.process-card > p { min-height: auto; }.mini-ui { margin-top: 18px; }.feature-card { min-height: auto; }.price-card { min-height: 470px; }.price-card.featured { transform: none; order: -1; }
  .before-after { grid-template-columns: 1fr 28px 1fr; gap: 8px; }.raw-card, .result-card { min-height: 320px; padding: 10px; border-radius: 15px; }.raw-grid { grid-template-rows: 72px 72px; }.raw-info { padding: 9px; font-size: .58rem; }.result-page { padding: 10px 8px; }.result-page .crop-product { height: 155px; background-size: 300px auto; background-position: 0 -255px; }.result-page h3 { font-size: .9rem; }.result-page span { display: none; }.transform-arrow { font-size: 1.7rem; }.showcase-copy { padding-top: 34px; }
  .demo-grid { gap: 35px; }.demo-controls { display: grid; grid-template-columns: 1fr; }.demo-controls button { min-height: 47px; text-align: left; }.demo-stage { padding: 10px; grid-template-columns: 1fr; }.demo-panel { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; }.demo-panel strong { grid-column: 1/-1; }.live-block { grid-template-rows: 200px auto; }.live-image { background-size: 400px auto; background-position: 0 -335px; }
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }.accordion summary { padding: 18px; font-size: .88rem; }.accordion details p { padding: 0 18px 18px; }
  .final-cta { width: calc(100% - 32px); margin: 56px 16px; padding: 37px 24px; grid-template-columns: 1fr; gap: 18px; text-align: center; }.cta-art { display: none; }.final-cta > .button { grid-column: auto; justify-self: stretch; }.final-cta h2 { font-size: 2rem; }
  .footer { padding-top: 48px; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 28px; }.footer-grid > div:first-child { grid-column: 1/-1; }.footer-bottom { gap: 20px; flex-direction: column; }
  .reveal { transform: translateY(14px); }.delay-1,.delay-2,.delay-3 { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --line: #9daaa7; --ink-soft: #344441; }.button-primary { box-shadow: none; }
}

/* Login */
.auth-page { min-height: 100vh; background: #f7f9f6; }.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(460px,1.08fr) minmax(460px,.92fr); }.auth-intro { position: relative; overflow: hidden; padding: 54px clamp(48px,7vw,115px); color: white; background: linear-gradient(145deg,#0b6e66 0%,#0f8279 56%,#6ac6b5 130%); }.auth-intro::before,.auth-intro::after { content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }.auth-intro::before { width:500px; height:500px; top:-260px; right:-180px; }.auth-intro::after { width:350px; height:350px; bottom:-185px; left:-145px; }.auth-brand { position:relative; z-index:1; color:white; }.auth-brand .brand-mark { background:white; }.auth-brand .brand-mark::before { border-color:#168b80; }.auth-brand .brand-mark i { background:#ff8b72; }.auth-message { position:relative; z-index:1; max-width:470px; margin-top:clamp(90px,15vh,155px); }.auth-message .eyebrow { color:#d9fff8; }.auth-message .eyebrow span { background:#ff9c8b; }.auth-message h1 { margin:13px 0 17px; font-size:clamp(2.6rem,4vw,4.35rem); line-height:1.2; letter-spacing:-.075em; }.auth-message h1 em { color:#d8fff6; font-style:normal; }.auth-message > p { margin:0; color:rgba(255,255,255,.82); font-size:1rem; line-height:1.8; }.auth-preview { position:relative; z-index:1; width:min(510px,100%); margin-top:46px; overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:15px; background:white; color:var(--ink); box-shadow:0 26px 55px rgba(0,61,56,.23); transform:rotate(-2.5deg); }.auth-preview-top { height:42px; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid #e2ece9; color:#2f5552; font-size:.68rem; font-weight:800; }.auth-preview-top i { width:7px; height:7px; border-radius:50%; background:#dce9e6; }.auth-preview-top i:first-of-type { margin-left:auto; }.auth-preview-content { min-height:165px; display:grid; grid-template-columns:170px 1fr; gap:20px; padding:18px; background:#fbfcfa; }.auth-product { border-radius:7px; background:url('assets/design-desktop-reference.png') -265px -42px / 500px auto no-repeat; }.auth-preview-content div + div { padding-top:15px; }.auth-preview-content span,.auth-preview-content small { display:block; color:#6e8581; font-size:.67rem; }.auth-preview-content b { display:block; margin:7px 0 16px; font-size:1.23rem; line-height:1.36; letter-spacing:-.05em; }.auth-note { position:relative; z-index:1; margin-top:31px; color:rgba(255,255,255,.66); font-size:.73rem; }.auth-form-wrap { display:grid; place-items:center; padding:60px 38px; background:#fff; }.auth-form { width:min(100%,415px); }.auth-back { display:inline-block; margin-bottom:55px; color:#71817e; font-size:.78rem; }.auth-kicker { margin:0; color:var(--teal); font-size:.69rem; font-weight:900; letter-spacing:.13em; }.auth-form h2 { margin:8px 0 7px; font-size:2.1rem; line-height:1.2; letter-spacing:-.06em; }.auth-subtitle { margin:0 0 31px; color:#74837f; font-size:.86rem; }.auth-form form { display:grid; gap:9px; }.auth-form label { color:#435652; font-size:.78rem; font-weight:750; }.auth-form input[type='email'],.auth-form input[type='password'] { width:100%; height:51px; margin-bottom:11px; padding:0 15px; border:1px solid #d8e4e1; border-radius:9px; outline:none; color:var(--ink); font-size:.87rem; transition:border-color .2s,box-shadow .2s; }.auth-form input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,112,104,.11); }.password-field { position:relative; }.password-field input { padding-right:55px!important; }.password-toggle { position:absolute; right:12px; top:12px; border:0; background:transparent; color:var(--teal); font-size:.69rem; cursor:pointer; }.form-row { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; }.remember { display:flex; align-items:center; gap:5px; color:#72817e!important; font-size:.72rem!important; font-weight:500!important; cursor:pointer; }.remember input { accent-color:var(--teal); }.form-link { color:var(--teal); font-size:.73rem; font-weight:700; }.auth-submit { width:100%; min-height:53px; justify-content:center; }.form-message { min-height:19px; margin:0; color:#e55e4c; text-align:center; font-size:.72rem; }.auth-divider { position:relative; margin:18px 0; text-align:center; color:#99a5a2; font-size:.7rem; }.auth-divider::before { content:''; position:absolute; z-index:0; top:50%; left:0; right:0; height:1px; background:#e4ece9; }.auth-divider span { position:relative; z-index:1; padding:0 12px; background:#fff; }.social-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.social-button { min-height:45px; border:1px solid #dbe5e2; border-radius:8px; background:#fff; color:#415450; cursor:pointer; font-size:.73rem; font-weight:700; }.social-button:hover { border-color:#9ac6bf; }.signup-prompt { margin:25px 0 0; color:#75837f; text-align:center; font-size:.75rem; }

@media (max-width: 860px) { .auth-layout { grid-template-columns:1fr; }.auth-intro { min-height:335px; padding:34px 28px; }.auth-message { margin-top:48px; }.auth-message h1 { font-size:2.3rem; }.auth-preview,.auth-note { display:none; }.auth-form-wrap { padding:43px 26px 55px; }.auth-back { margin-bottom:38px; } }

/* Desktop reference composition: compact Korean commerce landing page */
@media (min-width: 761px) {
  :root { --shell: 1220px; }
  .site-header { background: rgba(255,255,255,.96); }
  .nav-wrap { height: 64px; }
  .hero { min-height: 548px; grid-template-columns: minmax(0,.93fr) minmax(490px,1.07fr); gap: 15px; padding-top: 42px; padding-bottom: 16px; overflow: hidden; }
  .hero-copy { position: relative; z-index: 2; padding-bottom: 94px; }
  .hero h1 { margin-top: 11px; font-size: clamp(2.35rem,3.25vw,3.75rem); line-height: 1.16; }
  .hero-description { max-width: 470px; margin: 16px 0 20px; font-size: .98rem; }
  .hero-actions { gap: 11px; }
  .hero-actions .button { min-height: 47px; padding-inline: 20px; font-size: .82rem; }
  .trust-note { margin-top: 14px; font-size: .69rem; }
  .hero-human, .hero-scribble { display: none; }
  .hero-product { align-self: start; margin-top: 0; padding-top: 0; }
  .editor-window { max-width: none; min-height: 442px; border-radius: 12px; transform: none; box-shadow: 0 18px 38px rgba(9,77,70,.17); }
  .window-bar { height: 36px; font-size: .63rem; }
  .editor-body { min-height: 404px; grid-template-columns: 46px minmax(0,1fr) 144px; }
  .tool-rail { padding-top: 10px; gap: 9px; }
  .tool-rail span { width: 30px; height: 30px; font-size: .8rem; }
  .editor-canvas { padding: 11px; }
  .save-row { margin-bottom: 8px; font-size: .6rem; }
  .product-page { width: 85%; min-height: 358px; padding: 13px; }
  .product-photo { height: 183px; background-image: url('assets/design-desktop-reference.png'); background-size: 540px auto; background-position: -280px -50px; }
  .product-page h2 { font-size: 1.36rem; }
  .product-page > p { font-size: .64rem; }
  .status-panel { padding: 13px 11px; }
  .status-panel li { font-size: .58rem; }
  .status-panel button { min-height: 29px; font-size: .53rem; }
  .floating-note { font-size: .63rem; }
  .note-left { left: -18px; bottom: 28px; }.note-right { right: -5px; bottom: 17px; }
  .benefit-grid { min-height: 74px; }
  .benefit-grid article { padding: 10px 19px; gap: 12px; }
  .benefit-grid h2 { font-size: .75rem; }.benefit-grid p { font-size: .57rem; }
  .line-icon { width: 35px; height: 35px; flex-basis: 35px; font-size: 1.05rem; }
  .section-pad { padding: 72px 0; }
  .section-heading { margin-bottom: 35px; }.section-heading h2 { font-size: 2rem; }
  .process-grid { gap: 14px; }.process-card { min-height: 340px; padding: 22px; border-radius: 11px; }
  .process-card h3 { font-size: 1.05rem; }.process-card > p { min-height: 44px; font-size: .7rem; }
  .before-after { gap: 21px; grid-template-columns: 245px 33px 255px minmax(270px,1fr); align-items: center; }
  .raw-card,.result-card { min-height: 330px; border-radius: 12px; }.raw-card { padding: 14px; }.result-card { padding: 9px; }
  .showcase-copy { padding-left: 16px; }.showcase-copy h2 { font-size: 1.85rem; }.showcase-copy > p { font-size: .74rem; }
  .feature-grid { gap: 13px; }.feature-card { min-height: 310px; padding: 18px; border-radius: 10px; }.feature-card h3 { font-size: .96rem; }.feature-card p { font-size: .67rem; }
  .editor-demo { padding: 67px 0; }.demo-grid { grid-template-columns: .73fr 1.27fr; gap: 39px; }.demo-copy h2 { font-size: 2rem; }.demo-copy > p:not(.hand-note) { font-size: .75rem; }
  .pricing-grid { max-width: 920px; }.price-card { min-height: 405px; padding: 25px; border-radius: 9px; }.price-card h3 b { font-size: 1.85rem; }.price-card ul { margin: 18px 0; }.price-card li { margin: 8px 0; font-size: .72rem; }
  .faq { padding-top: 57px; padding-bottom: 45px; }.faq-layout { grid-template-columns: 250px 1fr; gap: 60px; }.faq-intro h2 { font-size: 1.65rem; }.faq-intro > p { font-size: .72rem; }.accordion { grid-template-columns: 1fr 1fr; column-gap: 14px; }.accordion summary { padding: 15px; font-size: .72rem; }.accordion details p { padding: 0 15px 15px; font-size: .66rem; }
  .final-cta { min-height: 130px; margin-top: 30px; margin-bottom: 35px; padding: 25px 36px; border-radius: 8px; }.final-cta h2 { font-size: 1.55rem; }.final-cta > .button { min-height: 43px; font-size: .73rem; }.cta-art { width: 74px; height: 74px; }.cta-art span { left: 29px; top: 17px; font-size: 1.5rem; }.cta-art i { left: 15px; bottom: 17px; }.cta-art b { right: 12px; bottom: 11px; }
  .footer { padding: 30px 0 18px; }.footer-grid { grid-template-columns: 2fr repeat(3,1fr); gap: 35px; }.footer-grid > div { gap: 6px; }.footer-bottom { margin-top: 23px; padding-top: 12px; }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .section-shell { width: min(100% - 42px, var(--shell)); }
  .desktop-nav { display: flex; gap: 15px; font-size: .69rem; }.menu-button { display: none; }.login-button { display: block; }
  .hero { grid-template-columns: minmax(285px,.86fr) minmax(380px,1.14fr); }.hero h1 { font-size: 2.05rem; }
  .editor-body { grid-template-columns: 35px minmax(0,1fr) 93px; }.status-panel { padding-inline: 6px; }.status-panel .panel-title { font-size: .55rem; }.status-panel .export-label { font-size: .54rem; }.status-panel button { padding-inline: 4px; font-size: .47rem; }.product-page { width: 96%; }.product-page h2 { font-size: 1.08rem; }
  .before-after { grid-template-columns: 1fr 25px 1fr; }.showcase-copy { grid-column: 1/-1; padding: 17px 0 0; max-width: 560px; }
}

.signup-steps { position:relative; z-index:1; display:grid; gap:13px; max-width:365px; margin:45px 0 0; padding:0; list-style:none; }.signup-steps li { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.9); font-size:.82rem; }.signup-steps b { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); color:#e4fffa; font-size:.7rem; }.signup-page .auth-message { margin-top:clamp(78px,12vh,120px); }.signup-page .auth-note { margin-top:32px; }.signup-form .auth-back { margin-bottom:30px; }.signup-form .auth-subtitle { margin-bottom:23px; }.signup-form form { gap:7px; }.signup-form input[type='email'],.signup-form input[type='password'],.signup-form input[type='text'] { width:100%; height:45px; margin-bottom:6px; padding:0 14px; border:1px solid #d8e4e1; border-radius:8px; outline:none; color:var(--ink); font-size:.82rem; }.terms { display:flex; gap:7px; align-items:flex-start; margin:6px 0 11px; color:#73827f!important; font-size:.7rem!important; font-weight:500!important; line-height:1.5; }.terms input { margin:3px 0 0; accent-color:var(--teal); }.signup-form .form-message { min-height:15px; }
.form-message[data-type='success'] { color:var(--teal); }.form-message[data-type='info'] { color:#526a66; }.kakao-button { border-color:#fee387; background:#fee500; color:#3a2d00; }.google-button { position:relative; }.auth-callback-page { min-height:100vh; display:grid; place-items:center; background:#f6faf8; }.callback-card { width:min(100% - 48px,470px); padding:54px 35px; text-align:center; border:1px solid #dce9e5; border-radius:17px; background:#fff; box-shadow:var(--shadow-soft); }.callback-card .brand { justify-content:center; }.callback-loader { width:38px; height:38px; margin:42px auto 24px; border:3px solid #d5ebe6; border-top-color:var(--teal); border-radius:50%; animation:detailmaker-spin 1s linear infinite; }.callback-card h1 { margin:0; font-size:1.35rem; letter-spacing:-.05em; }.callback-card p { margin:8px 0 0; color:#71817e; font-size:.82rem; }@keyframes detailmaker-spin { to { transform:rotate(360deg); } }
/* Studio workspace */
.studio-page { min-height:100vh; background:#f6f8f6; color:#183432; }
.studio-shell { min-height:100vh; display:grid; grid-template-columns:244px minmax(0,1fr); }
.studio-sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:34px; padding:29px 20px 22px; border-right:1px solid #dce7e4; background:#fff; }
.studio-brand { padding:0 7px; }
.studio-nav { display:grid; gap:7px; }.studio-nav a,.studio-nav button { display:flex; align-items:center; gap:10px; min-height:43px; padding:0 12px; border:0; border-radius:9px; background:transparent; color:#59706c; font:700 .82rem/1 inherit; text-align:left; cursor:pointer; }.studio-nav a.active,.studio-nav a:hover,.studio-nav button:hover { color:#0d7068; background:#eaf6f2; }.studio-nav span { font-size:1.1rem; }
.studio-credit { margin-top:auto; padding:17px; border:1px solid #d8e9e4; border-radius:14px; background:#f4fbf8; }.studio-credit p,.studio-credit span { margin:0; color:#6e8580; font-size:.7rem; }.studio-credit strong { display:block; margin:9px 0 5px; color:#0d7068; font-size:1.65rem; letter-spacing:-.05em; }.studio-credit small { font-size:.75rem; }.studio-credit div { height:5px; margin:11px 0 8px; overflow:hidden; border-radius:9px; background:#d8ebe5; }.studio-credit i { display:block; width:58%; height:100%; border-radius:inherit; background:#1a9a89; }.studio-logout { padding:11px 12px; border:0; background:none; color:#7f8e8b; font:700 .76rem/1 inherit; text-align:left; cursor:pointer; }
.studio-main { width:min(1220px,100%); margin:0 auto; padding:47px 54px 70px; }.studio-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:42px; }.studio-kicker { margin:0 0 6px; color:#168b80; font-size:.68rem; font-weight:900; letter-spacing:.13em; }.studio-header h1 { margin:0; font-size:2rem; letter-spacing:-.065em; }.studio-user { display:flex; align-items:center; gap:9px; }.studio-user span { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#dff2ed; color:#0d7068; font-size:.78rem; font-weight:900; }.studio-user p { margin:0; color:#607570; font-size:.78rem; font-weight:700; }
.studio-create { padding:32px; border:1px solid #d9e8e4; border-radius:19px; background:#fff; box-shadow:0 14px 38px rgba(19,67,60,.05); }.studio-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }.studio-section-heading h2,.studio-list-heading h2 { margin:8px 0 7px; font-size:1.55rem; letter-spacing:-.055em; }.studio-section-heading p { margin:0; color:#728580; font-size:.84rem; }.studio-step { padding:7px 10px; border-radius:99px; background:#eef7f4; color:#168b80; font-size:.7rem; font-weight:850; white-space:nowrap; }
.project-form { margin-top:28px; }.project-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.project-fields label { display:grid; gap:7px; color:#3d5752; font-size:.76rem; font-weight:800; }.project-fields label.wide { grid-column:1 / -1; }.project-fields small { color:#92a09d; font-size:.65rem; font-weight:600; }.project-fields input,.project-fields select { width:100%; height:47px; padding:0 13px; border:1px solid #d8e5e2; border-radius:8px; outline:none; background:#fff; color:#25443f; font:600 .8rem/1 inherit; }.project-fields input:focus,.project-fields select:focus { border-color:#1b9788; box-shadow:0 0 0 3px rgba(29,151,136,.1); }
.project-upload { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:17px; }.project-upload > div:first-child { position:relative; display:flex; min-height:112px; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #a9cfc7; border-radius:10px; background:#fbfefd; text-align:center; }.project-upload input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }.upload-icon { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:#dff3ed; color:#137a70; }.project-upload strong { margin-top:8px; color:#39554f; font-size:.77rem; }.project-upload p { margin:5px 0 0; color:#91a09c; font-size:.65rem; }.upload-previews { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; align-content:stretch; min-height:112px; }.upload-previews:empty::before { content:'사진을 올리면 여기에서 미리볼 수 있어요'; display:grid; grid-column:1 / -1; place-items:center; border:1px solid #e1ece9; border-radius:10px; color:#a0ada9; font-size:.68rem; }.upload-previews img,.upload-previews span { width:100%; height:100%; min-height:112px; border-radius:8px; object-fit:cover; }.upload-previews span { display:grid; place-items:center; background:#e9f5f1; color:#167b71; font-weight:900; }.project-form-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; }.project-form-footer p { margin:0; color:#84938f; font-size:.68rem; }.studio-form-message { min-height:18px; margin:12px 0 0; color:#d05c4c; font-size:.72rem; }.studio-form-message[data-type='success'] { color:#128071; }
.studio-projects { margin-top:43px; }.studio-list-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:16px; }.studio-list-heading h2 { margin:0; }.studio-list-heading p { margin:0; color:#8a9895; font-size:.72rem; }.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.project-card { overflow:hidden; padding:0; border:1px solid #dbe8e5; border-radius:14px; background:#fff; color:inherit; text-align:left; cursor:pointer; transition:transform .2s,box-shadow .2s; }.project-card:hover { transform:translateY(-3px); box-shadow:0 14px 25px rgba(18,66,59,.08); }.project-card-image { position:relative; display:grid; height:142px; place-items:center; overflow:hidden; background:linear-gradient(135deg,#dff4ee,#f3f8e9); }.project-card-image img { width:100%; height:100%; object-fit:cover; }.project-card-image span:last-child { position:absolute; top:10px; left:10px; padding:4px 7px; border-radius:5px; background:rgba(255,255,255,.87); color:#3e645d; font-size:.63rem; font-weight:800; }.project-card-mark { color:#319587; font-size:2rem; }.project-card > div:last-child { padding:14px 15px 16px; }.project-card p { margin:0 0 6px; color:#91a09c; font-size:.63rem; }.project-card h3 { overflow:hidden; margin:0 0 7px; font-size:.95rem; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }.project-card small { color:#667b76; font-size:.65rem; }.empty-project { grid-column:1 / -1; display:grid; min-height:180px; place-content:center; border:1px dashed #c6dad5; border-radius:13px; background:#fbfefd; text-align:center; }.empty-project span { color:#319487; font-size:1.4rem; }.empty-project h3 { margin:8px 0 5px; font-size:.95rem; }.empty-project p { margin:0; color:#8b9996; font-size:.72rem; }
.studio-dialog { width:min(1280px,calc(100% - 32px)); max-height:min(860px,calc(100vh - 32px)); padding:0; border:0; border-radius:18px; color:#1e3f39; box-shadow:0 30px 90px rgba(4,36,30,.25); }.studio-dialog::backdrop { background:rgba(7,39,34,.42); backdrop-filter:blur(4px); }.dialog-top,.dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 28px; border-bottom:1px solid #e0ebe8; }.dialog-top h2 { margin:0; font-size:1.35rem; letter-spacing:-.055em; }.dialog-close { width:32px; height:32px; border:0; border-radius:50%; background:#f0f5f3; color:#58706a; font-size:1.35rem; cursor:pointer; }.detail-workspace { display:grid; grid-template-columns:185px minmax(400px,1fr) 250px; min-height:520px; max-height:calc(100vh - 210px); overflow:auto; background:#f5f8f7; }.detail-block-list { padding:16px; border-right:1px solid #e0ebe8; background:#fff; }.detail-block-list button { display:flex; width:100%; align-items:center; gap:8px; margin-bottom:6px; padding:12px 9px; border:0; border-radius:7px; background:transparent; color:#667c77; font:700 .72rem/1 inherit; text-align:left; cursor:pointer; }.detail-block-list button.active { background:#e9f5f1; color:#147d71; }.detail-block-list b { font-size:.6rem; }.detail-canvas { width:min(100% - 36px,620px); margin:27px auto; overflow:hidden; background:#fff; box-shadow:0 8px 26px rgba(19,63,57,.1); }.detail-hero { padding-bottom:52px; text-align:center; }.detail-hero img,.detail-placeholder { display:block; width:100%; height:270px; object-fit:cover; }.detail-placeholder { display:grid; place-items:center; background:linear-gradient(135deg,#d9f3eb,#fbefd8); color:#198f80; font-size:1.5rem; font-weight:900; letter-spacing:.16em; }.detail-hero p,.detail-benefits > p,.detail-story > p,.detail-guide > p { margin:35px 0 10px; color:#279383; font-size:.66rem; font-weight:900; letter-spacing:.15em; }.detail-hero h3 { margin:0 auto 16px; color:#183c36; font-size:2rem; line-height:1.23; letter-spacing:-.07em; }.detail-benefits { padding:47px 37px; background:#f1f8f5; text-align:center; }.detail-benefits h3,.detail-story h3,.detail-guide h3 { margin:0 0 27px; font-size:1.52rem; letter-spacing:-.06em; }.detail-benefits > div { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; text-align:left; }.detail-benefits article { min-height:145px; padding:18px 15px; border-radius:8px; background:#fff; }.detail-benefits b { color:#43a793; font-size:.7rem; }.detail-benefits strong,.detail-benefits span { display:block; }.detail-benefits strong { margin:25px 0 9px; font-size:.78rem; }.detail-benefits span,.detail-story > span,.detail-guide > span { color:#70847f; font-size:.65rem; line-height:1.65; }.detail-story,.detail-guide { padding:48px 35px 61px; text-align:center; }.detail-story > span { display:block; max-width:410px; margin:auto; white-space:pre-line; }.detail-inspector { padding:23px 18px; border-left:1px solid #e0ebe8; background:#fff; }.detail-inspector h3 { margin:3px 0 8px; font-size:1rem; letter-spacing:-.04em; }.inspector-kicker { margin:0; color:#198a7c; font-size:.62rem; font-weight:900; letter-spacing:.13em; }.inspector-help { margin:0 0 19px; color:#81918d; font-size:.67rem; line-height:1.55; }.detail-inspector label { display:block; margin:13px 0; color:#526965; font-size:.68rem; font-weight:800; }.detail-inspector input,.detail-inspector textarea { box-sizing:border-box; width:100%; margin-top:6px; padding:9px 10px; resize:vertical; border:1px solid #d5e4e0; border-radius:7px; color:#274641; font:500 .75rem/1.5 inherit; outline-color:#2c9b8b; }.block-move { display:flex; gap:6px; margin-top:20px; }.block-move button { flex:1; padding:8px 4px; border:1px solid #d8e9e4; border-radius:7px; background:#f6fbf9; color:#237d71; font:800 .65rem/1 inherit; cursor:pointer; }.block-move button:disabled { opacity:.45; cursor:not-allowed; }.dialog-footer { border-top:1px solid #e0ebe8; border-bottom:0; color:#7e8f8b; font-size:.67rem; }.dialog-footer > div { display:flex; gap:8px; }.button-quiet { border:1px solid #d1e4df; background:#edf7f4; color:#11786d; }.button-quiet:disabled { opacity:.6; cursor:wait; }
@media (max-width:820px){.studio-shell{grid-template-columns:1fr}.studio-sidebar{position:static;height:auto;flex-direction:row;align-items:center;padding:16px;border-right:0;border-bottom:1px solid #dce7e4}.studio-nav,.studio-credit{display:none}.studio-logout{margin-left:auto}.studio-main{padding:30px 18px 55px}.studio-header{margin-bottom:28px}.studio-header h1{font-size:1.55rem}.studio-user p{display:none}.studio-create{padding:23px 18px}.project-fields,.project-upload{grid-template-columns:1fr}.project-fields label.wide{grid-column:auto}.project-upload{margin-top:14px}.project-form-footer{align-items:flex-start;flex-direction:column}.project-grid{grid-template-columns:1fr 1fr}.detail-workspace{grid-template-columns:1fr}.detail-block-list{display:flex;overflow:auto;border-right:0;border-bottom:1px solid #e0ebe8}.detail-block-list button{min-width:max-content;margin:0}.detail-canvas{margin:18px auto}.detail-benefits>div{grid-template-columns:1fr}.dialog-top,.dialog-footer{padding:18px}.dialog-footer span{display:none}}