/*
 * THEZZLE DESIGN3 — Soft Orbit visual layer
 * THEZZLE_DESIGN supplies the page structure; this file preserves DESIGN3's
 * quiet pastel surfaces, rounded components and soft elevation.
 */
:root {
  --ink: #302b30;
  --ink-soft: #776f74;
  --paper: #fffdfb;
  --canvas: #faf8f6;
  --line: #e8dfe2;
  --line-strong: #d8ced1;
  --pink: #ffa6b8;
  --pink-deep: #a9435c;
  --pink-wash: #fff0f3;
  --butter: #ffe6a7;
  --butter-wash: #fff9e9;
  --mint: #b9f3d2;
  --mint-deep: #337b59;
  --mint-wash: #edfbf3;
  --white: #ffffff;
  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --shadow-card: 0 10px 30px rgba(85, 57, 70, .08);
  --shadow-float: 0 24px 70px rgba(85, 57, 70, .13);
  --font-sans: "Pretendard Variable", Pretendard, "SUIT Variable", SUIT, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --page: 1400px;
}

body { background: var(--canvas); font-family: var(--font-sans); font-feature-settings: "kern"; }
.shell { padding-inline: 24px; }
.page-main { overflow: clip; }
.display,
.page-title,
.section-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.045em; }
.eyebrow { color: var(--ink); letter-spacing: .14em; }
.text-muted { color: var(--ink-soft); }

/* Global chrome */
.site-header {
  border-bottom: 1px solid rgba(232, 223, 226, .9);
  background: rgba(250, 248, 246, .94);
  backdrop-filter: blur(18px);
}
.header-inner { grid-template-columns: 210px 1fr 210px; }
.brand { font-size: 23px; letter-spacing: -.04em; }
.brand-mark { display: none; }
.brand small { display: none; }
.brand::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }
.main-nav {
  justify-self: center;
  min-height: 46px;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(232, 223, 226, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}
.main-nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  line-height: 1;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { background: var(--ink); color: var(--white); }
.main-nav a[aria-current="page"]::after { display: none; }
.header-actions { justify-content: flex-end; }
.mobile-panel { border-bottom: 1px solid var(--line); background: rgba(255, 253, 251, .98); }
.notice-strip { border-bottom: 1px solid var(--line); background: var(--butter-wash); }
.notice-inner { min-height: 38px; }
.notice-inner span:first-child { border: 0; border-radius: 999px; background: var(--ink); color: var(--white); }

/* Shared component language */
button {
  appearance: none;
  margin: 0;
  font: inherit;
  color: inherit;
}
.button {
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 0;
  border-radius: 14px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
  box-shadow: 0 9px 24px rgba(48, 43, 48, .13);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(48, 43, 48, .17); }
.button:focus-visible,
.icon-button:focus-visible,
.tool-button:focus-visible,
.category-tabs button:focus-visible,
.category-tabs a:focus-visible { outline: 3px solid rgba(169, 67, 92, .28); outline-offset: 2px; }
.button:disabled { opacity: .48; pointer-events: none; box-shadow: none; }
.button--small { min-height: 36px; padding: 8px 13px; font-size: 12px; }
.button--wide { width: 100%; white-space: normal; }
.button--pink { background: var(--pink); color: var(--ink); }
.button--light { border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: var(--shadow-card); }
.button--ghost { box-shadow: none; }
.button--ghost:not(.button) {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  line-height: 1.25;
  font-weight: 700;
  cursor: pointer;
}
.icon-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  line-height: 1;
  box-shadow: var(--shadow-card);
}
.header-actions .button { flex: 0 0 auto; }
.tag,
.active-filter,
.status { border: 0; border-radius: 999px; }
.card,
.panel,
.admin-card {
  border: 1px solid rgba(232, 223, 226, .9);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.card--lift:hover { border-color: var(--pink); transform: translateY(-4px); box-shadow: 0 17px 38px rgba(85, 57, 70, .13); }
.input,
.select,
.admin-input,
.admin-select,
.admin-textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: #fbf7f8;
}
.input:focus,
.select:focus,
.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 166, 184, .2); }
.avatar { border: 0; box-shadow: none; }
.art-label { border: 0; border-radius: 999px; box-shadow: var(--shadow-card); }
.progress { height: 8px; border: 0; border-radius: 999px; background: #f1e9ec; }
.progress span { border-radius: inherit; }
.work-card .art-thumb { border-bottom: 0; }
.heart-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  font-size: 19px;
  line-height: 1;
  box-shadow: var(--shadow-card);
}
.section-head { align-items: end; }

