/* Lorem Ipsum 생성기 (lorem-ipsum-generator) — 2026-10-22. '조판대': 지시서(톤 띠) → 교정지(머리 줄 복사 · 종이 · 글자 수 눈금자 · 글꼴·크기·단) → 통계 6칸.
   지시서는 작업면 780px 이상이면 두 줄 [단위 | 개수·빠른 개수] / [글자 종류 | 시작 문구 | 새로 만들기], 460~779px 는 네 줄, 그 아래는 한 열(단위 2×2). */
.lip{container:lip/inline-size;overflow:hidden}
.lip .v2-f > .v2-label{display:block;margin:0 0 5px}
.lip .v2-seg button:disabled{opacity:.4;cursor:not-allowed}
.lip .v2-seg button:disabled:hover{background:var(--paper);color:var(--muted)}

/* ---------- 지시서 ---------- */
.lip-order{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.lip-seg{flex-wrap:nowrap}
.lip-seg button{height:var(--v2-ctl);padding:0 13px;font-size:13px;white-space:nowrap}
.lip-unitf .v2-seg,.lip-scriptf .v2-seg{display:flex;flex-wrap:wrap;width:100%}
.lip-unitf .v2-seg button,.lip-scriptf .v2-seg button{flex:1 1 0;min-width:max-content}
.lip-nrow{display:flex;flex-wrap:wrap;gap:8px}
.lip-step{flex:1 1 190px;min-width:max-content;overflow:hidden}
.lip-step .lip-stepbtn{flex:0 0 40px;border:0;background:var(--btn);font-family:var(--sans);font-size:18px;font-weight:700;color:var(--ink);transition:background var(--ease)}
.lip-step .lip-stepbtn:hover{background:var(--btn-hover)}
.lip-step .lip-stepbtn:first-child{border-right:1px solid var(--soft)}
.lip-step .lip-stepbtn:last-child{border-left:1px solid var(--soft)}
.lip-step input{min-width:76px;text-align:center}
.lip-step b{border-right:0}
.lip-chips{flex:1 0 auto}
.lip-chips button{flex:1 1 0;min-width:42px;padding:0 10px;font-variant-numeric:tabular-nums lining-nums}
.lip-start{min-height:var(--v2-ctl);align-self:end}
.lip-start.is-off{opacity:.5;cursor:not-allowed}
.lip-new{justify-content:center;align-self:end}
.lip-msg{margin:0;padding:10px 18px 0}
.lip-msg.is-error{color:var(--accent)}
/* 좁은 화면: [단위] [개수] [글자 종류] [시작 문구 | 새로 만들기] */
.lip-order{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"unit unit" "count count" "script script" "start new";align-items:end}
.lip-unitf{grid-area:unit;align-self:start}.lip-nf{grid-area:count;align-self:start}.lip-scriptf{grid-area:script}.lip-start{grid-area:start}.lip-new{grid-area:new}
@container lip (max-width:459px){
  .lip-unitf .v2-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  :lang(ko) .lip-unitf .v2-seg,:lang(ja) .lip-unitf .v2-seg{display:flex}
}
@container lip (min-width:460px){
  .lip-order{grid-template-areas:"unit unit" "count count" "script new" "start start"}
}
@container lip (min-width:780px){
  .lip-order{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"unit count count" "script start new";gap:14px 18px}
  .lip-unitf .v2-seg,.lip-scriptf .v2-seg{width:auto}
  .lip-unitf .v2-seg button,.lip-scriptf .v2-seg button{flex:0 0 auto}
  .lip-step{flex:1 1 200px;max-width:300px}
}

/* ---------- 교정지 ---------- */
.lip-sheet{padding:14px 18px 0}
.lip-shead{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 10px}
.lip-stitle{display:flex;align-items:baseline;gap:8px;margin:0}
.lip-lines{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.lip-out{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* 복사 안내: 머리 줄 아래 교정지 오른쪽 위에 겹쳐 뜬다(5초). 비면 숨김 */
.lip-status{position:absolute;right:0;top:calc(100% + 6px);z-index:2;max-width:min(100%,440px);padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 2px 10px rgba(26,18,8,.12);line-height:1.45;white-space:normal}
.lip-status:empty{display:none}
.lip-paper{border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);padding:14px 20px 8px;box-shadow:0 1px 0 var(--soft)}
.lip-scroll{position:relative;max-height:clamp(220px,52vh,470px);overflow:auto;outline:0;scrollbar-width:thin}
.lip-scroll:focus-visible{box-shadow:0 0 0 2px var(--accent-wash);outline:1px solid var(--accent);outline-offset:4px}
.lip-sheet.is-more .lip-scroll{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
.lip-sheet.is-stale .lip-page{opacity:.42}
.lip-page{font-size:var(--lip-fs,16px);line-height:1.7;color:var(--ink);overflow-wrap:anywhere;transition:opacity var(--ease)}
.lip-page[data-face="sans"]{font-family:var(--sans)}
.lip-page[data-face="serif"]{font-family:ui-serif,Georgia,"Times New Roman","AppleMyungjo","Nanum Myeongjo","Noto Serif KR","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.lip-page[data-cols="2"]{column-count:2;column-gap:28px}
.lip-page[data-cols="3"]{column-count:3;column-gap:24px}
.lip-page p{margin:0 0 .85em}
.lip-page p:last-child{margin-bottom:0}
/* 새로 만들 때만 앞 문단 12개가 차례로 떠오른다(Texts reveal: 500ms · 12px · 40ms 간격 · 흐림 3px). 첫 화면은 멈춘 상태 */
.lip-page.is-anim p.a{opacity:0;transform:translateY(12px);filter:blur(3px);transition:opacity 500ms cubic-bezier(.22,1,.36,1),transform 500ms cubic-bezier(.22,1,.36,1),filter 500ms cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 40ms)}
.lip-page.is-anim.is-shown p.a{opacity:1;transform:translateY(0);filter:blur(0)}

/* 글자 수 눈금자: 5자 눈금·10자 숫자, 45~75자 띠(라틴), 권장 한계 넘는 구간 */
.lip-ruler{height:26px;margin-top:10px;padding-top:4px;border-top:1px dashed var(--soft);overflow:hidden}
.lip-ruler svg{display:block;overflow:visible}
.lip-rx{stroke:var(--line);stroke-width:1}
.lip-rt{stroke:var(--muted);stroke-width:1}
.lip-rn{fill:var(--muted);font-family:var(--mono);font-size:9.5px;font-weight:700}
.lip-rb{fill:color-mix(in srgb,var(--ink) 16%,transparent)}
.lip-ro{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.lip-rl{stroke:var(--accent);stroke-width:1.5}
.lip-rm{fill:var(--ink)}
.lip-gauge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0 14px}
.lip-measure{flex:1 1 220px;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.lip-measure::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--ink);vertical-align:1px}
.lip-measure[data-v="short"],.lip-measure[data-v="long"]{color:var(--muted)}
.lip-measure[data-v="short"]::before,.lip-measure[data-v="long"]::before{background:var(--line)}
.lip-measure[data-v="over"],.lip-measure[data-v="cjk_over"]{color:var(--accent)}
.lip-measure[data-v="over"]::before,.lip-measure[data-v="cjk_over"]::before{background:var(--accent)}
.lip-look{display:flex;flex-wrap:wrap;gap:6px}
.lip-look .v2-seg button{font-variant-numeric:tabular-nums lining-nums}

/* ---------- 통계 ---------- */
.lip-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 55%,var(--card))}
.lip-stats div{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:10px 14px;border-bottom:1px solid var(--soft)}
.lip-stats div:nth-child(odd){border-right:1px solid var(--soft)}
.lip-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.lip-stats dd{margin:3px 0 0;font-family:var(--sans);font-size:18px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
@container lip (min-width:460px){
  .lip-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lip-stats div{border-right:1px solid var(--soft)}
  .lip-stats div:nth-child(3n){border-right:0}
  .lip-stats div:nth-child(n+4){border-bottom:0}
}
@container lip (max-width:459px){ .lip-stats div:nth-child(n+5){border-bottom:0} }
@container lip (min-width:720px){
  .lip-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lip-stats div{border-bottom:0}
  .lip-stats div:nth-child(3n){border-right:1px solid var(--soft)}
  .lip-stats div:last-child{border-right:0}
}
.lip-nojs{margin:0;padding:12px 18px}

/* ---------- 본문: 키케로 원문 ↔ Lorem ipsum 대조 ---------- */
.lip-cicero{margin:6px 0 18px;padding:16px 18px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.lip-cicero p{margin:0;font-family:ui-serif,Georgia,"Times New Roman",serif;font-size:16px;line-height:1.75;font-style:italic;color:var(--muted)}
.lip-cicero .lip-cl{margin-top:10px;padding-top:10px;border-top:1px dashed var(--soft);font-style:normal;color:var(--ink)}
.lip-cicero mark{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink);border-radius:2px;padding:0 1px}
.lip-cicero figcaption{margin-top:10px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .lip-page.is-anim p.a{transition:none !important}
  .lip-page{transition:none}
}