/* Logro 디자인 시스템 v4 「한 장」 조판 — 정본 chagok-web/DESIGN.md (브리프 BRAND_v4.md). 앱 Theme.swift 의 L·LFont·LSize 와 같은 이름. 서체 링크는 각 html 에 둔다: Hahmlet(Google Fonts) + Pretendard(jsDelivr). 여기서 @import 하지 않는다. 잉크는 먹과 주홍 둘뿐(2색 인쇄). 그림자·그라데이션·0.5px·소수 px 없음. */ :root{ /* 밝은 방(종이) */ --bg:#F4F1EA;--surface:#FBFAF7;--ink:#141210;--ink2:#4A463F;--line:#C9C3B6; --accent:#D2401E;--accent-text:#B8361A;--accent2:#2B4C7E;--placeholder:#7A746A; /* 어두운 방(스튜디오) — 녹음 화면·다크 밴드에서만 */ --dark-bg:#16140F;--dark-surface:#221F19;--dark-line:#33302A;--dark-ink:#F2EEE6;--dark-ink2:#A29B8F;--accent-text-dark:#E8552F; /* 프로젝트 6색 — 24×6 색지 탭(.ptab)에만 */ --p1:#4F6D8F;--p2:#7A5C8E;--p3:#4F7A5E;--p4:#A8783F;--p5:#8A5F55;--p6:#4E7F7B; /* 서체 */ --disp:"Hahmlet","Apple SD Gothic Neo",serif; --ui:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; /* 간격 8그리드 · radius 3종 · 괘선 */ --sp1:8px;--sp2:16px;--sp3:24px;--sp4:32px;--sp5:48px;--sp6:64px;--sp7:96px; --r-sheet:2px;--r-btn:4px;--r-tag:2px;--hair:1px; } *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased} a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}a:hover{color:var(--accent-text)} h1,h2,h3,h4,p{margin:0;font-weight:inherit} button{font:inherit;cursor:pointer} ::placeholder{color:var(--placeholder)} /* 타이포 눈금 12·14·16·20·25·31·39·64 (정수 px만) */ .disp{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;line-height:1.2} .h1{font-family:var(--disp);font-weight:700;font-size:39px;line-height:1.2;letter-spacing:-.01em} .h2{font-family:var(--disp);font-weight:700;font-size:31px;line-height:1.25;letter-spacing:-.01em} .h3{font-family:var(--disp);font-weight:600;font-size:25px;line-height:1.3;letter-spacing:0} .h4{font-family:var(--ui);font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.01em} .body{font-size:16px;line-height:1.75}.strong{font-weight:600} .cap{font-size:14px;line-height:1.5;color:var(--ink2)} .lbl{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.4;color:var(--ink2)} .time{font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--ink2)} .numxl{font-family:var(--disp);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .tnum{font-variant-numeric:tabular-nums} /* 괘선 */ .hair{height:var(--hair);background:var(--line);flex:none} .rule{height:var(--hair);background:var(--ink);flex:none} .dbl{border-top:var(--hair) solid var(--ink);padding-top:3px}.dbl::after{content:"";display:block;height:var(--hair);background:var(--line)} /* 블록 머리: 상단 괘선 + 라벨 + 오른쪽 개수(time) */ .blk{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp2);border-top:var(--hair) solid var(--line);padding-top:var(--sp1)} .blk.strong{border-top-color:var(--ink)} /* 워드마크 — SVG 아웃라인(shared/wordmark.svg). 레일 24px, 판권 20px */ .wm{display:inline-flex;align-items:center;text-decoration:none} .wm img{height:24px;width:auto;display:block} /* 심볼 단독(≤19px) = rect 3개 L+■ */ .sym{width:24px;height:24px;display:block} /* 지면(Card): surface 면 + 상단 괘선 + radius 2. 4변 윤곽 없음. */ .card{position:relative;min-width:0;background:var(--surface);border:0;border-top:var(--hair) solid var(--line);border-radius:var(--r-sheet)} .card.strong{border-top-color:var(--ink)} /* 프로젝트 색지 탭 24×6, 지면 좌상단(x0,y0) */ .ptab{position:absolute;top:0;left:0;width:24px;height:6px;border-radius:0;display:block} .ptab.in{position:static;display:inline-block;flex:none} /* 기사 끝 표시 ■ */ .endmark{width:8px;height:8px;background:var(--accent);display:block;flex:none} /* 버튼: 높이 44 · radius 4. .plain(기본) surface+먹 윤곽 / .pri 주홍 면+surface 글자(화면당 하나) / .ink 먹 면 */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp1);height:44px;padding:0 var(--sp2);border-radius:var(--r-btn);border:var(--hair) solid var(--ink);background:var(--surface);color:var(--ink);font-family:var(--ui);font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap} .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--surface)} .btn.ink{background:var(--ink);border-color:var(--ink);color:var(--surface)} .btn.sm{height:32px;padding:0 12px;font-size:14px} .btn.text{border-color:transparent;background:transparent;color:var(--accent-text);padding:0 4px} .btn:disabled,.btn[disabled]{opacity:1;cursor:default;background:var(--surface);color:var(--ink2);border-color:var(--line)} select.btn{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center} /* 입력면: surface + line 1px 윤곽(입력은 윤곽이 있어야 칸으로 읽힌다) + radius 4 */ .inp{font:inherit;font-size:16px;line-height:1.5;padding:10px 12px;border:var(--hair) solid var(--line);border-radius:var(--r-btn);background:var(--surface);color:var(--ink);outline:none;width:100%} .inp:focus{border-color:var(--ink)} textarea.inp{resize:vertical} /* 시간 태그: 면 없이 글자만 */ .tsx{font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink2);background:transparent;border:0;padding:0;height:auto;display:inline;white-space:nowrap;flex:none;cursor:pointer} .tsx:hover{color:var(--accent-text)} /* 종류 필: 먹 면 22px radius 2 */ .kind{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-tag);background:var(--ink);color:var(--surface);font-size:12px;font-weight:600;line-height:1;flex:none} /* 작은 표기(장면·출처): 글자만 */ .tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink2);line-height:1.4;flex:none} /* 마커: 18px 먹 원 + surface 숫자 */ .mk{position:absolute;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--surface);font-family:var(--ui);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;display:grid;place-items:center;transform:translateX(-50%);border:0;cursor:pointer;padding:0} .mk.static{position:static;transform:none;flex:none} .ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none} .row{display:flex;align-items:center;gap:12px} /* 파형(오디오 있는 녹음 노트에서만) */ .wave{display:flex;align-items:center;gap:2px;overflow:hidden;position:relative} .wave i{display:block;flex:1 1 0;min-width:1px;max-width:4px;border-radius:0;background:var(--line)} .wave i.on{background:var(--ink)} .wavebox{position:relative} /* 숫자 타일: surface + 상단 괘선, 숫자 h3 25 Hahmlet tabular */ .num{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sheet);background:var(--surface);border:0;border-top:var(--hair) solid var(--line);min-width:104px;flex:none;text-align:left;cursor:pointer;text-decoration:none;color:var(--ink)} .num b{font-family:var(--disp);font-size:25px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:0}.num span{font-size:14px;line-height:1.4;color:var(--ink2)} .hscroll{display:flex;gap:var(--sp1);overflow-x:auto;scrollbar-width:none} /* 칩: 32px radius 4, surface + line 1px */ .chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-btn);background:var(--surface);border:var(--hair) solid var(--line);font-size:14px;font-weight:600;line-height:1;color:var(--ink);text-decoration:none;flex:none;cursor:pointer;white-space:nowrap} .chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)} .chip .n{font-family:var(--ui);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink2)}.chip.on .n{color:var(--surface)} .chip.dash{border-style:solid;color:var(--ink2)} /* 진행 막대: 면 대비만 */ .bar{height:4px;background:var(--line);overflow:hidden}.bar>i{display:block;height:100%;background:var(--ink)} /* 레이아웃: 레일 232 + 본문 */ .shell{min-height:100vh;display:grid;grid-template-columns:232px 1fr}.shell>*{min-width:0} .rail{background:var(--bg);border-right:var(--hair) solid var(--line);padding:var(--sp3) 20px;display:flex;flex-direction:column;gap:var(--sp3);position:sticky;top:0;height:100vh} .nav{display:flex;flex-direction:column;gap:0} .nav a{position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 4px;border-radius:0;color:var(--ink2);text-decoration:none;font-size:14px;font-weight:600} .nav a.on{color:var(--ink)} .nav a.on::after{content:"";position:absolute;left:4px;bottom:6px;width:18px;height:2px;background:var(--accent)} .nav a.sub{height:34px;font-size:14px;font-weight:500} .nav a.sub.on::after{display:none}.nav a.sub.on{font-weight:600} .usage{display:block;margin-top:auto;padding:12px 0 0;border-top:var(--hair) solid var(--line);font-size:14px;color:var(--ink2);line-height:1.5;text-decoration:none} .main{padding:var(--sp4) 40px var(--sp6);display:flex;flex-direction:column;gap:var(--sp3);max-width:1240px;width:100%} /* 페이지 제호: h2 + 아래 label 한 줄 */ .head{display:flex;flex-direction:column;gap:4px} /* 빈 상태: h3 Hahmlet 한 문장 + 판화 160px */ .empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp2);padding:var(--sp5) 0;text-align:center} .empty img{width:160px;height:auto;display:block} /* 마인드맵(구 블록, 데이터 있을 때만) */ .mm text{font-family:var(--ui);font-size:12px;fill:var(--ink);font-weight:500}.mm .e{fill:none;stroke:var(--line);stroke-width:1}.mm .n{fill:var(--surface);stroke:var(--line);cursor:pointer}.mm .r{fill:var(--ink);stroke:var(--ink)}.mm .rt{fill:var(--surface);font-weight:600}.mm .leaf{fill:var(--ink2);font-weight:400;font-size:12px;cursor:pointer}.mm .tk{font-family:var(--ui);font-size:12px;font-variant-numeric:tabular-nums;fill:var(--ink2)} .fold{display:flex;flex-direction:column;gap:12px} .fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-top:var(--hair) solid var(--line);padding-top:var(--sp1)} .fold>summary::-webkit-details-marker{display:none} .fold>summary::after{content:"";width:8px;height:8px;border-right:1px solid var(--ink2);border-bottom:1px solid var(--ink2);transform:rotate(45deg);margin-right:4px} .fold[open]>summary::after{transform:rotate(-135deg)} /* 표: 가로 괘선만 */ table.tbl{border-collapse:collapse;width:100%;font-size:14px} table.tbl th{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink2);text-align:right;padding:6px 0;border-bottom:var(--hair) solid var(--ink)} table.tbl th:first-child,table.tbl td:first-child{text-align:left} table.tbl td{padding:8px 0;border-bottom:var(--hair) solid var(--line);text-align:right;font-family:var(--ui);font-size:14px;font-variant-numeric:tabular-nums} table.tbl td:first-child{font-weight:600} /* 차트 (DESIGN 4-1 「차트」 C1~C12): 먹 + line 두 톤, 기준선 ink 1px·격자 line 1px, 툴팁 surface + 괘선(그림자 0), 진입 0.32s 1회 */ .chart{position:relative;display:flex;flex-direction:column;gap:12px} .chart svg{width:100%;height:auto;display:block;font-family:var(--ui);overflow:visible;touch-action:pan-y} .chart text{font-size:12px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;fill:var(--ink2)} .chart .ch-val{fill:var(--ink)}.chart .ch-val.in{fill:var(--surface)}.chart .ch-lab{fill:var(--ink2)} .chart .ch-bar{fill:var(--line)}.chart .ch-bar.hi{fill:var(--ink)} .chart .ch-base{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke} .chart .ch-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke} .chart .ch-avg{stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke} .chart .ch-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .chart .ch-pt{fill:var(--surface);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke} .chart .ch-hit{fill:transparent;stroke:none} .chart .ch-halo{paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round} .chart .ch-pin{stroke:var(--ink2);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none} .chart .ch-dot{fill:var(--surface);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none} .chart .ch-tip{position:absolute;top:0;left:0;padding:4px 8px;background:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--r-sheet);font-size:12px;line-height:1.4;color:var(--ink);white-space:nowrap;pointer-events:none} .chart .ch-tip b{font-weight:600;font-variant-numeric:tabular-nums} .chart .ch-head{display:flex;flex-direction:column;gap:2px} .chart .ch-head .h3{font-variant-numeric:tabular-nums} .chart.ch-dist{gap:8px} .chart.dark{--ink:var(--dark-ink);--ink2:var(--dark-ink2);--line:var(--dark-line);--surface:var(--dark-surface)} .chart[data-animate="1"] .ch-bar{transform-box:fill-box;transform-origin:bottom center;animation:ch-grow .32s cubic-bezier(.25,.6,.2,1) both} .chart[data-animate="1"] .ch-bar.h{transform-origin:left center;animation-name:ch-grow-x} .chart[data-animate="1"] .ch-bar.h.neg{transform-origin:right center} .chart[data-animate="1"] .ch-line{stroke-dasharray:1;stroke-dashoffset:1;animation:ch-draw .32s cubic-bezier(.25,.6,.2,1) both} .ch-swap{transition:opacity .2s cubic-bezier(.25,.6,.2,1)} @keyframes ch-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes ch-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes ch-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){.chart .ch-bar,.chart .ch-line{animation:none!important}.chart[data-animate="1"] .ch-line{stroke-dasharray:none;stroke-dashoffset:0}.ch-swap{transition:none}} @media (max-width:760px){ .shell{grid-template-columns:1fr} .rail{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;border-right:0;border-bottom:var(--hair) solid var(--line)} .rail .nav{flex-direction:row}.rail .nav.projects{display:none}.rail .usage{display:none}.rail .hair,.rail .lbl,.rail .blk{display:none} .main{padding:20px 20px 60px} .two{grid-template-columns:1fr!important} } /* 인쇄 = PDF 저장. 레일·버튼은 빼고 종이만 남긴다 */ @media print { body { background: #fff; } .shell { display: block; } .rail, .btn, .no-print, select, textarea, input { display: none !important; } .main { padding: 0; max-width: none; gap: 14px; } .card { border-top-color: #999; break-inside: avoid; } .sheet { break-inside: avoid; } .endmark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { size: A4; margin: 14mm; } }