/* Home — reference 3-column shell with DESIGN3 surfaces */
.home-grid {
  grid-template-columns: 180px minmax(0, 1fr) 270px;
  gap: 20px;
  padding-top: 22px;
}
.category-rail,
.account-rail { top: calc(var(--header-h) + 18px); }
.rail-label { margin-bottom: 12px; color: var(--ink-soft); }
.category-list { gap: 4px; }
.category-list a { min-height: 42px; padding: 0 10px; border: 0; border-radius: 13px; }
.category-list a:hover,
.category-list a.is-active { padding-left: 10px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-card); }
.category-list a.is-active::after { color: var(--pink-deep); }
.rail-note { border: 0; border-radius: 18px; background: var(--butter-wash); box-shadow: var(--shadow-card); transform: none; }
.hero {
  min-height: 500px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-float);
}
.hero-copy { padding: clamp(34px, 4vw, 50px); }
.hero .display { font-size: clamp(44px, 4vw, 62px); line-height: .98; }
.hero-copy .display em::after { height: 22%; border-radius: 999px; background: var(--pink); transform: none; }
.hero-copy > p:not(.eyebrow) { font-size: 15px; }
.hero-art { border: 0; background: linear-gradient(155deg, var(--mint-wash), #fff 56%, var(--pink-wash)); }
.hero-art__sun { border: 0; background: var(--butter); box-shadow: 0 14px 34px rgba(255, 202, 78, .22); }
.hero-art__card { border: 0; border-radius: 22px; box-shadow: var(--shadow-card); }
.hero-art__card::before { border: 0; border-radius: 14px; }
.hero-art__tape { border-radius: 4px; background: rgba(255, 230, 167, .86); }
.account-card { background: var(--white); }
.account-mini { border: 0; border-radius: 15px; background: var(--pink-wash); }
.account-mini:nth-child(2) { background: var(--mint-wash); }
.ongoing__thumb { border: 0; border-radius: 12px; }
.mascot-slot { border: 0; border-radius: 22px; background: var(--mint-wash); box-shadow: var(--shadow-card); }
.card-row { gap: 16px; padding-bottom: 10px; }
.funding-strip { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.funding-strip__art { border: 0; background: var(--pink-wash); }

/* Browse */
.page-hero { border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--pink-wash), #fff 64%, var(--mint-wash)); }
.page-hero__row { padding-block: 58px 48px; }
.page-title { font-size: clamp(46px, 6vw, 76px); line-height: .98; }
.browse-layout { grid-template-columns: 210px minmax(0, 1fr) 244px; gap: 20px; }
.filter-rail { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--mint-wash); }
.filter-group { border-bottom: 1px solid rgba(51, 123, 89, .18); }
.browse-tools { padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.search-box .input { background: transparent; }
.category-tabs { border-bottom: 1px solid var(--line); }
.category-tabs button,
.category-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 0;
  border-radius: 12px 12px 0 0;
  line-height: 1.25;
  white-space: nowrap;
}
.category-tabs .is-active { background: var(--ink); color: var(--white); }
.active-filter {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.work-grid { gap: 16px; }
.work-card { overflow: hidden; }
.work-card__body { padding: 18px; }
.curation-box { border: 0; border-radius: 22px; background: var(--pink-wash); box-shadow: var(--shadow-card); }
.curation-drop { border: 1px dashed var(--pink-deep); border-radius: 18px; background: rgba(255, 255, 255, .65); }

/* Detail */
.detail-layout { gap: 24px; }
.detail-main-art { border: 0; border-radius: 28px; box-shadow: var(--shadow-float); }
.detail-thumb { border: 1px solid var(--line); border-radius: 14px; }
.detail-thumb.is-active { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-wash); }
.detail-info { padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-card); }
.detail-info h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em; }
.option-box { border: 0; border-radius: 20px; background: var(--butter-wash); box-shadow: none; }
.option-row { border-bottom-color: rgba(119, 111, 116, .16); }
.total-box { border-radius: 18px; background: var(--pink-wash); }
.detail-description { max-width: 900px; margin-inline: auto; }
.trust-list { border-radius: 20px; background: var(--mint-wash); }
.work-card { border-radius: 22px; }

