/* 색상 조화 생성기 전용 CSS (2026-10-20). 색상환 작업대: [기준 색·견본·내보내기 | 색상환 + 채도·밝기] → 배색 7가지 → 입혀 보기 | 역할별 대비.
   색상환 고리는 CSS conic-gradient(HSL은 60°마다 sRGB 직선이라 정지 색 7개로 정확), 점·선은 SVG. 폭 판단은 작업면 컨테이너 chg. 공용 부품 assets/v2.css */
.chg-work{container:chg / inline-size}
.chg-work .v2-status:empty{display:none}
.chg-top{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:0;border-bottom:1px solid var(--soft)}
.chg-main{container:chgm / inline-size;min-width:0;padding:16px 18px 14px;border-right:1px solid var(--soft)}
.chg-side{min-width:0;padding:16px 18px 14px}

/* 기준 색 줄 */
.chg-inwrap{container:v2in / inline-size}
.chg-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:start}
.chg-hexrow{display:grid;grid-template-columns:var(--v2-ctl,42px) minmax(0,1fr);gap:6px}
.chg-pick{display:block;width:var(--v2-ctl,42px);height:var(--v2-ctl,42px);padding:3px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer}
.chg-pick::-webkit-color-swatch-wrapper{padding:0}
.chg-pick::-webkit-color-swatch{border:0;border-radius:calc(var(--radius) - 2px)}
.chg-pick::-moz-color-swatch{border:0;border-radius:calc(var(--radius) - 2px)}
.chg-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chg-text input{text-align:left;font-family:var(--mono);letter-spacing:.01em}
.chg-btns{display:flex;gap:6px}
.chg-btns .v2-btn{white-space:nowrap}
.chg-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}

