@font-face {
  font-family: WoodLab;
  src: url("/static/doccollab/rhwp-studio/fonts/Cafe24Ssurround-v2.0.74cebe2c4061.woff2") format('woff2');
  font-display: swap;
}
:root {font-family:Inter,'Noto Sans KR',sans-serif;color:#083e36;background:#b88143;font-synthesis:none}
* {box-sizing:border-box}
body {margin:0;word-break:keep-all;overflow-wrap:break-word}
body::before {content:'';position:fixed;inset:-35px;z-index:-1;background:#b88143 url("./wood-room.967d43fe1585.webp") center/cover;filter:blur(28px) brightness(.75)}
button,input,textarea {font:inherit}
button {cursor:pointer;touch-action:manipulation}
button:disabled {cursor:default}
a {color:#07584a}
[hidden] {display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {outline:4px solid #ffdb67;outline-offset:3px}
.sr-only {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.lab {min-height:100dvh;display:grid;align-content:center;justify-items:center}
.wood-stage {position:relative;width:min(100vw,calc(100dvh * 4 / 3),1448px);aspect-ratio:4/3;container-type:inline-size;isolation:isolate;background:url("./wood-skin.4a329d16d36d.webp") center/contain no-repeat}
.wood-stage>picture {display:contents}
.wood-stage source {display:none}
.wood-surface {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:-1}
.topbar {position:absolute;inset:0 0 auto;height:9.5%}
h1 {position:absolute;margin:0;top:12%;left:28%;width:43%;text-align:center;font:4cqw/1.15 WoodLab,sans-serif;letter-spacing:-.08em}
.wood-button {
  display:inline-flex;align-items:center;justify-content:center;gap:.35em;color:#073d35;border:0;padding:0 8%;min-height:44px;
  background-color:#f3e2b7;background-image:url("./wood-skin.4a329d16d36d.webp");background-repeat:no-repeat;border-radius:999px;
  font-family:WoodLab,'Noto Sans KR',sans-serif;line-height:1.2;text-decoration:none;text-align:center;white-space:nowrap;
  transition:filter .15s,transform .15s;
}
.wood-button:hover:not(:disabled) {filter:brightness(1.08)}
.wood-button:active:not(:disabled) {transform:translateY(2px) scale(.985)}
.wood-button:disabled {filter:saturate(.45) brightness(.86);color:#425148}
.nav-back,.nav-help,.nav-reset {position:absolute;top:12%;height:70%;font-size:2.5cqw;padding:0 1%}
.nav-back {left:2%;width:13.3%;background-size:738.8% 1374.7%;background-position:2.31% 1.39%}
.nav-help {left:71.8%;width:12.6%;background-size:795.6% 1467.6%;background-position:82.3% 1.29%}
.nav-reset {left:85.4%;width:13.2%;background-size:762.1% 1467.6%;background-position:98.73% 1.29%}
.nav-help>span {font:700 max(14px,.8em)/1 sans-serif;border:2px solid currentColor;border-radius:50%;width:1.25em;height:1.25em;display:grid;place-items:center}

.meter {position:absolute;left:14.4%;top:9.5%;width:72%;height:48.5%}
.frequency {position:absolute;left:18%;top:11.5%;width:61%;height:27%;display:flex;align-items:baseline;justify-content:center;gap:1.3cqw;color:#fff1cd;font-family:WoodLab,sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 .4cqw .4cqw #001a12}
.frequency>span:first-child {font-size:9.5cqw;line-height:1.1;letter-spacing:-.055em}
.unit {font-size:6.1cqw;line-height:1.1}
.state-badge {position:absolute;left:72.3%;top:14.8%;width:16.4%;height:10.2%;display:flex;align-items:center;justify-content:center;color:#a7f397;font:clamp(11px,1.7cqw,18px)/1 WoodLab,sans-serif;white-space:nowrap;background:#003e2f;border:2px solid #a7f397;border-radius:999px}
.state-badge::before {content:'';display:inline-block;width:.65em;height:.65em;margin-right:.28em;border-radius:50%;background:currentColor;box-shadow:0 0 .5em currentColor}
.live-wave {position:absolute;left:10.1%;top:40%;width:82%;height:19%}
.live-wave canvas {display:block;width:100%;height:100%;filter:drop-shadow(0 0 6px #58ee9ca0)}
.pitch-scale {position:absolute;left:13.3%;top:64.3%;width:74%;height:8%;display:grid;grid-template-columns:17% 1fr 17%;align-items:center;gap:1.6%;color:#fff1cf;font:2.35cqw/1 WoodLab,sans-serif;white-space:nowrap}
.pitch-scale>span:last-child {text-align:right}
.pitch-track {height:.42cqw;min-height:3px;position:relative;background:#85f2bc}
.pitch-track::before {content:'';position:absolute;inset:-.4cqw 0;background:repeating-linear-gradient(90deg,#85f2bc 0 2px,transparent 2px 12%)}
.pitch-track::after {content:'';position:absolute;right:-2px;top:50%;transform:translate(50%,-50%);border-left:1.2cqw solid #85f2bc;border-block:.75cqw solid transparent}
#pitch-marker {position:absolute;width:.8cqw;min-width:5px;height:1.5cqw;top:50%;transform:translate(-50%,-50%);background:#f9e5a7;box-shadow:0 0 9px #70efb9;border-radius:3px;transition:left .1s linear}
.mic-actions {position:absolute;left:33.8%;top:75.6%;width:33.5%;height:14.3%}
.mic-button {width:100%;height:100%;font-size:2.8cqw;background-size:414% 1428.9%;background-position:50.3% 50.1%;padding:0 6%}
@media (min-width:601px) {
  .nav-back,.mic-button {background:transparent}
  .art-unavailable .nav-back,.art-unavailable .mic-button {background:#f3e2b7}
}
.meter-status {position:absolute;left:13%;top:44%;width:76%;margin:0;color:#fff2ce;font:max(14px,1.7cqw)/1.5 'Noto Sans KR',sans-serif;text-align:center}
.meter[data-state='stable'] .meter-status,.meter[data-state='listening'] .meter-status {clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.meter:not([data-state='stable']):not([data-state='listening']) .live-wave {opacity:.16}

.samples {position:absolute;left:3.8%;top:58.1%;width:92.4%;height:21%;display:flex;justify-content:space-between}
.sample {position:relative;width:48.5%;height:100%}
.sample-title {position:absolute;left:14%;top:4%;width:40%;margin:0;text-align:center;color:#fff9dc;font:2.9cqw/1 WoodLab,sans-serif;text-shadow:0 2px 2px #17423b55}
.sample-reading {position:absolute;left:7.5%;top:37%;width:55%;display:flex;justify-content:center;align-items:baseline;gap:.8cqw;color:#073d35;font:4.9cqw/1 WoodLab,sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.sample-reading strong {font:inherit;letter-spacing:-.045em}
.sample-reading>span {font-size:4.1cqw}
.save-button {position:absolute;left:64%;top:42%;width:28.3%;height:30%;font-size:2.25cqw;padding:0 4%;background-size:786.96% 1508.3%;background-position:37.42% 71.79%}
.save-button::before {content:'↻';font-family:sans-serif}
.sample-2 .save-button {background-position:91.61% 71.79%}
.sample.has-result {animation:tray-confirm .35s ease-out}
@keyframes tray-confirm {from{filter:brightness(1.25)}to{filter:none}}
.compare-button {position:absolute;left:23.35%;top:80.4%;width:53.5%;height:17.8%;color:#fff3ce;font-size:6cqw;background-color:#09635f;background-size:187.08% 551.27%;background-position:50.15% 98.09%;border-radius:999px;padding:0 5%;text-shadow:0 .35cqw .35cqw #00352e}
.compare-icon {font:1.35em/1 Georgia,serif}
.compare-button:disabled {color:#f3e9c8;filter:saturate(.45) brightness(.8)}
.compare-button small {position:absolute;bottom:11%;left:0;width:100%;text-align:center;font:14px/1.4 'Noto Sans KR',sans-serif;text-shadow:none}
.restore-note,.storage-status {max-width:700px;margin:8px 20px;padding:8px 16px;border-radius:10px;background:#ffedce;color:#49331d;font-size:14px;line-height:1.6}
.text-button {min-height:44px;padding:8px;border:0;background:transparent;color:#07584a;font-size:14px;font-weight:700}
.art-unavailable .wood-surface {visibility:hidden}
.art-unavailable {background:#bd8750!important}
.art-unavailable .topbar {background:#f4e2bc;border-radius:16px}
.art-unavailable .meter {background:#003e2f;border:7px solid #e5c58c;border-radius:28px}
.art-unavailable .sample {background:#e3be87;border:5px solid #b07a3b;border-radius:20px}
.art-unavailable .sample-title {color:#073d35;text-shadow:none}

dialog {width:min(900px,calc(100% - 32px));max-height:90dvh;overflow:auto;border:9px solid #bb8548;border-radius:28px;padding:24px;color:#173e32;background:#fff3d8;box-shadow:0 15px 60px #30190788,inset 0 0 0 2px #f9d994}
dialog::backdrop {background:#1d221ac2}
dialog:not([open]) {display:none}
.dialog-heading {display:flex;justify-content:space-between;align-items:center;gap:12px}
.dialog-heading h2 {font:25px/1.4 WoodLab,sans-serif;margin:0}
.dialog-close,.record-button {background-size:414% 1428.9%;background-position:50.3% 50.1%;font-size:17px;min-height:48px;padding:12px 22px}
.comparison-bars {display:grid;gap:22px;padding:28px 0}
.comparison-row {display:grid;grid-template-columns:110px minmax(0,1fr) 85px;align-items:center;gap:14px;font-size:16px}
.comparison-row>span {overflow-wrap:anywhere}
.comparison-row strong {text-align:right;font-size:17px}
.bar-track {height:24px;border-radius:5px;background:#e2d4b7}
.bar {width:0;min-width:3px;height:100%;border-radius:5px;transition:width .5s ease}
.bar-1 {background:#11756a}
.bar-2 {background:#b84c37}
.judgment {border:0;padding:0;margin:0}
.judgment legend {font-size:17px;font-weight:700;margin-bottom:12px}
.judgment-options {display:flex;gap:10px;flex-wrap:wrap}
.judgment-options label {display:flex;align-items:center;gap:8px;min-height:48px;padding:12px;background:#fffaf0;border:1px solid #bda77d;border-radius:12px;font-size:16px;cursor:pointer}
.judgment-options label:has(input:checked) {background:#e4eed6;border-color:#38826b}
.judgment-options input {width:18px;height:18px;margin:0;accent-color:#186b55}
.comparison-result {padding:16px;background:#e9ecd2;border-radius:12px;font-size:17px;line-height:1.8}
.wave-details,.conditions {margin-top:18px;border-block:1px solid #d5bd91}
summary {min-height:48px;padding:14px 0;font-size:16px;font-weight:700;cursor:pointer}
.wave-details p,dialog>p {font-size:14px;line-height:1.8}
.saved-waves {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.saved-waves figure {margin:0;min-width:0}
.saved-waves canvas {display:block;width:100%;height:100px;background:#fffaf0;border-radius:12px}
figcaption {margin:8px 0 12px;font-size:14px}
.condition-fields {display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 0 16px}
.sample-label label,.notebook label,.share-page label {display:block;margin-bottom:8px;color:#274a35;font-size:14px;font-weight:800}
input,textarea {width:100%;max-width:100%;padding:10px 12px;color:#173e32;background:#fffdf6;border:1px solid #9baf91;border-radius:10px;font-size:17px;line-height:1.6;font-weight:400}
input::placeholder,textarea::placeholder {color:#5b6b58}
.notebook {margin-top:22px}
textarea {min-height:88px;resize:vertical}
.record-actions {display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.record-actions>span {font-size:14px;line-height:1.6}
#help-dialog {max-width:620px}
#help-dialog li {margin:14px 0;font-size:17px;line-height:1.8}
#help-dialog strong {display:block}
.share-page {max-width:640px;margin:32px auto;padding:28px;border-radius:24px;background:#fff3d8}
.share-page h1 {position:static;width:auto;font:32px/1.4 WoodLab,sans-serif;margin:24px 0}
.share-page p {font-size:17px;line-height:1.8}
.share-qr {display:block;max-width:100%;height:auto;margin:24px auto}

@media (max-width:900px) and (min-width:601px) {
  .topbar h1 {font-size:32px}
  .nav-back,.nav-help,.nav-reset {font-size:18px}
  .mic-button {font-size:22px}
  .save-button,.state-badge {font-size:17px}
}
@media (max-width:600px) {
  .lab {display:block;align-content:normal;padding:8px}
  .wood-stage {width:100%;aspect-ratio:auto;min-height:630px;padding:112px 0 18px;display:flex;flex-direction:column;gap:12px;background:#c39151 url("./wood-room.967d43fe1585.webp") center bottom/auto 280%;border-radius:18px}
  .wood-surface {inset:112px 0 auto;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
  .topbar {top:0;height:104px;background:#f4e2bc;border:3px solid #bb8548;border-radius:16px}
  h1 {left:0;top:4px;width:100%;font-size:32px;line-height:1.2}
  .nav-back,.nav-help,.nav-reset {top:46px;height:46px;font-size:16px;background-size:414% 1428.9%;background-position:50.3% 50.1%}
  .nav-back {left:2%;width:29%}
  .nav-help {left:35.5%;width:29%}
  .nav-reset {left:69%;width:29%}
  .meter {position:relative;inset:auto;width:100%;height:auto;aspect-ratio:2/1;border-radius:32px}
  .meter:not([data-state='stable']):not([data-state='listening']) {margin-bottom:45px}
  .meter[data-state='error'] {margin-bottom:90px}
  .meter[data-state='quiet'],.meter[data-state='unclear'],.meter[data-state='clipped'] {margin-bottom:70px}
  .frequency {top:24%;left:22%;width:42%;height:26%;gap:6px}
  .frequency>span:first-child {font-size:clamp(38px,12.8cqw,48px)}
  .unit {font-size:clamp(25px,8.8cqw,33px)}
  .state-badge {left:61%;top:16%;width:31%;height:auto;min-height:24px;font-size:14px;padding:3px 0;border:1px solid #89d891;border-radius:999px;background:#003e2f}
  .live-wave {left:22%;top:48%;width:67%;height:7%}
  .pitch-scale {top:61%;left:22%;width:67%;height:8%;font-size:14px;grid-template-columns:58px 1fr 58px}
  .pitch-track::after {border-left-width:7px;border-block-width:5px}
  #pitch-marker {height:10px}
  .mic-actions {top:calc(79% - 22px);left:41.3%;width:28.5%;height:44px}
  .mic-button {font-size:clamp(14px,4cqw,17px);padding:0;background:transparent}
  .art-unavailable .mic-button {background:#f3e2b7}
  .meter-status {top:103%;left:1%;width:98%;padding:7px 9px;font-size:14px;line-height:1.4;color:#133c2f;background:#fff0c9;border-radius:9px}
  .samples {position:static;width:100%;height:auto;flex-direction:column;gap:12px}
  .sample {width:100%;height:auto;aspect-ratio:650/230;background:url("./wood-skin.4a329d16d36d.webp") 6.89% 73.6%/222.77% 472.17% no-repeat;border-radius:20px}
  .sample-2 {background-position:93.1% 73.6%}
  .sample-title {top:6%;font-size:19px}
  .sample-reading {top:42%;font-size:34px;gap:5px}
  .sample-reading>span {font-size:26px}
  .save-button {top:39%;width:29%;height:44px;font-size:14px;padding-inline:5px}
  .compare-button {position:relative;inset:auto;width:82%;aspect-ratio:774/197;min-height:66px;height:auto;align-self:center;font-size:33px;margin-top:2px}
  .compare-button small {font-size:12px;bottom:5%}
  .compare-button:disabled>span {transform:translateY(-5px)}
  dialog {padding:18px;border-width:6px;border-radius:21px}
  .dialog-heading {align-items:flex-start}
  .dialog-heading h2 {font-size:22px}
  .dialog-close {font-size:15px;padding-inline:13px}
  .comparison-row {grid-template-columns:62px minmax(0,1fr) 72px;gap:8px;font-size:14px}
  .comparison-row strong {font-size:15px}
  .judgment-options,.saved-waves,.condition-fields {display:grid;grid-template-columns:1fr}
  .record-button {width:100%;font-size:16px}
  .share-page {margin:12px;padding:20px}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print {
  body::before,.wood-stage,.restore-note,.storage-status,.dialog-close,.record-actions {display:none!important}
  .comparison {display:block!important;position:static;border:0;box-shadow:none;max-height:none;width:100%}
}