/* Create */
.create-layout { grid-template-columns: 190px minmax(0, 760px) 260px; gap: 20px; }
.step-list { padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .66); }
.step-item { border-radius: 14px; }
.step-item.is-active { background: var(--pink-wash); }
.editor-card { border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-card); }
.editor-card__head { border-bottom: 1px solid var(--line); }
.editor-section + .editor-section { border-top: 1px solid var(--line); }
.editor-toolbar { align-items: center; border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #f8f3f5; }
.rich-editor { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; }
.upload-stage { border: 1px dashed var(--line-strong); border-radius: 20px; background: var(--mint-wash); }
.tool-button {
  min-width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  line-height: 1;
  white-space: nowrap;
}
.side-summary { border: 0; border-radius: 22px; background: var(--butter-wash); box-shadow: var(--shadow-card); }

/* Community */
.community-layout {
  grid-template-columns: 210px minmax(0, 1fr) 280px;
  gap: 16px;
  padding-block: 22px 60px;
  border: 0;
  background: transparent;
}
.community-rooms,
.community-pane,
.exchange-pane { align-self: start; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow-card); }
.community-rooms,
.exchange-pane { position: sticky; top: calc(var(--header-h) + 18px); }
.room-list { gap: 4px; }
.room-item { border-radius: 13px; }
.room-item.is-active { background: var(--pink-wash); color: var(--ink); }
.community-pane { overflow: hidden; }
.pane-head { border-bottom: 1px solid var(--line); background: var(--white); }
.feed-post { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.feed-post:last-child { border-bottom: 0; }
.exchange-card { border: 0; border-radius: 16px; background: var(--mint-wash); box-shadow: none; }
.exchange-card + .exchange-card { margin-top: 10px; background: var(--butter-wash); }
.policy-note { border-radius: 16px; background: var(--pink-wash); }

/* Studio */
.studio-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 20px; }
.studio-sidebar { border: 0; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-card); }
.profile-switcher { border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-card); }
.studio-nav a { border-radius: 13px; }
.studio-nav a.is-active { background: var(--pink-wash); color: var(--ink); }
.studio-head { padding: 26px 30px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(135deg, var(--pink-wash), var(--white)); }
.metric-grid { gap: 14px; }
.metric-card { border-radius: 20px; box-shadow: none; }
.studio-grid { gap: 16px; }
.action-list { gap: 8px; }
.action-list button {
  min-width: 0;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  line-height: 1.35;
}
.action-list button strong,
.action-list button span { min-width: 0; }
.action-list button > span:last-child { flex: 0 0 auto; }
.timeline::before { background: linear-gradient(var(--pink), var(--mint), var(--butter)); }
.timeline-item::before { border: 4px solid var(--white); background: var(--pink); }

/* Component catalogue */
.library-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
.library-nav { border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-card); }
.library-nav a { border-radius: 12px; }
.library-nav a.is-active { background: var(--pink-wash); }
.library-section { border: 1px solid var(--line); border-radius: 26px; background: var(--white); box-shadow: var(--shadow-card); }
.component-label { color: var(--pink-deep); }
.swatch-color { border: 0; border-radius: 18px; }

