/* 글꼴 (모두 SIL OFL 1.1 — 라이선스 전문: /fonts/): Poor Story © YoonDesign Inc. · Nunito, Nunito Sans © The Nunito Project Authors — 이 페이지들에 쓰는 글자 + 상용 한글 2,350자 · 한글 낱자모만 남김.
   Pretendard © Kil Hyung-jin (Reserved Font Name Pretendard) — 패키지 pretendard@1.3.9 의 조각 파일을 고치지 않고 그대로. */
@font-face { font-family: "Poor Story Fallback"; src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeo-Regular"), local("Malgun Gothic"), local("맑은 고딕"), local("Noto Sans CJK KR"), local("NotoSansCJKkr-Regular"), local("Noto Sans KR"); size-adjust: 92%; }
@font-face { font-family: "Poor Story"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ideas/poorstory-ideas-8ac1452021.woff") format("woff"); }
@font-face { font-family: "Nunito Sans"; font-weight: 500; font-style: normal; font-display: block; src: url("/fonts/ideas/nunitosans-500-297593051d.woff") format("woff"); }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-style: normal; font-display: block; src: url("/fonts/ideas/nunitosans-700-6814f266a7.woff") format("woff"); }
@font-face { font-family: "Nunito Sans"; font-weight: 800; font-style: normal; font-display: block; src: url("/fonts/ideas/nunitosans-800-7581b6289b.woff") format("woff"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; font-display: block; src: url("/fonts/ideas/nunito-900-3253efae9f.woff") format("woff"); }
@font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("/fonts/ideas/pretendard-1.3.9/PretendardVariable.subset.77.woff2") format("woff2-variations"), url("/fonts/ideas/pretendard-1.3.9/PretendardVariable.subset.77.woff2") format("woff2"); unicode-range: U+2103, U+2463, U+25c6, U+25cb, U+266c, U+3001, U+300a, U+3046, U+304c-304d, U+304f, U+3055, U+3059, U+3063, U+3066-3068, U+306f, U+3089, U+30b8, U+30bf, U+314f, U+4e0a, U+570b, U+5730, U+5916, U+5929, U+5c71, U+5e74, U+5fc3, U+601d, U+6027, U+63d0, U+6709, U+6734, U+751f, U+7684, U+82f1, U+9053, U+91d1, U+97f3, U+ac2f, U+ac4d, U+adc4, U+ade4, U+ae41, U+ae4d-ae4e, U+aed1, U+afb9, U+b0e0, U+b299, U+b365, U+b46c, U+b480, U+b4c8, U+b7b4, U+b819, U+b918, U+baab, U+bab9, U+be8f, U+bed7, U+c0ec, U+c19f, U+c1a5, U+c3d9, U+c464, U+c53d, U+c553, U+c570, U+c5cc, U+c633, U+c6a4, U+c7a3, U+c7a6, U+c886, U+c9d9-c9da, U+c9ec, U+ca0c, U+cc21, U+cd1b, U+cd78, U+cdc4, U+cef8, U+cfe4, U+d0a5, U+d0b5, U+d0ec, U+d15d, U+d188, U+d23c, U+d2ac, U+d729, U+d79b, U+ff01, U+ff08-ff09, U+ff5c; }
@font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("/fonts/ideas/pretendard-1.3.9/PretendardVariable.subset.84.woff2") format("woff2-variations"), url("/fonts/ideas/pretendard-1.3.9/PretendardVariable.subset.84.woff2") format("woff2"); unicode-range: U+2665, U+3160, U+4e2d, U+6587, U+65e5, U+ac12, U+ac14, U+ac16, U+ac81, U+ad34, U+ade0, U+ae54, U+aebc, U+af2c, U+afc0, U+afc8, U+b04c, U+b08c, U+b099, U+b0a9, U+b0ac, U+b0ae, U+b0b8, U+b123, U+b179, U+b2e5, U+b2f7, U+b4c0, U+b531, U+b538, U+b545, U+b550, U+b5a8, U+b6f0, U+b728, U+b73b, U+b7ad, U+b7ed, U+b809, U+b864, U+b86d, U+b871, U+b9bf, U+b9f5, U+ba40, U+ba4b, U+ba58, U+ba87, U+baac, U+bbc0, U+bc16, U+bc34, U+bd07, U+bd99, U+be59, U+bfd0, U+c058, U+c0e4, U+c0f5, U+c12d, U+c139, U+c228, U+c529, U+c5c7, U+c635, U+c637, U+c735, U+c77d, U+c787, U+c789, U+c8c4, U+c989, U+c98c, U+c9d0, U+c9d3, U+cc0c, U+cc99, U+cd0c, U+cd2c, U+cd98, U+cda4, U+ce59, U+ce60, U+ce6d, U+cea0, U+d0d0-d0d1, U+d0d5, U+d14d, U+d1a4, U+d29c, U+d2f1, U+d301, U+d39c, U+d3bc, U+d4e8, U+d540, U+d5ec, U+d640, U+d750; }

:root {
  color-scheme: light;
  --paper: #FCFBF7;
  --paper-2: #F4F0E8;
  --ink: #2B2B2F;
  --text: #3A3940;
  --soft: #69656F;
  --rule: #D9D4CA;
  --dot: #BDB8AF;
  --pen: #E0474C;
  --pen-ink: #C2363C;
  --plum: #3C3357;
  --plum-soft: #ECE6F7;
  --mint: #8EDCD2;
  --hand: "Poor Story", "Poor Story Fallback", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --paper-hand: "Poor Story", "Pretendard Variable", sans-serif;
  --gutter: 24px;
  --desk: #E7E3DB;
  --desk-edge: #DCD7CD;
  --card-soft: #77737C;
  --card-note: #6A6670;
  --chrome: rgba(255, 255, 255, .86);
  --chrome-stroke: rgba(0, 0, 0, .07);
  --ok: #1F7D37;
  --slide: cubic-bezier(.2, .9, .25, 1);
  --press: cubic-bezier(.3, 1.4, .5, 1);
  --sheet-ease: cubic-bezier(.32, .72, 0, 1);
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--text);
  font-family: var(--hand);
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
b, strong, h1, h2, h3, h4, th { font-weight: 400; }
.wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--plum); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-size: 18px; }
.skip:focus { top: 12px; }
.hl { background: linear-gradient(transparent 58%, var(--c, #F7C3CD) 58% 92%, transparent 92%); padding: 0 .08em; }
main:focus { outline: none; }

.staging-band { position: relative; z-index: 3; background: #FFF3C4; color: #5E4700; border-bottom: 1px solid #E8D58C; font-size: 17px; line-height: 1.45; padding: 8px 0; }
.staging-band .wrap { display: flex; gap: 8px; align-items: baseline; }
.staging-band .wrap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F0A92B; flex: none; transform: translateY(-1px); }

.site-top { position: relative; z-index: 2; background: var(--paper); box-shadow: 0 1px 0 var(--rule), 0 12px 26px -16px rgba(0,0,0,.3); }
.site-top::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 3px 3px; opacity: .5; }
.rings {
  position: relative; z-index: 2; height: 34px;
  background:
    radial-gradient(circle at 50% 78%, #55575E 0 5px, transparent 5.5px) 0 0 / 34px 34px repeat-x,
    linear-gradient(90deg, transparent 0 13px, #B9BCC2 13px 14.5px, #F4F5F7 14.5px 16px, #8C8F96 16px 17.5px, transparent 17.5px 34px) 0 0 / 34px 26px repeat-x;
  border-bottom: 1px solid var(--rule);
}
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 26px; color: var(--ink); flex: none; }
.brand img { width: 36px; height: 36px; }
header nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; }
header nav a { text-decoration: none; color: var(--soft); font-size: 19px; white-space: nowrap; }
header nav a:hover { color: var(--ink); }
header nav a[aria-current="page"] { color: var(--ink); background: linear-gradient(transparent 58%, #F7C3CD 58% 92%, transparent 92%); }
header nav a.threads { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
header nav a.threads svg { width: 17px; height: 17px; }
header nav a.dl { color: var(--plum); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 14px; }
header nav a.dl .dl-soon { display: none; }

.desk { position: relative; background: var(--desk); }
.desk::before, .desk::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.desk::before { background: radial-gradient(circle at 50% 40%, transparent 180px, var(--desk-edge) 1100px); opacity: .75; }
.desk::after { background-image: url("/assets/ideas/paper-noise.png"); background-size: 128px 128px; opacity: .35; mix-blend-mode: multiply; }

main { display: block; padding: 34px 0 72px; min-height: 60vh; }
.label { display: flex; align-items: center; gap: 14px; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 18px; }
.label::after { content: ""; flex: 1; height: 2.5px; background: var(--ink); border-radius: 2px; }
h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.15; color: var(--ink); margin: 0 0 16px; font-weight: 400; }
.desc { font-size: 21px; max-width: 700px; margin: 0 0 10px; }
.desc.big { color: var(--ink); }
.desc + .desc { margin-top: 0; }
.desc-end { margin-bottom: 30px; }
.desc a, .plain a { color: var(--ink); text-underline-offset: 3px; }
noscript p, .noscript { background: #fff; border-radius: 14px; padding: 16px 18px; font-size: 19px; max-width: 700px; }

.board {
  display: grid; column-gap: 34px; row-gap: 16px; justify-content: center; align-items: start;
  grid-template-columns: auto minmax(300px, 360px);
  grid-template-rows: auto auto auto 1fr auto auto auto;
  grid-template-areas: "paper write" "paper filters" "paper rules" "paper ." "pager ." "mine ." "me .";
}
.b-filters { grid-area: filters; }
.b-paper { grid-area: paper; min-width: 0; }
.b-pager { grid-area: pager; }
.b-mine { grid-area: mine; }
.b-me { grid-area: me; }
.b-write { grid-area: write; }
.b-rules { grid-area: rules; }

.panel { background: var(--chrome); border-radius: 16px; box-shadow: inset 0 0 0 .75px var(--chrome-stroke), 0 6px 28px rgba(0,0,0,.08), 0 .5px 2px rgba(0,0,0,.06); color: var(--ink); }
.b-filters { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.seg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seg-row .seg-name { font-size: 15px; color: var(--soft); margin-right: 2px; flex: none; }
.ghost { min-height: 36px; padding: 0 13px; border-radius: 18px; border: none; background: rgba(120, 115, 130, .13); color: var(--ink); font-size: 16px; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .2s var(--press); }
.ghost:active { transform: scale(.94); }
.ghost[aria-pressed="true"] { background: var(--plum); color: #fff; }
.ghost[aria-pressed="true"] .mk path { stroke: #fff; }
.mk { display: inline-block; vertical-align: -3px; flex: none; overflow: visible; }

.case { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.case-tag { height: 24px; padding: 0 10px; border-radius: 12px; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; white-space: nowrap; overflow: hidden; font-size: 15px; line-height: 1; color: var(--ink); background: #EDEDED; box-shadow: inset 0 0 0 .75px rgba(0,0,0,.1); }
.case-bar { height: 58px; border-radius: 22px; display: flex; align-items: flex-end; padding: 0 8px; background: rgba(120, 115, 130, .1); max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.case-bar::-webkit-scrollbar { display: none; }
.pen-btn { position: relative; width: 36px; height: 58px; padding: 0; border: none; background: transparent; cursor: pointer; flex: none; }
.pen-btn .art { position: absolute; left: 50%; bottom: 5px; transform: translate(-50%, 0) scale(.88); transform-origin: 50% 100%; transition: transform .35s var(--press); filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.18)); line-height: 0; }
.pen-btn[aria-pressed="true"] .art { transform: translate(-50%, -9px) scale(.88); }
.pen-btn:hover .art { transform: translate(-50%, -3px) scale(.88); }
.pen-btn[aria-pressed="true"]:hover .art { transform: translate(-50%, -10px) scale(.88); }
.pen-btn.all { width: 50px; }
.pen-btn.all .chipart { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 42px; height: 36px; border-radius: 10px; background: rgba(105, 101, 111, .14); color: var(--ink); display: grid; place-items: center; font-size: 14px; line-height: 1.1; transition: transform .35s var(--press); }
.pen-btn.all[aria-pressed="true"] .chipart { background: var(--plum); color: #fff; transform: translate(-50%, -9px); }
.pen-btn:focus-visible { outline-offset: -2px; }
.case-div { width: 1px; height: 30px; margin: 0 4px 14px; background: var(--soft); opacity: .25; flex: none; }

.paper-col { position: relative; perspective: 2600px; }
.sheet { --u: .42; --cw: 1277; --ch: 2000; --ml: 46; position: relative; margin-left: calc(var(--ml) * 1px * var(--u)); width: calc(var(--cw) * 1px * var(--u)); height: calc(var(--ch) * 1px * var(--u)); }
.sheet-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; background: var(--paper); box-shadow: 0 calc(var(--u) * 12px + 2px) calc(var(--u) * 52px + 8px) rgba(0,0,0,.16), 0 1.5px 4px rgba(0,0,0,.11); }
.rings-clip { position: absolute; z-index: 5; top: 0; overflow: hidden; pointer-events: none; height: 100%; }
.rings-clip img { position: absolute; left: 0; max-width: none; }
.ink { position: absolute; left: 0; top: 0; width: 1277px; height: 2000px; transform: scale(var(--u)); transform-origin: 0 0; }
.ink .row { position: absolute; left: 0; top: 0; width: 1277px; }
.ink .t { position: absolute; white-space: pre; font-family: var(--paper-hand); -webkit-text-stroke-width: calc(.004em + .25px); }
.ink svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ink svg.done { pointer-events: none; }
.hit { position: absolute; display: block; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: 12px; transition: background .14s ease-out; -webkit-tap-highlight-color: transparent; }
.hit:hover { background: rgba(231, 114, 143, .08); }
.hit:active { background: rgba(231, 114, 143, .13); }
.hit:focus-visible { outline: 7px solid var(--plum); outline-offset: -7px; border-radius: 14px; }
.sheet .loading { position: absolute; left: 196px; top: 470px; font: 400 37px/1 var(--paper-hand); color: #9A96A0; }
.turning { position: absolute !important; left: 0; top: 0; z-index: 6; backface-visibility: hidden; pointer-events: none; transform-origin: 0 50%; animation: turn-out .62s cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes turn-out { from { transform: rotateY(0); filter: brightness(1); } to { transform: rotateY(-96deg); filter: brightness(.82); } }

.b-pager { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--soft); font-size: 17px; font-variant-numeric: tabular-nums; }
.round-btn { width: 40px; height: 40px; border-radius: 20px; border: none; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--chrome); box-shadow: inset 0 0 0 .75px var(--chrome-stroke), 0 2px 8px rgba(0,0,0,.08); transition: transform .2s var(--press); }
.round-btn:active { transform: scale(.9); }
.round-btn:disabled { opacity: .35; cursor: default; }

.b-mine { padding: 12px 16px; border-radius: 14px; background: rgba(252, 251, 247, .62); color: var(--soft); font-size: 17px; }
.b-mine h2 { margin: 0 0 4px; font-size: 18px; color: var(--soft); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.b-mine h2 small { font-size: 15px; }
.b-mine ul { list-style: none; margin: 0; padding: 0; }
.b-mine li { padding: 6px 0; border-top: 1px dashed rgba(120, 115, 130, .3); }
.b-mine li:first-child { border-top: 0; }
.b-mine .ttl { color: var(--text); }
.b-mine .lbl { display: block; font-size: 15px; }
.me-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 16px; color: var(--soft); padding: 0 4px; margin: 0; }
.me-line .mask { color: var(--ink); }
.linkish { border: none; background: none; padding: 0; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink); }
.linkish:disabled { text-decoration: none; cursor: default; color: var(--card-soft); }
.btn-row .field { flex: 1 1 auto; min-width: 0; }
.x-btn.sheet-only { display: none; }
.sheet-modal .x-btn.sheet-only { display: grid; }

.b-rules { padding: 16px 18px; font-size: 17px; }
.b-rules p { margin: 0 0 6px; }
.b-rules .big { font-size: 21px; line-height: 1.4; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 16px; color: var(--soft); margin: 8px 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.b-rules .small { font-size: 16px; color: var(--soft); margin: 10px 0 0; }

.card { background: var(--paper); color: var(--ink); border: 1px solid rgba(43, 43, 47, .12); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08); font-size: 17px; line-height: 1.5; }
.card-in { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.card h2, .card h3 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 400; color: var(--ink); }
.card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card .sec { display: flex; flex-direction: column; gap: 6px; }
.card .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 16px; color: var(--card-soft); }
.card .note { font-size: 15px; color: var(--card-note); line-height: 1.5; margin: 0; }
.card p { margin: 0; }
.card a { color: var(--plum); text-underline-offset: 2px; }
.card .lead { margin-top: -6px; }
.x-btn { width: 32px; height: 32px; flex: none; border: none; border-radius: 12px; background: rgba(43, 43, 47, .07); color: #6E6A73; cursor: pointer; display: grid; place-items: center; padding: 0; }
.x-btn:hover { background: rgba(43, 43, 47, .12); }
.field { width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(43, 43, 47, .22); border-radius: 8px; background: #fff; font-size: 18px; color: var(--ink); outline: none; }
.field:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(60, 51, 87, .14); }
.field.hand-line { height: 46px; border: none; border-bottom: 1.5px solid #C9C6BF; border-radius: 0; background: transparent; padding: 0 2px; font-size: 23px; line-height: 46px; -webkit-text-stroke-width: .35px; }
.field.hand-line:focus { box-shadow: none; border-bottom-color: var(--plum); }
.field::placeholder { color: #A9A5AD; }
textarea.memo-lines { width: 100%; height: calc(4 * 34px + 4px); resize: vertical; min-height: 106px; border: none; outline: none; padding: 4px 2px 0; font-size: 18px; line-height: 34px; color: var(--ink); background: repeating-linear-gradient(transparent 0 33px, #C9C6BF 33px 34.5px) 0 4px / 100% 34px local; }
textarea.memo-lines:focus { box-shadow: 0 2px 0 var(--plum); }
textarea.memo-lines::placeholder { color: #A9A5AD; }
.field.code-field { font-size: 24px; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
.field.code-field::placeholder { font-size: 17px; letter-spacing: 0; }
.count { font-size: 14px; color: var(--card-soft); font-variant-numeric: tabular-nums; flex: none; }
.err { font-size: 15px; color: var(--pen-ink); margin: 0; }
.err:empty { display: none; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 17px; color: var(--ink); cursor: pointer; line-height: 1.45; }
.check input { flex: none; margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--pen); }
.check .req { color: var(--pen-ink); }
.btn { white-space: nowrap; flex: none; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(43, 43, 47, .18); background: #fff; color: var(--ink); font-size: 18px; line-height: 1.2; cursor: pointer; transition: transform .2s var(--press), opacity .15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(.95); }
.btn.plum { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn.pen { background: var(--pen); border-color: var(--pen); color: #fff; }
.btn:disabled { opacity: .42; cursor: default; }
.btn.wide { width: 100%; min-height: 48px; font-size: 19px; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 16px; }
.card a.btn { color: var(--ink); }
.card a.btn.plum { color: #fff; }
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(43, 43, 47, .06); font-size: 15px; color: var(--ink); white-space: nowrap; }
.swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.idea-body { font-size: 18px; white-space: pre-wrap; }
.vote-big { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(43, 43, 47, .045); flex-wrap: wrap; }
.vote-big .n { font-size: 32px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.vote-big .n small { font-size: 15px; color: var(--card-soft); margin-left: 4px; }
.vote-big .n.mine { color: var(--pen-ink); }
.kind-pick, .area-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-pick button, .area-pick button { min-height: 34px; padding: 0 12px 0 10px; border-radius: 17px; border: 1px solid rgba(43, 43, 47, .16); background: #fff; font-size: 16px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kind-pick button[aria-pressed="true"], .area-pick button[aria-pressed="true"] { border-color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum); background: var(--plum-soft); }
.similar { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(224, 71, 76, .06); }
.similar .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.similar .row .ttl { flex: 1 1 160px; font-size: 18px; color: var(--ink); min-width: 0; }
.notice { padding: 10px 12px; border-radius: 10px; background: rgba(60, 51, 87, .07); font-size: 16px; color: var(--ink); }
.notice.warn { background: rgba(224, 71, 76, .08); }
.ok-line { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ok); }
.quote { padding: 8px 12px; border-left: 3px solid var(--rule); background: rgba(43, 43, 47, .04); font-size: 19px; color: var(--ink); border-radius: 0 8px 8px 0; }
.spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.big-mark { display: grid; place-items: center; padding: 6px 0 2px; }
.big-mark path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw .7s .1s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hp-group { display: none; }

.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .2); animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } }
.pop { position: fixed; z-index: 70; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; animation: pop-in .22s var(--slide); }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.sheet-modal { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; border: none; animation: sheet-up .42s var(--sheet-ease); padding-bottom: env(safe-area-inset-bottom); }
.sheet-modal .grab { width: 36px; height: 5px; border-radius: 3px; background: rgba(43, 43, 47, .18); margin: 7px auto 0; }
@keyframes sheet-up { from { transform: translateY(100%); } }
.toast { position: fixed; z-index: 90; left: 50%; bottom: 26px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 22px; background: rgba(28, 28, 28, .93); color: #fff; font-size: 17px; box-shadow: 0 10px 40px rgba(0,0,0,.18); animation: toast .3s var(--slide); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 10px); } }
.fab { position: fixed; z-index: 35; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); min-height: 50px; padding: 0 20px; border-radius: 25px; border: none; background: var(--plum); color: #fff; font-size: 19px; box-shadow: 0 10px 30px rgba(0,0,0,.22); display: none; align-items: center; gap: 7px; cursor: pointer; }

.solo { max-width: 600px; }
.solo .card-in { padding: 20px 20px 22px; gap: 16px; }
.back-link { display: inline-block; margin: 0 0 14px; font-size: 18px; color: var(--soft); text-underline-offset: 3px; }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.facts li { display: flex; gap: 10px; flex-wrap: wrap; }
.facts .k { color: var(--card-soft); min-width: 7em; }
.list { margin: 0; padding: 0; list-style: none; font-size: 16px; }
.list li { padding: 6px 0; border-top: 1px dashed rgba(120, 115, 130, .3); display: flex; gap: 4px 10px; flex-wrap: wrap; justify-content: space-between; }
.list li:first-child { border-top: 0; }
.list .when { color: var(--card-soft); font-size: 15px; }
.fold summary { cursor: pointer; color: var(--plum); font-size: 16px; }
.mail-help { font-size: 16px; color: var(--soft); max-width: 600px; margin: 18px 0 0; }
.mail-help a { color: var(--ink); }

.terms { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 20px; padding: 26px 28px 22px; box-shadow: 0 10px 30px -22px rgba(0,0,0,.4); max-width: 780px; font-size: 18px; color: var(--text); }
.terms .ver { color: var(--soft); font-size: 16px; margin: 0 0 14px; }
.terms ol { margin: 0; padding-left: 1.6em; }
.terms li { margin: 0 0 10px; padding-left: 4px; }
.terms li::marker { color: var(--pen); }
.terms a { color: var(--ink); text-underline-offset: 3px; }

footer { position: relative; z-index: 1; border-top: 1px solid var(--rule); background: var(--paper-2); padding: 44px 0 36px; font-size: 17px; color: var(--soft); }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
.foot { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.lah { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; color: var(--ink) !important; }
.lah img { width: 30px; height: 30px; }
.made { margin: 10px 0 12px; color: var(--text); }
.biz { list-style: none; padding: 0; margin: 0; font-size: 16px; line-height: 1.75; }
.links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.links h2 { margin: 0 0 4px; font-weight: 400; font-size: 20px; color: var(--ink); }
.legal { margin: 30px 0 0; padding-top: 18px; border-top: 1px dashed var(--dot); font-size: 15px; }

@media (max-width: 1099px) {
  .board { grid-template-columns: minmax(0, 680px); grid-template-rows: none; grid-template-areas: "filters" "paper" "pager" "mine" "me" "write" "rules"; }
}
@media (max-width: 900px) {
  .foot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  main { padding-top: 26px; }
  .board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "filters" "paper" "pager" "mine" "me" "rules"; }
  .board > * { min-width: 0; }
  .board .b-write:not(.in-sheet) { display: none; }
  .fab { display: inline-flex; }
  .board { padding-bottom: 60px; }
  .b-filters { padding: 12px 12px 10px; }
  .terms { padding: 20px 18px 16px; }
}
@media (max-width: 700px) {
  header nav a.sec, header nav a.dl { display: none; }
  header nav a.sec.keep { display: inline; }
  header nav a.ask { color: var(--plum); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 14px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 19px; }
  .brand { font-size: 23px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  header nav { gap: 4px 14px; }
  header nav a { font-size: 17px; }
  header nav a.ask { padding: 2px 12px; }
  .desc { font-size: 20px; }
  .solo .card-in { padding: 16px 14px 18px; }
}
@media (max-width: 379px) {
  header nav a.threads span { display: none; }
  header nav { gap: 4px 10px; }
  .brand { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.links { gap: 0; }
.links a { display: inline-flex; align-items: center; min-height: 44px; }
.ghost { min-height: 44px; }
.round-btn { width: 44px; height: 44px; border-radius: 22px; }
.brand, .lah { min-height: 44px; }
header nav a.threads { min-width: 44px; justify-content: center; }
.btn.small { min-height: 44px; }
.kind-pick button, .area-pick button { min-height: 44px; border-radius: 22px; }
@media (max-width: 700px) { header nav a.sec.keep { display: inline-flex; } }

header.top { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 4px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-size: 26px; color: var(--ink); flex: none; }
.brand img { width: 36px; height: 36px; }
.menu > summary { display: none; }
header nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; }
header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; border-radius: 10px; text-decoration: none; color: var(--soft); font-size: 19px; white-space: nowrap; }
header nav a:hover { color: var(--ink); }
header nav a.threads { gap: 6px; color: var(--ink); }
header nav a.threads svg { width: 17px; height: 17px; flex: none; }
header nav a.dl { min-height: 44px; margin-left: 8px; padding: 0 16px; border-radius: 999px; color: var(--plum); box-shadow: inset 0 0 0 1.5px currentColor; }
@media (max-width: 820px) {
  header.top { padding-top: 14px; }
  .menu > summary {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 16px; border-radius: 999px;
    color: var(--plum); box-shadow: inset 0 0 0 1.5px currentColor; font-size: 18px; line-height: 1; cursor: pointer;
    list-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary .bars { position: relative; width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .menu[open] > summary { background: var(--plum); color: #fff; box-shadow: none; }
  .menu[open] > summary .bars { box-shadow: none; transform: rotate(45deg); }
  .menu[open] > summary .bars::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: currentColor; transform: rotate(90deg); }
  header nav {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    padding: 10px; border-radius: 20px; background: #fff;
    box-shadow: 0 24px 48px -20px rgba(40,30,20,.45), 0 0 0 1px rgba(0,0,0,.07);
  }
  header nav a { min-height: 50px; padding: 0 16px; border-radius: 14px; background: var(--paper); color: var(--ink); }
  header nav a:hover { background: var(--paper-2); }
  header nav a.dl { grid-column: 1 / -1; order: 99; justify-content: center; margin: 4px 0 0; min-height: 52px; border-radius: 14px; background: var(--plum); color: #fff; box-shadow: none; }
}
header nav { gap: 0 4px; }
header nav a[aria-current="page"] { color: var(--ink); background: linear-gradient(transparent 58%, #F7C3CD 58% 92%, transparent 92%); }
@media (max-width: 820px) {
  header nav a.sec, header nav a.dl, header nav a.threads { display: inline-flex; }
  header nav a.threads span { display: inline; }
  header nav { gap: 6px; }
  header nav a { font-size: 19px; }
  header nav a.dl { display: flex; }
  html:not(.nav-js) .menu[data-late] > nav { display: none; }
  html:not(.nav-js) .menu[data-late][open] > summary { background: none; color: var(--plum); box-shadow: inset 0 0 0 1.5px currentColor; }
}

.more { position: relative; display: flex; align-items: center; }
.more-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 9px; border: 0; border-radius: 10px; background: none; color: var(--soft); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.more-btn:hover, .more-btn[aria-expanded="true"] { color: var(--ink); }
.more-btn svg { flex: none; transition: transform .15s ease; }
.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.more-btn:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 8px; }
.more-menu { position: absolute; z-index: 40; top: calc(100% + 8px); left: 50%; width: 330px; margin-left: -165px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 24px 48px -20px rgba(40,30,20,.45), 0 0 0 1px rgba(0,0,0,.07); text-align: left; }
.more-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
header nav .more-menu a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; margin: 0; padding: 8px 14px; border-radius: 12px; background: none; color: var(--ink); font-size: 19px; line-height: 1.25; white-space: normal; box-shadow: none; }
header nav .more-menu a:hover, header nav .more-menu a:focus-visible { background: var(--paper-2); }
.more-menu small { font-size: 15px; line-height: 1.35; color: var(--soft); }
html:not(.nav-js) .more:hover > .more-menu, html:not(.nav-js) .more:focus-within > .more-menu { display: block !important; }
@media (prefers-reduced-motion: reduce) { .more-btn svg { transition: none; } }
@media (max-width: 820px) {
  .more { order: 90; grid-column: 1 / -1; display: block; padding-top: 4px; }
  .more-btn { display: none; }
  .more::before { content: "기능"; display: block; padding: 2px 8px 6px; font-size: 15px; line-height: 1.3; color: var(--soft); }
  .more-menu, .more-menu[hidden] { display: grid !important; gap: 6px; position: static; width: auto; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .more-menu::before { content: none; }
  header nav .more-menu a { min-height: 58px; padding: 8px 16px; border-radius: 14px; background: var(--paper); }
  header nav .more-menu a:hover { background: var(--paper-2); }
  header nav a[aria-current="page"] { background: var(--plum-soft, #ECE6F7); color: var(--plum); }
}

@media screen {
  [data-page-kind] [style*="Poor Story"], [data-page-kind] [style*="Spiralday Hand"], [data-page-kind] [style*="Spiralday Clean"] { -webkit-text-stroke-width: calc(0.004em + 0.25px); }
  [data-page-kind] .hand-ink { stroke-width: calc(0.004em + 0.25px); stroke-linejoin: round; }
}