/* pH 계산기 — 방식 띠 · 용액 줄(산·염기 | 농도 | 시약 라벨) · 네 칸 판(pH·[H⁺] | pOH·[OH⁻]) · 결과 띠(시험지 색·큰 pH·액성, 색표 띠, 행) · 로그 농도 그림.
   폭 기준은 작업면 컨테이너 phc: 720 미만 용액 줄 두 열(시약 라벨 아래 줄), 640 미만 네 칸 판 두 줄, 440 미만 한 열. */
.phc-work{container:phc / inline-size;--phc-s0:#2563a8;--phc-s1:#2f7d4f;--phc-s2:#a8641a;--phc-s3:#7a4bc4}
html[data-theme="dark"] .phc-work{--phc-s0:#7fb3e6;--phc-s1:#6cc49a;--phc-s2:#e0b25c;--phc-s3:#b79cf0}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .phc-work{--phc-s0:#7fb3e6;--phc-s1:#6cc49a;--phc-s2:#e0b25c;--phc-s3:#b79cf0} }

.phc-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;padding:14px 18px 0}
.phc-btns{display:flex;gap:6px;flex-wrap:wrap}
.phc-help{margin:7px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.phc-help:empty{display:none}

/* 용액 줄 */
.phc-solw{padding:14px 18px 0}
.phc-solw[hidden]{display:none}
.phc-sol{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr) minmax(0,1.35fr);gap:12px 14px;align-items:end}
.phc-select{display:block;width:100%;height:var(--v2-ctl);padding:0 8px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.phc-select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.phc-rg{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:var(--v2-ctl);padding:2px 0 2px 12px;border-left:2px solid var(--line)}
.phc-rg b{font-family:var(--sans);font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.phc-rg span{font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1.4;color:var(--ink)}
.phc-rg small{font-family:var(--sans);font-size:11px;line-height:1.35;color:var(--muted)}
.phc-kind{grid-column:1 / 3}
.phc-kf{grid-column:3}
.phc-kind[hidden],.phc-kf[hidden]{display:none}
.phc-kind > .v2-label{display:block;margin:0 0 5px}
.phc-kind .v2-seg button{height:var(--v2-ctl);padding:0 14px}
.phc-kt{flex:none;border:0;border-left:1px solid var(--soft);background:var(--wash);padding:0 6px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}

/* 네 칸 판 */
.phc-quadw{padding:14px 18px 0}
.phc-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.phc-pair{min-width:0}
.phc-cap{margin:0 0 7px;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phc-pair-in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:8px}
.phc-q.is-src .v2-input{border-color:var(--ink)}
.phc-work.is-sol .phc-q .v2-input{background:var(--wash);border-style:dashed}
.phc-work.is-sol .phc-q .v2-input:focus-within{box-shadow:none;border-color:var(--line)}
.phc-trace{margin:8px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--muted);white-space:nowrap;overflow-x:auto}
.phc-trace:empty{display:none}

/* 결과 띠 */
.phc-out{margin:16px 0 0;padding:16px 18px 14px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.phc-head{display:flex;align-items:center;gap:14px}
.phc-pad{flex:none;position:relative;width:44px;height:44px;border-radius:3px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:background-color .45s ease}
.phc-head-t{min-width:0}
.phc-big{font-size:40px;gap:6px}
.phc-big small{font-family:var(--sans);font-size:16px;font-weight:700}
.phc-band{margin-left:auto;padding:5px 10px 5px 9px;border:1px solid var(--line);border-left:5px solid var(--b,var(--line));border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink);white-space:nowrap;transition:border-color .45s ease}
.phc-band[hidden]{display:none}
.phc-out .v2-sub{margin-top:12px}
.phc-note{margin:10px 0 0;padding:9px 12px;border-left:2px solid var(--accent);background:var(--card);font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink)}
.phc-note[hidden]{display:none}

/* 색표 띠: range 는 띠 위에 투명하게 겹치고, 보이는 표식은 .phc-mk */
.phc-scale{margin:14px 0 0}
.phc-strip{position:relative;height:32px;margin:28px 0 0}
.phc-strip::before{content:"";position:absolute;left:0;right:0;top:4px;bottom:8px;border-radius:3px;background:linear-gradient(90deg,#b3121f 0%,#d7191c 7.143%,#ec3b1d 14.286%,#f4661d 21.429%,#f89820 28.571%,#fbc02d 35.714%,#e2d434 42.857%,#8cc63f 50%,#3fae49 57.143%,#18a08c 64.286%,#1f86c8 71.429%,#2f5fb8 78.571%,#44449e 85.714%,#5a3290 92.857%,#4b1f73 100%)}
.phc-strip input[type="range"]{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.phc-strip input[type="range"]:disabled{cursor:default}
.phc-ntr{position:absolute;left:50%;top:4px;bottom:8px;border-left:2px dotted rgba(255,255,255,.95)}
.phc-ticks i{position:absolute;bottom:0;width:1px;height:6px;margin-left:-.5px;background:var(--muted)}
.phc-mk{position:absolute;top:0;bottom:4px;left:50%;width:0;z-index:2;pointer-events:none;transition:left .45s cubic-bezier(.2,.7,.2,1)}
.phc-mk[hidden]{display:none}
.phc-mk::before{content:"";position:absolute;left:-7px;top:0;bottom:0;width:14px;border:2.5px solid var(--ink);border-radius:4px;box-shadow:0 0 0 2px var(--paper)}
.phc-mk.is-under::before,.phc-mk.is-over::before{border-style:dashed}
.phc-mk b{position:absolute;bottom:calc(100% + 5px);left:0;transform:translateX(-50%);padding:2px 7px;border-radius:var(--radius);background:var(--fill);color:var(--on-fill);font-family:var(--sans);font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.phc-mk.is-l b{left:-9px;transform:none}
.phc-mk.is-r b{left:9px;transform:translateX(-100%)}
.phc-strip:focus-within .phc-mk::before{outline:2px solid var(--accent);outline-offset:2px}
.phc-axis{position:relative;height:15px;margin:3px 0 0}
.phc-axis span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.phc-axis span:first-child{transform:none}
.phc-axis span:last-child{transform:translateX(-100%)}
.phc-items{position:relative;min-height:22px;margin:6px 0 0}
.phc-items button{position:absolute;top:0;left:0;height:22px;padding:0 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background var(--ease)}
.phc-items button em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.phc-items button:hover{background:var(--btn)}
.phc-items button.is-off{display:none}

.phc-rows{margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:24px}
.phc-rows li b{white-space:normal;text-align:right}
.phc-rows li span{word-break:keep-all}
.phc-rows li.phc-ap{grid-column:1 / -1}
.phc-rows:empty{display:none}
.phc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0}

/* 로그 농도 그림 */
.phc-box{padding:14px 18px 18px}
.phc-box-head{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.phc-hint{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.phc-swipe{display:none;font-family:var(--sans);font-size:12px;color:var(--muted)}
.phc-chart-wrap{margin:8px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.phc-chart{display:block;width:100%;min-width:540px;height:auto}
.phc-gr{stroke:var(--soft);stroke-width:1}
.phc-gt{stroke:var(--line);stroke-width:1}
.phc-ax{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted)}
.phc-axt{font-weight:750}
.phc-l{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.phc-l-h{stroke:var(--ink)}
.phc-l-oh{stroke:var(--muted);stroke-dasharray:6 4}
.phc-l-s0{stroke:var(--phc-s0)}.phc-l-s1{stroke:var(--phc-s1)}.phc-l-s2{stroke:var(--phc-s2)}.phc-l-s3{stroke:var(--phc-s3)}
.phc-l.is-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:phcDraw .7s ease-out forwards}
@keyframes phcDraw{to{stroke-dashoffset:0}}
.phc-n7{fill:var(--card);stroke:var(--muted);stroke-width:1.5}
.phc-mline{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 3;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.phc-dot{stroke:var(--card);stroke-width:2;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.phc-d-h{fill:var(--ink)}.phc-d-oh{fill:var(--muted)}.phc-d-s0{fill:var(--phc-s0)}.phc-d-s1{fill:var(--phc-s1)}.phc-d-s2{fill:var(--phc-s2)}.phc-d-s3{fill:var(--phc-s3)}
.phc-mlab{font-family:var(--sans);font-size:11px;font-weight:750;fill:var(--ink)}
.phc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:10px 0 0;padding:0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.phc-legend li{display:inline-flex;align-items:center;gap:6px}
.phc-legend b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.phc-legend i{display:inline-block;width:18px;border-top:2.5px solid var(--ink)}
.phc-legend i.k-oh{border-top:2.5px dashed var(--muted)}
.phc-legend i.k-s0{border-color:var(--phc-s0)}.phc-legend i.k-s1{border-color:var(--phc-s1)}.phc-legend i.k-s2{border-color:var(--phc-s2)}.phc-legend i.k-s3{border-color:var(--phc-s3)}

@container phc (max-width:719px){
  .phc-sol{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .phc-rg{grid-column:1 / -1}
  .phc-kind,.phc-kf{grid-column:auto}
}
@container phc (max-width:639px){
  .phc-quad{grid-template-columns:minmax(0,1fr)}
  .phc-swipe{display:inline}
}
@container phc (max-width:439px){
  .phc-sol{grid-template-columns:minmax(0,1fr)}
  .phc-bar,.phc-solw,.phc-quadw{padding-left:14px;padding-right:14px}
  .phc-out,.phc-box{padding-left:14px;padding-right:14px}
  .phc-big{font-size:34px}
  .phc-head{gap:12px}
  .phc-kind .v2-seg button{padding:0 10px}
  .phc-rows li.phc-ap{display:block}
  .phc-rows li.phc-ap b{display:block;margin-top:3px;text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .phc-mk,.phc-pad,.phc-band,.phc-mline,.phc-dot{transition:none}
  .phc-l.is-draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}