/* Overlay surfaces */
.modal { border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-float); }
.purchase-note { border: 0; border-left: 5px solid var(--pink); border-radius: 16px; background: var(--pink-wash); }
.chat-launcher { border: 0; border-radius: 999px; box-shadow: var(--shadow-card); }
.chat-layer { border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-float); }
.bubble { border: 0; border-radius: 18px 18px 18px 5px; background: var(--mint-wash); }
.bubble--me { border-radius: 18px 18px 5px; background: var(--pink-wash); }
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }

/* Admin keeps dense reference structure with the same calm surfaces. */
.admin-body {
  --admin-bg: #f7f3f8;
  --admin-surface: var(--paper);
  --admin-sidebar-bg: #3b3345;
}
.admin-sidebar { border-right: 0; }
.admin-brand { border-bottom: 1px solid rgba(255,255,255,.12); }
.admin-brand::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: var(--pink); }
.admin-nav a { border-radius: 12px; }
.admin-nav a[aria-current="page"] { background: var(--pink); color: var(--ink); }
.admin-topbar { border-bottom: 1px solid var(--line); background: rgba(255,253,251,.95); }
.admin-search input { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); }
.admin-card { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); }
.admin-card-head { border-bottom: 1px solid var(--line); }
.kpi-card::after { border: 0; background: var(--mint-wash); }
.kpi-icon,
.queue-icon,
.service-icon { border: 0; border-radius: 10px; }
.admin-table th { border-block: 1px solid var(--line); background: #f8f4f6; }
.admin-table td { border-bottom: 1px solid var(--line); }
.pagination button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  line-height: 1;
}
.mobile-record,
.creator-card,
.ops-tabs,
.target-summary,
.detail-item { border: 1px solid var(--line); border-radius: 14px; }
.creator-cover { border-bottom: 1px solid var(--line); }
.ops-tabs button { min-width: 0; border-radius: 10px; line-height: 1.25; white-space: nowrap; }
.ops-tabs button.is-active { background: var(--pink-wash); color: var(--pink-deep); }
.channel-tabs button {
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.admin-sheet-foot .button { flex: 0 1 auto; }
button.panel,
button.admin-card,
.curation-drop {
  width: 100%;
  min-width: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.status { border: 0; }

@media (max-width: 1180px) {
  .home-grid { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }
  .browse-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .create-layout { grid-template-columns: 170px minmax(0, 720px); }
  .community-layout { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .shell { padding-inline: 18px; }
  .header-inner { grid-template-columns: 1fr auto; }
  .home-grid { grid-template-columns: 160px minmax(0, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 330px; }
}

@media (max-width: 820px) {
  .home-grid,
  .browse-layout,
  .create-layout,
  .studio-layout,
  .library-layout { display: block; }
  .detail-info { margin-top: 16px; }
  .studio-sidebar { margin-bottom: 16px; }
  .studio-head { padding: 22px; }
}

@media (max-width: 620px) {
  .shell { padding-inline: 14px; }
  .page-hero__row { padding-block: 38px 34px; }
  .page-title { font-size: 42px; }
  .hero { min-height: 0; border-radius: 24px; box-shadow: var(--shadow-card); }
  .hero-copy { padding: 32px 22px; }
  .hero .display { font-size: 40px; }
  .hero-art { min-height: 280px; }
  .community-layout { display: block; padding-block: 14px 40px; }
  .community-pane { border-radius: 18px; }
  .detail-main-art,
  .detail-info,
  .editor-card,
  .library-section { border-radius: 20px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .modal { border-radius: 24px 24px 0 0; }
  .chat-layer { inset: 0; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .app-bottom-nav,
  .admin-bottom-nav { border-top: 1px solid var(--line); background: rgba(255,253,251,.98); }
  .admin-card,
  .mobile-record { box-shadow: var(--shadow-card); }
  .button { min-height: 44px; padding-inline: 15px; }
  .button--small { min-height: 38px; padding-inline: 12px; }
  .purchase-actions .button { min-width: 0; }
  .admin-sheet-foot { flex-wrap: wrap; }
  .admin-sheet-foot .button { flex: 1 1 132px; }
}