/* 배색 견본 */
.chg-sws{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;margin:12px 0 0}
.chg-sw{min-width:0}
.chg-chip{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%;height:112px;padding:9px 10px;border:0;border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:var(--c,#ccc);color:var(--t,#000);font-family:var(--sans);text-align:left;cursor:pointer;transition:background-color .32s ease,color .32s ease}
.chg-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chg-chip .n{display:flex;justify-content:space-between;width:100%;font-size:11.5px;font-weight:700;opacity:.85}
.chg-chip .n em{font-style:normal;font-weight:600}
.chg-chip b{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.02em}
.chg-chip .cp{position:absolute;right:9px;bottom:9px;opacity:0;transition:opacity var(--ease)}
.chg-chip:hover .cp,.chg-chip:focus-visible .cp{opacity:.8}
.chg-chip .cp .i{width:14px;height:14px}
.chg-code{display:block;margin:5px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chg-info{min-height:2.9em;margin:9px 0 0;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ink)}
.chg-info em{font-style:normal;color:var(--accent)}
.chg-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0 0}
.chg-acts .v2-btn{justify-content:center;white-space:nowrap}
@container chgm (min-width:600px){.chg-acts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.chg-status{display:block;margin:6px 0 0}
.chg-histbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--soft)}
.chg-histbox .v2-label{margin:0}
.chg-hist{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 auto;min-width:0;margin:0;padding:0;list-style:none}
.chg-hist li{margin:0}
.chg-hist button{display:block;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer}
.chg-hist button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chg-hist .e{font-family:var(--sans);font-size:12px;color:var(--muted)}
.chg-clear{padding:0;border:0;background:none;font-family:var(--sans);font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.chg-clear:hover{color:var(--ink)}
.chg-clear[hidden]{display:none}

/* 색상환 */
.chg-wheel{position:relative;width:100%;max-width:256px;aspect-ratio:1;margin:6px auto 0;border-radius:50%;touch-action:none;cursor:grab;outline:none}
.chg-wheel.is-drag{cursor:grabbing}
.chg-wheel:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent)}
.chg-ring{position:absolute;inset:3.333%;border-radius:50%;background:var(--ring,conic-gradient(red,yellow,lime,cyan,blue,magenta,red));-webkit-mask:radial-gradient(closest-side,transparent 74.6%,#000 75.2%);mask:radial-gradient(closest-side,transparent 74.6%,#000 75.2%)}
.chg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chg-edge{fill:none;stroke:var(--line);stroke-width:1}
.chg-spoke{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.chg-poly{fill:var(--ink);fill-opacity:.05;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.chg-hub{fill:var(--paper);stroke:var(--soft);stroke-width:1}
.chg-pt circle{stroke:#fff;stroke-width:2.5}
.chg-pt .o{fill:none;stroke:rgba(0,0,0,.45);stroke-width:1}
.chg-pt.b .k{fill:none;stroke:var(--ink);stroke-width:2}
.chg-pt text{font-family:var(--sans);font-size:10px;font-weight:700;pointer-events:none}
.chg-c1{font-family:var(--sans);font-size:12.5px;font-weight:700;fill:var(--ink)}
.chg-c2{font-family:var(--sans);font-size:11px;fill:var(--muted)}
.chg-whelp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chg-sl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:10px 0 0}
.chg-sll{display:flex;justify-content:space-between;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.chg-sll output{font-family:var(--mono);color:var(--ink)}
.chg-range{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0 0 4px;background:transparent;cursor:pointer}
.chg-range::-webkit-slider-runnable-track{height:12px;border-radius:6px;background:var(--trk,#ccc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chg-range::-moz-range-track{height:12px;border-radius:6px;background:var(--trk,#ccc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chg-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-4px;border:3px solid #fff;border-radius:50%;background:var(--th,#888);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.chg-range::-moz-range-thumb{width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:var(--th,#888);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.chg-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 배색 7가지 */
.chg-rulesbox{padding:14px 18px;border-bottom:1px solid var(--soft)}
.chg-rhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:0 0 8px}
.chg-rhead .v2-label{margin:0}
.chg-rhint{font-family:var(--sans);font-size:12px;color:var(--muted)}
.chg-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.chg-rule:last-child{grid-column:span 2}
/* 7칸 한 줄은 이름이 짧은 KO만(라틴 글자 이름은 카드 폭 100px에서 단어 중간이 끊김) */
@container chg (min-width:760px){.chg-work:lang(ko) .chg-rules{grid-template-columns:repeat(7,minmax(0,1fr))}.chg-work:lang(ko) .chg-rule:last-child{grid-column:auto}}
.chg-rule{display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 8px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);text-align:left;color:var(--ink);cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.chg-rule:hover{background:var(--btn)}
.chg-rule[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chg-rule:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chg-rtop{display:flex;align-items:flex-start;gap:6px;min-width:0}
.chg-rtop b{min-width:0;font-size:13px;font-weight:700;line-height:1.2;padding-top:2px;overflow-wrap:break-word}
.chg-glyph{flex:0 0 auto;width:20px;height:20px}
.chg-glyph circle:first-child{fill:none;stroke:var(--line);stroke-width:1.2}
.chg-glyph polygon,.chg-glyph polyline{fill:none;stroke:var(--muted);stroke-width:1.2}
.chg-glyph .d{fill:var(--muted)}
.chg-glyph .b{fill:var(--ink)}
.chg-rh{margin-bottom:3px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chg-strip{display:flex;height:16px;margin-top:auto;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.chg-strip i{flex:1 1 0;transition:background-color .32s ease}

/* 입혀 보기 */
.chg-apply{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0}
.chg-pvbox{min-width:0;padding:14px 18px 16px;border-right:1px solid var(--soft)}
.chg-rot{height:28px;padding:0 10px}
.chg-poster{position:relative;container-type:inline-size;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:var(--p0,#ddd);color:var(--t0,#000);transition:background-color .32s ease,color .32s ease}
.pv-main{position:absolute;left:5%;top:12%;width:37%;display:flex;flex-direction:column;gap:2.2cqw;font-family:var(--sans)}
.pv-k{font-size:3cqw;font-weight:700;letter-spacing:.04em;opacity:.8}
.pv-h{font-size:5.4cqw;font-weight:800;line-height:1.18}
.pv-p{font-size:3.1cqw;line-height:1.45;opacity:.9}
.pv-card{position:absolute;left:46%;top:15%;width:50%;height:60%;display:flex;flex-direction:column;gap:1.4cqw;padding:3.4cqw 3.6cqw;border-radius:2cqw 2cqw 0 0;background:var(--p1,#eee);color:var(--t1,#000);font-family:var(--sans);transition:background-color .32s ease,color .32s ease}
.pv-card b{font-size:4cqw;font-weight:800}
.pv-card span{font-size:3cqw;opacity:.85}
.pv-chip{position:absolute;left:0;right:0;bottom:0;height:16.667%;display:flex;align-items:center;padding:0 3.6cqw;background:var(--p3,#ccc);color:var(--t3,#000);font-size:2.7cqw;font-style:normal;font-weight:700;transition:background-color .32s ease,color .32s ease}
.chg-poster[data-n="2"] .pv-band,.chg-poster:not([data-n="4"]) .pv-chip{display:none}
.chg-poster[data-n="2"] .pv-card{border-radius:2cqw}
.pv-band{position:absolute;left:0;right:0;bottom:0;height:10%;display:flex;align-items:center;justify-content:center;background:var(--p2,#999);color:var(--t2,#000);font-family:var(--sans);font-size:3cqw;font-weight:800;letter-spacing:.02em;transition:background-color .32s ease,color .32s ease}
.chg-legend{min-width:0;padding:14px 18px 16px;display:flex;flex-direction:column}
.chg-rows{display:grid;grid-template-columns:18px auto minmax(0,1fr);gap:0 10px;margin:0;padding:0;list-style:none}
.chg-rows li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;row-gap:4px;padding:8px 0;border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:12.5px}
.chg-rows li:first-child{padding-top:2px}
.chg-rows .sw{width:18px;height:18px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.chg-rows .nm{font-weight:700;white-space:nowrap}
.chg-rows .nm em{margin-left:4px;font-style:normal;font-weight:600;color:var(--muted)}
.chg-rows .hx{justify-self:end;font-family:var(--mono);font-size:12px;color:var(--muted)}
.chg-rows .tx{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--ink)}
.chg-rows .aa{display:inline-block;min-width:30px;padding:2px 6px;border-radius:3px;font-weight:800;text-align:center}
.chg-rows .r{font-family:var(--mono);font-size:12px}
.chg-rows .j{font-weight:600}
.chg-rows .j[data-j="aa"]{color:var(--ink)}
.chg-rows .j[data-j="large"],.chg-rows .j[data-j="fail"]{color:var(--accent)}
.chg-ui{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.chg-ui b{font-family:var(--mono);font-weight:700}
.chg-note{margin:auto 0 0;padding:10px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

/* 본문 표의 색 칩 */
.v2-article .chg-tc{display:inline-flex;align-items:center;gap:4px;margin:1px 8px 1px 0;font-family:var(--mono);font-size:12px;white-space:nowrap}
.v2-article .chg-tc i{flex:0 0 auto;width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* 폭: 작업면 컨테이너 chg */
@container chg (max-width:759px){
  .chg-top{grid-template-columns:minmax(0,1fr) 236px}
  .chg-apply{grid-template-columns:minmax(0,1fr)}
  .chg-pvbox{border-right:0;border-bottom:1px solid var(--soft)}
}
@container chg (max-width:579px){
  .chg-top{grid-template-columns:minmax(0,1fr)}
  .chg-main{border-right:0;border-bottom:1px solid var(--soft)}
  .chg-wheel{max-width:248px}
  .chg-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chg-chip{height:96px}
  .chg-main,.chg-side,.chg-rulesbox,.chg-pvbox,.chg-legend{padding-left:14px;padding-right:14px}
}
@container v2in (max-width:420px){
  .chg-in{grid-template-columns:minmax(0,1fr)}
  .chg-btnf .v2-label{display:none}
  .chg-btnf{margin-top:6px}
  .chg-btns .v2-btn{flex:1 1 0;justify-content:center}
}
@container chg (max-width:400px){
  .chg-code{font-size:10.5px;letter-spacing:-.03em}
  .chg-sws[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chg-sws[data-n="4"] .chg-chip{height:72px}
}
/* 라틴 글자 문구는 길어서 좁은 예시 화면에서는 작은 설명 줄을 숨김(KO·JA는 360px에서도 들어감) */
@container (max-width:560px){
  .pv-main:not(:lang(ko)):not(:lang(ja)) .pv-p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .chg-chip,.chg-strip i,.chg-poster,.pv-card,.pv-chip,.pv-band{transition:none}
}