:root {
  --paper: #f6f6f2;
  --ink: #171816;
  --muted: #71736e;
  --line: #dedfd8;
  --blue: #2458ff;
  --acid: #c8ff38;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(25, 31, 49, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(36, 88, 255, .08), transparent 26rem),
    var(--paper);
  font-family: "IBM Plex Sans KR", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, textarea, select, input { font: inherit; }
button { color: inherit; }

.topbar {
  min-height: 76px;
  padding: 14px clamp(18px, 3.5vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(23, 24, 22, .09);
  background: rgba(246, 246, 242, .88);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: var(--blue); font-weight: 700; font-size: 18px; transform: rotate(-4deg); }
.brand strong { display: block; font-size: 20px; letter-spacing: -.06em; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .12em; margin-top: 1px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.original-badge { font-size: 13px; color: var(--muted); }

.btn { min-height: 44px; border: 0; border-radius: 14px; padding: 0 17px; font-weight: 650; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: white; box-shadow: 0 9px 22px rgba(23, 24, 22, .16); }
.btn-primary span { color: var(--acid); margin-right: 4px; }
.btn-secondary { background: white; border: 1px solid var(--line); }

.workspace {
  width: min(1560px, calc(100% - 40px));
  margin: 30px auto 22px;
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(430px, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: 22px;
}
.panel { background: rgba(255,255,255,.82); border: 1px solid rgba(23,24,22,.08); border-radius: var(--radius); padding: 22px; box-shadow: 0 8px 30px rgba(25,31,49,.045); }
.panel-heading, .preview-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-heading > div, .preview-topline > div { display: flex; align-items: center; gap: 9px; }
.panel h1, .panel h2, .preview-column h2 { font-size: 18px; margin: 0; letter-spacing: -.04em; }
.step { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .08em; }
.icon-button { border: 1px solid var(--line); background: white; width: 36px; height: 36px; border-radius: 12px; cursor: pointer; font-size: 20px; }

.field-label, fieldset legend, .select-wrap, .range-row label, .align-row > span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
textarea { width: 100%; resize: vertical; min-height: 118px; border: 1px solid var(--line); background: white; border-radius: 16px; padding: 14px; font-size: 16px; line-height: 1.7; outline: none; }
textarea:focus, select:focus, input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,88,255,.12); outline: none; }
.input-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; margin: 7px 2px 20px; }
fieldset { padding: 0; border: 0; margin: 0 0 20px; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.theme-option { aspect-ratio: 1; border: 3px solid white; outline: 1px solid var(--line); border-radius: 13px; cursor: pointer; position: relative; overflow: hidden; }
.theme-option::after { content: ""; position: absolute; inset: 25%; border-radius: 50%; border: 2px solid currentColor; opacity: .35; }
.theme-option.active { outline: 3px solid var(--blue); }
.theme-option[data-theme="sunset"] { background: linear-gradient(145deg,#1837a8,#ff6c7b 70%,#ffd86a); color:white; }
.theme-option[data-theme="paper"] { background: #f9f2dd; color:#2458ff; }
.theme-option[data-theme="bloom"] { background: linear-gradient(135deg,#e7c7ff,#ff9fc5); color:#5e2e90; }
.theme-option[data-theme="night"] { background:#171816; color:#c8ff38; }
.theme-option[data-theme="sea"] { background:linear-gradient(135deg,#0b62ff,#65dcff); color:white; }
.theme-option[data-theme="citrus"] { background:linear-gradient(145deg,#ffe33e 50%,#ff7f32 50%); color:#1b1c18; }
.theme-option[data-theme="mono"] { background:#fff; color:#171816; }
.theme-option[data-theme="forest"] { background:linear-gradient(145deg,#123b32,#2d8d68); color:#c8ffb0; }

.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.select-wrap { margin: 0; }
select { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 0 11px; margin-top: 8px; font-size: 13px; }
.range-row { margin-bottom: 18px; }
.range-row label { display: flex; justify-content: space-between; }
input[type="range"] { width: 100%; accent-color: var(--blue); }
.align-row { display: flex; align-items: center; justify-content: space-between; }
.align-row > span { margin: 0; }
.segmented { display: flex; background: #ecece6; padding: 3px; border-radius: 11px; }
.segmented button { border: 0; background: transparent; width: 38px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; }
.segmented button:nth-child(1) { text-align: left; }.segmented button:nth-child(3) { text-align: right; }
.segmented button.active { background: white; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.preview-column { min-width: 0; }
.preview-topline { padding: 0 5px; }
.live-dot { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #43bd6b; box-shadow: 0 0 0 4px rgba(67,189,107,.13); }
.card-stage { border-radius: 28px; padding: clamp(16px, 3vw, 34px); background: #e7e8e2; display: grid; place-items: center; overflow: hidden; min-height: 480px; }
.message-card { width: min(100%, 590px); aspect-ratio: 1; position: relative; border-radius: 10px; overflow: hidden; padding: clamp(34px, 5vw, 72px); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); isolation: isolate; transition: aspect-ratio .25s ease, background .25s ease; container-type: inline-size; }
.message-card.portrait { aspect-ratio: 4 / 5; width: min(100%, 470px); }
.message-card p { margin: 0; max-width: 100%; position: relative; z-index: 2; font-size: calc(var(--font-size, 54) * .1695cqw); line-height: 1.38; letter-spacing: -.055em; font-weight: 600; word-break: keep-all; overflow-wrap: break-word; text-align: center; }
.message-card footer { position: absolute; z-index: 2; left: clamp(28px,5vw,58px); right: clamp(28px,5vw,58px); bottom: clamp(24px,4vw,44px); display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .13em; opacity: .7; }
.card-shape { position: absolute; z-index: 0; pointer-events:none; }
.shape-one { width: 68%; aspect-ratio: 1; border-radius: 50%; right: -24%; top: -28%; border: 1px solid currentColor; opacity: .25; }
.shape-two { width: 30%; aspect-ratio: 1; border-radius: 50%; left: -12%; bottom: -9%; background: currentColor; opacity: .12; }
.theme-sunset { color: white; background: radial-gradient(circle at 85% 5%, #ffd972 0 17%, transparent 18%), linear-gradient(145deg,#153cae 0%,#5736a7 52%,#ff6d82 100%); }
.theme-paper { color: #193c98; background: linear-gradient(rgba(36,88,255,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(36,88,255,.08) 1px,transparent 1px),#fbf3dd; background-size: 30px 30px; }
.theme-bloom { color: #58247b; background: radial-gradient(circle at 15% 80%,rgba(255,255,255,.7) 0 15%,transparent 16%), linear-gradient(135deg,#ecd5ff,#ff9fc2); }
.theme-night { color: white; background: radial-gradient(circle at 100% 0,#38562d 0 24%,transparent 25%), #171816; }
.theme-night p::first-line { color: #c8ff38; }
.theme-sea { color: white; background: radial-gradient(circle at 10% 90%,rgba(255,255,255,.22) 0 22%,transparent 23%), linear-gradient(140deg,#084ed3,#39b9e7); }
.theme-citrus { color:#202018; background: linear-gradient(145deg,#ffe440 0 58%,#ff7e31 58%); }
.theme-mono { color:#171816; background:linear-gradient(90deg,transparent 49.7%,rgba(23,24,22,.08) 50%,transparent 50.3%),#fff; border:1px solid #d9d9d1; }
.theme-forest { color:#e4ffda; background:radial-gradient(circle at 85% 12%,#4dad82 0 15%,transparent 15.5%),linear-gradient(145deg,#0b322a,#1b684e); }
.font-plex { font-family:"IBM Plex Sans KR",sans-serif; }.font-gowun { font-family:"Gowun Dodum",sans-serif; font-weight:400!important; }.font-batang { font-family:"Gowun Batang",serif; font-weight:700!important; }.font-myeongjo { font-family:"Nanum Myeongjo",serif; font-weight:800!important; }.font-bold { font-family:"Black Han Sans",sans-serif; font-weight:400!important; }
.share-actions { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.share-note { text-align: center; color: var(--muted); font-size: 12px; margin: 10px 0 0; }

.library { max-height: calc(100vh - 108px); display: flex; flex-direction: column; position: sticky; top: 96px; }
.library-heading { margin-bottom: 14px; }
.count-badge { background: #e8edff; color: var(--blue); border-radius: 999px; min-width: 38px; padding: 5px 9px; text-align: center; font-size: 12px; font-weight: 700; }
.search-box { display: flex; align-items: center; gap: 9px; background: #f1f1ec; border-radius: 13px; padding: 0 12px; margin-bottom: 12px; }
.search-box input { width: 100%; height: 44px; border: 0; background: transparent; font-size: 14px; box-shadow:none; }
.category-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 11px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab { white-space: nowrap; border: 1px solid var(--line); background: white; border-radius: 999px; height: 35px; padding: 0 12px; cursor: pointer; font-size: 12px; font-weight: 600; }
.category-tab.active { background: var(--ink); color: white; border-color: var(--ink); }
.phrase-list { overflow-y: auto; min-height: 260px; padding-right: 3px; scrollbar-color: #c7c9c2 transparent; }
.phrase-item { width: 100%; text-align: left; border: 0; border-bottom: 1px solid #e8e9e3; background: transparent; padding: 14px 34px 14px 5px; cursor: pointer; font-size: 14px; line-height: 1.65; position: relative; word-break: keep-all; }
.phrase-item::after { content:"＋"; position:absolute; right:5px; top:50%; transform:translateY(-50%); color:#a5a79f; font-size:18px; }
.phrase-item:hover { color: var(--blue); }
.phrase-item.active { color: var(--blue); font-weight: 650; }
.phrase-item.active::after { content:"✓"; color:var(--blue); }
.empty-state { color:var(--muted); text-align:center; padding:48px 10px; font-size:14px; }
.btn-random { width:100%; background:#eef1ff; color:var(--blue); margin-top:12px; }

.copyright-note { width:min(1560px,calc(100% - 40px)); margin:0 auto 28px; display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:16px; background:#ecece6; color:var(--muted); font-size:13px; }
.copyright-note strong { color:var(--ink); }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:#171816; color:white; padding:12px 18px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s ease; z-index:40; font-size:14px; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(280px, 340px) 1fr; }
  .library { grid-column: 1 / -1; position:static; max-height:none; }
  .phrase-list { display:grid; grid-template-columns:1fr 1fr; max-height:420px; gap:0 22px; }
}
@media (max-width: 760px) {
  .topbar { min-height:66px; padding:11px 15px; }
  .original-badge { display:none; }
  .top-actions .btn { min-height:40px; padding:0 13px; font-size:13px; }
  .workspace { width:calc(100% - 24px); margin-top:14px; grid-template-columns:1fr; gap:14px; }
  .preview-column { grid-row:1; }
  .controls { grid-row:2; }
  .library { grid-row:3; grid-column:auto; }
  .panel { padding:17px; border-radius:18px; }
  .card-stage { min-height:0; padding:13px; border-radius:20px; }
  .message-card { padding:38px; }
  .share-actions { grid-template-columns:1fr 1fr; }
  .btn-share { grid-column:1 / -1; }
  .share-note { display:none; }
  .phrase-list { display:block; max-height:430px; }
  .copyright-note { width:calc(100% - 24px); align-items:flex-start; flex-direction:column; gap:3px; }
}
@media (max-width:420px) {
  .brand small { display:none; }
  .top-actions .btn span { display:none; }
  .two-columns { grid-template-columns:1fr; }
  .theme-grid { grid-template-columns:repeat(4,1fr); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }