/* 톤보넬 토퍼 웹앱 - 밝은 화이트 톤, 포인트 주황 #F8A550 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; background: #f7f7f5; color: #262626; font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; }
button, input, textarea { font-family: inherit; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid #2f7de1; outline-offset: 2px; }

.top { background: #fff; border-bottom: 1px solid #ececec; padding: 12px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 38px; height: 38px; border-radius: 50%; background: #F8A550; color: #fff; font-weight: bold; font-size: 13px; display: grid; place-items: center; }
.top h1 { margin: 0; font-size: 21px; }
.top .sub { margin: 0; color: #7a7a7a; font-size: 14px; }

.wrap { display: grid; grid-template-columns: minmax(360px, 420px) 1fr; grid-template-areas: "controls preview"; gap: 20px; padding: 18px 24px 40px; max-width: 1600px; margin: 0 auto; }
.controls { grid-area: controls; min-width: 0; }
.preview { grid-area: preview; min-width: 0; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); position: sticky; top: 14px; align-self: start; }

.panel { background: #fff; border-radius: 16px; padding: 16px 18px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 14px; }
.panel h2 { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; }
.panel h2 b { width: 28px; height: 28px; border-radius: 50%; background: #F8A550; color: #fff; display: inline-grid; place-items: center; margin-right: 8px; font-size: 15px; }
.lbl { display: block; font-weight: bold; font-size: 15px; margin: 14px 0 6px; }
.lbl.small { font-size: 13px; color: #666; margin: 12px 0 6px; }
.lbl0 { display: block; font-weight: bold; font-size: 15px; margin-bottom: 6px; }
.hint { color: #7a7a7a; font-size: 13px; line-height: 1.5; margin: 6px 0 0; font-weight: normal; }
.muted { color: #8a8a8a; }

/* 선택 버튼 묶음 */
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; min-height: 42px; padding: 8px 6px; border: 2px solid #e6e1da; border-radius: 12px; background: #fff; color: #444; font-size: 15px; font-weight: bold; cursor: pointer; }
.seg button[aria-pressed="true"] { border-color: #F8A550; background: #fff4e6; color: #b5600f; }
.seg button:hover { border-color: #f3c48f; }
.seg.big button { min-height: 64px; font-size: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.seg.big button small { font-size: 12px; font-weight: normal; color: #888; }
.seg.big button[aria-pressed="true"] { background: #F8A550; color: #fff; }
.seg.big button[aria-pressed="true"] small { color: #fff6ea; }
.hanja { font-family: 'Batang', '바탕', serif; font-size: 20px !important; }

textarea, input.line { width: 100%; font-size: 21px; line-height: 1.55; padding: 10px 12px; border: 1px solid #dcd7d0; border-radius: 12px; background: #fff; color: #222; }
textarea { resize: vertical; min-height: 104px; }
.txtwrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.linecounts { list-style: none; margin: 0; padding: 11px 0 0; font-size: 13px; color: #8a8a8a; line-height: 32.5px; min-width: 52px; }
.linecounts li { white-space: nowrap; }
.linecounts li.long { color: #c8641a; font-weight: bold; }
.btnrow { display: flex; gap: 8px; margin-top: 8px; }
.btnrow.three .btn { flex: 1; }
.btn { min-height: 40px; padding: 8px 14px; border: 1px solid #e3c8a8; border-radius: 10px; background: #fff; color: #a8580f; font-size: 15px; cursor: pointer; }
.btn:hover { background: #fff7ee; }
.btn.ghost { border-color: #ddd; color: #666; margin-top: 14px; }
.btn:disabled, .bigbtn:disabled { opacity: .45; cursor: default; }
.sideown { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
input.one { width: 80px; font-size: 26px; padding: 4px 8px; text-align: center; border: 1px solid #dcd7d0; border-radius: 10px; font-family: 'Batang', '바탕', serif; }

.chips { margin-top: 6px; border-top: 1px dashed #eee; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid #ebe5dd; background: #fafaf8; border-radius: 999px; padding: 6px 12px; font-size: 14px; color: #444; cursor: pointer; }
.chip:hover { border-color: #F8A550; background: #fff4e6; }
.chiprow .none { color: #aaa; font-size: 13px; }

/* 글꼴 카드 */
.fontcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fontcard { border: 2px solid #e6e1da; border-radius: 12px; background: #fff; padding: 8px 4px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.fontcard[aria-pressed="true"] { border-color: #F8A550; background: #fff8ef; }
.fontcard img { mix-blend-mode: multiply; width: 100%; max-width: 110px; height: auto; display: block; }
.fontcard .fn { font-size: 13px; font-weight: bold; color: #444; text-align: center; line-height: 1.3; }
.fontcard .fl { font-size: 11px; color: #c07020; min-height: 14px; }

.row { margin: 14px 0 2px; }
.row > label { display: flex; justify-content: space-between; font-weight: bold; font-size: 15px; }
.row label em { font-style: normal; color: #c8641a; }
.row input[type=range] { width: 100%; accent-color: #F8A550; height: 28px; }
.ends { display: flex; justify-content: space-between; color: #a3a3a3; font-size: 12px; margin-top: -4px; }
.fitbox { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.num { width: 110px; font-size: 19px; padding: 6px 10px; border: 1px solid #dcd7d0; border-radius: 10px; }
details { margin-top: 14px; }
details summary { cursor: pointer; color: #777; font-size: 14px; padding: 4px 0; }

.bigbtn { width: 100%; min-height: 58px; font-size: 19px; font-weight: bold; color: #fff; background: #F8A550; border: 0; border-radius: 14px; cursor: pointer; }
.bigbtn:hover { background: #f09434; }
.filename { font-size: 13px; color: #777; margin: 10px 0 0; word-break: break-all; }
.howto { background: #fffaf3; border: 1px solid #f6e2c8; border-radius: 12px; padding: 4px 14px; margin-top: 12px; font-size: 14px; line-height: 1.6; }
.howto p { margin: 8px 0; }
.foot { color: #999; font-size: 12px; text-align: center; }
.foot a { color: #999; }

/* 미리보기 */
.status { font-size: 15.5px; padding: 10px 14px; border-radius: 12px; margin-bottom: 10px; white-space: pre-line; line-height: 1.55; }
.status.ok { background: #ecf7ec; color: #22702a; }
.status.warn { background: #fff3e0; color: #9a5300; }
.status.busy { background: #f2f2f0; color: #666; }
.sizebar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.size { font-size: 15px; color: #555; }
.size b { font-size: 22px; color: #222; }
.size .ptinfo::before { content: '· '; }
.tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tool { min-height: 36px; padding: 5px 11px; border: 1px solid #ddd; border-radius: 9px; background: #fff; color: #444; font-size: 14px; cursor: pointer; }
.tool[aria-pressed="true"] { border-color: #F8A550; background: #fff4e6; color: #b5600f; font-weight: bold; }
.zoomval { min-width: 46px; text-align: center; font-size: 13px; color: #777; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #555; margin: 0 0 8px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.stage { position: relative; overflow: auto; max-height: calc(100vh - 230px); min-height: 200px; border: 1px solid #eee; border-radius: 12px; background: #fff; }
.stage canvas { display: block; margin: 0 auto; }
.busymask { position: absolute; inset: 0; background: rgba(255,255,255,.55); display: grid; place-items: center; pointer-events: none; }
.busymask span { background: #fff; border: 1px solid #f1d2ad; color: #a8580f; padding: 8px 16px; border-radius: 999px; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.gridnote { font-size: 12px; color: #999; margin: 6px 0 0; text-align: right; }

@media (max-width: 900px) {
  .wrap { grid-template-columns: 1fr; grid-template-areas: "preview" "controls"; padding: 12px 12px 30px; gap: 12px; }
  .preview { position: static; padding: 12px; }
  .stage { max-height: 52vh; min-height: 90px; }
  .size .ptinfo { display: block; font-size: 13px; }
  .size .ptinfo::before { content: ''; }
  .tool .lg { display: none; }
  .size { width: 100%; }
  .sizebar { margin-bottom: 6px; }
  .top { padding: 10px 14px; gap: 6px; }
  .top h1 { font-size: 19px; }
  .top .sub { font-size: 13px; }
  .tool { padding: 5px 9px; font-size: 13px; }
}

.fontcard .fw { font-size: 11.5px; color: #888; }

.ver { position: fixed; right: 8px; bottom: 4px; font-size: 11px; color: #b5b5b5; pointer-events: none; }
@media (max-width: 900px) { .ver { position: static; text-align: right; padding: 0 12px 10px; } }