/* 삼각함수 계산기 전용 CSS (2026-10-20). 펼친 단위원판: 막대(방향·단위·소수) → [입력판 | 여섯 값 카드 · 주값·해] → 문장·단추 → [단위원 | 펼친 그래프] → 풀이.
   폭(작업면 컨테이너 trg): 720 이상 [입력 | 카드] 두 열, 그 아래 한 열, 560 미만은 카드를 함수당 한 줄 목록으로. 그림 두 장은 tool.js 가 실제 폭으로 그린다(470 이상 나란히).
   움직임(R45): 각이 바뀌면 점 P가 원을 따라 돌고 그래프 세로선이 같이 미끄러짐(JS, 동작 줄이기면 바로). 공용 부품 assets/v2.css */
.trg-work{container:trg / inline-size}
.trg-work [hidden]{display:none !important}
.trg-work .v2-status:empty{display:none}
.trg-top{padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.trg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 12px}
.trg-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.trg-dp{display:flex;align-items:center;gap:6px 8px}
.trg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.trg-grid.is-pend .trg-res,.trg-grid.is-pend + .trg-sent{opacity:.45;transition:opacity var(--ease)}

/* 입력판 */
.trg-in{min-width:0;padding:12px 14px 14px;border-radius:var(--radius)}
.trg-fa,.trg-fi{display:flex;flex-direction:column;gap:8px;margin:0;container:trgin / inline-size} /* 폼을 품은 칸은 테마가 v2in 컨테이너로 덮으므로 컨테이너는 폼 자신에 */
.trg-thf .v2-input input{font-size:20px;font-weight:750}
.trg-pi{display:grid;place-items:center;flex:0 0 auto;width:38px;padding:0;border:0;border-left:1px solid var(--soft);background:var(--paper);font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;transition:background var(--ease)}
.trg-pi:hover{background:var(--wash)}
.trg-pi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.trg-conv,.trg-quad{margin:0;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.trg-quad{font-size:12.5px;font-weight:600;color:var(--muted)}
.trg-conv:empty,.trg-quad:empty{display:none}
.trg-ifn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.trg-vf .v2-input input{text-align:left;font-size:18px;font-weight:750}
.trg-vf .v2-input .trg-pre{order:-1;border-left:0;border-right:1px solid var(--soft);padding:0 10px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.trg-vhint{margin:0;line-height:1.5}
.trg-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:2px}
@container trgin (min-width:400px){ .trg-fa .trg-chips{grid-template-columns:repeat(6,minmax(0,1fr))} }
@container trgin (min-width:440px){ .trg-fi .trg-chips{grid-template-columns:repeat(8,minmax(0,1fr))} }
.trg-chips button,.trg-isols button{min-height:32px;padding:4px 6px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.trg-chips button:hover,.trg-isols button:hover{background:var(--wash)}
.trg-chips button:focus-visible,.trg-isols button:focus-visible,.trg-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.trg-chips button[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}

/* 여섯 값 카드: sin·cos·tan 크게, csc·sec·cot 작게. 카드 높이는 입력판 높이를 나눠 채운다 */
.trg-res{min-width:0;display:flex;flex-direction:column}
.trg-cards{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
.trg-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px;min-width:0;padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);text-align:left;font-family:var(--sans);cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.trg-card:hover{background:var(--wash)}
.trg-card[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}
.trg-cn{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.trg-cn b{font-size:13.5px;font-weight:750}
.trg-cn small{font-size:11.5px;font-weight:600;color:var(--muted)}
.trg-cx{display:flex;align-items:center;min-height:34px;font-size:17px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.trg-card.is-main .trg-cx{font-size:21px;min-height:42px}
.trg-cd{min-height:1.3em;font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.trg-na{font-size:14px;font-weight:700;color:var(--muted)}
.trg-card.is-und .trg-cd{font-size:11.5px}
/* 정확값: 쌓인 분수와 근호 윗줄 */
.trg-fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 1px;font-size:.84em;line-height:1.1}
.trg-fr > span:first-child{padding:0 3px 2px;border-bottom:1.5px solid currentColor}
.trg-fr > span:last-child{padding-top:2px}
.trg-rad{white-space:nowrap}
.trg-rad > span{margin-left:1px;padding:0 1px;border-top:1.5px solid currentColor}

/* 값 → 각도 결과 */
.trg-inv{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px 14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.trg-ilab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 10px;margin:0}
.trg-ieq{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.trg-ibig{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 4px;font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.trg-ibig b{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.trg-ibig small{font-size:14px;font-weight:650;color:var(--muted)}
.trg-isols{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.trg-isols button{min-height:36px;padding:4px 12px;font-size:14px}
.trg-igen{margin:0;font-family:var(--sans);font-size:14px;font-weight:650;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}

.trg-sent{margin:12px 0 0;font-family:var(--sans);font-size:14px;font-weight:650;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.trg-sent.is-error{color:var(--accent)}
.trg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}

/* 단위원 | 펼친 그래프: 나란하면 세로 눈금이 같아 원의 높이와 그래프 높이가 가로 점선으로 이어진다 */
.trg-vis{padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.trg-vhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 10px}
.trg-hint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.trg-figs{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px}
.trg-figs.is-row{grid-template-columns:var(--trg-c,320px) minmax(0,1fr);justify-items:stretch;align-items:start;gap:0 14px}
.trg-wbox{width:100%;min-width:0}
.trg-svg{display:block;max-width:100%;height:auto;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.trg-c{cursor:pointer}
.trg-w{cursor:crosshair}
.trg-figs.is-inv .trg-svg{cursor:default;touch-action:auto}
.trg-qt{fill:transparent;transition:fill var(--ease)}
.trg-qt.is-on{fill:color-mix(in srgb, var(--ink) 7%, transparent)} /* wash는 어두운 모드에서 배경과 같아 안 보였다(검토 R4) */
.trg-ax{stroke:var(--line);stroke-width:1}
.trg-gl{stroke:var(--soft);stroke-width:1;stroke-dasharray:3 3}
.trg-axl{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.trg-axl,.trg-dl,.trg-refl{paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round} /* 곡선·선분 위에서도 글자가 읽히게(검토 N3) */
.trg-uc{fill:none;stroke:var(--ink);stroke-width:1.5}
.trg-guide{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.trg-ql{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted)}
.trg-ql.is-on{fill:var(--ink);font-weight:800}
.trg-dot{fill:var(--muted)}
.trg-dl{font-family:var(--sans);font-size:10px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.trg-arc{fill:none;stroke:var(--ink);stroke-width:1.4}
.trg-ref{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3}
.trg-refl{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--muted);font-variant-numeric:tabular-nums}
.trg-op{stroke:var(--ink);stroke-width:1.6}
.trg-seg,.trg-ext{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3}
.trg-hl{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.trg-link{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.trg-p{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.trg-hit{fill:transparent}
.trg-h{cursor:grab;outline:none}
.trg-h:focus-visible .trg-hit{fill:var(--accent-wash);stroke:var(--accent);stroke-width:2}
.trg-asy{stroke:var(--line);stroke-width:1;stroke-dasharray:5 4}
.trg-cm{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.trg-cb{fill:none;stroke:var(--line);stroke-width:1.6}
.trg-cur{stroke:var(--accent);stroke-width:1.2}
.trg-wdot{fill:var(--accent);stroke:var(--card);stroke-width:2}
.trg-iline{stroke:var(--ink);stroke-width:1.3;stroke-dasharray:6 4}
.trg-drop{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}
.trg-tdot{fill:var(--ink)}
.trg-leg{display:flex;flex-wrap:wrap;gap:2px 14px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.trg-leg li{display:flex;align-items:center;gap:6px;min-width:0}
.trg-leg i{flex:0 0 auto;width:16px;height:0;border-top:2.4px solid var(--ink)}
.trg-leg li.is-base i{border-top:1.6px solid var(--line)}
.trg-leg li.is-link i{border-top:1px dashed var(--muted)}

/* 풀이 */
.trg-steps{padding:14px 18px 16px}
.trg-shead{margin:0 0 6px}
.trg-sol{margin:0;padding:0;list-style:none;counter-reset:trgs}
.trg-sol li{position:relative;padding:5px 0 5px 28px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.trg-sol li:first-child{border-top:0}
.trg-sol li::before{counter-increment:trgs;content:counter(trgs,decimal-leading-zero);position:absolute;left:0;top:7px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted)}

@container trg (min-width:720px){
  .trg-grid{grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);align-items:stretch}
}
@container trg (max-width:559px){ /* 카드 → 함수당 한 줄: 이름 | 정확값 | 소수 */
  .trg-cards{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:0;border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden}
  .trg-card,.trg-card.is-main{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto;align-items:center;gap:0 10px;padding:7px 10px;border:0;border-top:1px solid var(--soft);border-radius:0;box-shadow:none}
  .trg-card:first-child{border-top:0}
  .trg-card[aria-pressed="true"]{background:var(--wash);box-shadow:inset 3px 0 0 var(--fill)}
  .trg-cn{flex-direction:column;gap:0}
  .trg-cx,.trg-card.is-main .trg-cx{min-height:30px;font-size:17px}
  .trg-cd{min-height:0;text-align:right}
}
@container trg (max-width:439px){
  .trg-top,.trg-vis,.trg-steps{padding-left:14px;padding-right:14px}
  .trg-acts .v2-btn .i{display:none}
}