/* Learning 상세 화면 스타일 — 모든 규칙은 .lrn 루트 아래 class로 한정한다.
   Reference 대응: Reference WORK/common/common.css
     27–31(main·workspace·panel·scene·신호선), 33–50(legend·state·controls·tick),
     51·52(control2·subcard·색상), 53·55·56·57(lower·info·trend·bottom·quiz),
     60·61(반응형 중 Learning 부분), 81(슬라이더 직접 입력) */

.lrn{padding:8px}
.lrn-workspace{display:grid;grid-template-columns:minmax(600px,1.72fr) 330px;gap:8px}

.lrn-panel{background:linear-gradient(180deg,#081a2a,#071522);border:1px solid #173a55;border-radius:8px;overflow:hidden}
.lrn-panel h3{height:42px;margin:0;padding:0 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #16364f;font-size:13px}
.lrn-live-dot{width:7px;height:7px;border-radius:50%;background:#24d47f;box-shadow:0 0 8px #24d47f}
.lrn-live-text{font-size:10px;color:#6f879b}
.lrn-panel-body{padding:10px}

.lrn-scene{height:530px;position:relative}
.lrn-scene svg{width:100%;height:100%;display:block}

/* SVG 신호선 */
.lrn-signal{stroke:var(--cyan);stroke-width:4;fill:none;stroke-dasharray:9 7;animation:lrn-flow .85s linear infinite}
.lrn-digital{stroke:var(--purple);stroke-width:4;fill:none;stroke-dasharray:3 7;animation:lrn-flow .75s linear infinite}
.lrn-impulse{stroke:#c9d8e3;stroke-width:3.5;fill:none}
.lrn-air{stroke:var(--air);stroke-width:4;fill:none;stroke-dasharray:12 7;animation:lrn-flow 1.1s linear infinite}
@keyframes lrn-flow{to{stroke-dashoffset:-34}}

.lrn-legend{position:absolute;left:18px;top:18px;width:170px;background:#0a1b2bdc;border:1px solid #214865;border-radius:7px;padding:10px;font-size:10px;line-height:1.9;z-index:20}
.lrn-legend-line{display:inline-block;width:22px;height:3px;margin-right:7px;vertical-align:middle}

.lrn-status{position:absolute;left:18px;bottom:24px;width:190px;background:#0a1b2bdc;border:1px solid #214865;border-radius:7px;padding:12px}
.lrn-status small{color:#7d97ad}
.lrn-status-big{font-size:24px;font-weight:900;margin:9px 0}
.lrn-status-desc{font-size:10px;line-height:1.65;color:#b9cad7}
.lrn-is-green{color:var(--green)}
.lrn-is-red{color:var(--red)}
.lrn-is-orange{color:var(--orange)}

/* 입력 패널 */
.lrn-controls .lrn-row{padding:12px 0;border-bottom:1px solid #17364f}
.lrn-controls .lrn-row:last-child{border-bottom:0}
.lrn-controls label{display:flex;justify-content:space-between;font-size:11px;color:#aebfcd;margin-bottom:7px}
.lrn-controls label b{color:#2fe18f;font-size:14px}
.lrn-controls input[type=range]{width:100%;accent-color:#087fff}
.lrn-controls input[type=number],.lrn-controls select{width:100%;background:#081624;color:#fff;border:1px solid #21445f;border-radius:7px;padding:8px;font-size:11px}
.lrn-tickrow{display:flex;justify-content:space-between;color:#6f879b;font-size:9px;margin-top:2px}
.lrn-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.lrn-field-pair+.lrn-field-pair{margin-top:7px}
.lrn-field{min-width:0;background:#081624;border:1px solid #173650;border-radius:7px;padding:8px}
/* 읽기 전용 표시 칸: 입력칸과 같은 크기, 점선 테두리·흐린 글자로 수정 불가를 구분 */
.lrn-controls input.lrn-readonly{width:100%;background:transparent;color:#8aa5b9;border:1px dashed #2f5372;border-radius:7px;padding:8px;font-size:11px;cursor:default}
.lrn-controls input.lrn-readonly:focus{outline:none}

/* 계기 타입 탭 (Reference .typeTabs 대응 — 터치하기 쉽도록 높이 보강) */
.lrn-type-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.lrn-type-tab{min-height:34px;border:1px solid #214763;background:#0b1c2c;color:#a9bed0;border-radius:6px;padding:6px 10px;font-size:10px}
.lrn-type-tab.is-active{background:#0d5faf;border-color:#178dff;color:#fff}
.lrn-type-tab:focus-visible{outline:2px solid #31cfff;outline-offset:1px}
@media(max-width:700px),(pointer:coarse){
 .lrn-type-tab{flex:1 1 0;min-height:44px;font-size:11px}
}

/* 슬라이더 + 직접 숫자 입력 */
.lrn-slider-input{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:7px;align-items:center}
.lrn-slider-input input[type=range]{width:100%;min-width:0}
.lrn-controls input.lrn-slider-direct{width:100%;box-sizing:border-box;background:#04111c;border:1px solid #2d6b93;color:#fff;border-radius:6px;padding:6px 7px;text-align:right;font:700 11px ui-monospace,monospace}
.lrn-controls input.lrn-slider-direct:focus{outline:1px solid #31cfff;border-color:#31cfff;box-shadow:0 0 0 2px #31cfff22}

/* 하단 3패널 */
.lrn-lower{display:grid;grid-template-columns:1.3fr .75fr 1.25fr;gap:8px;margin-top:8px}
.lrn-lower-panel{min-height:225px}
.lrn-lower-panel h3{height:38px;font-size:11px}
.lrn-lower-panel .lrn-panel-body{height:186px}
/* 하단 상태 스냅샷 (Reference common.css 54행 .snapshots/.shot — LT·TT·FT·밸브·DI/DO가 공통으로 쓰는 틀, 그림은 계기가 넣는다) */
.lrn-snapshots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lrn-shot{border:1px solid #23506d;border-radius:6px;padding:7px;text-align:center;background:#081725}
.lrn-shot svg{width:100%;height:115px}
.lrn-shot b{font-size:10px}
.lrn-shot.is-active{border-color:#ff4b58}
.lrn-info{font-size:10px;line-height:1.9;color:#b9cad8}
.lrn-info b{display:inline-block;width:78px;color:#7f97ab}
.lrn-trend-wrap svg{width:100%;height:145px}

/* 학습 포인트 · 실습 가이드 · 미니 퀴즈 */
.lrn-bottom{margin-top:8px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid #173a55;border-radius:8px;background:#071522;overflow:hidden}
.lrn-bottom>div{padding:10px;border-right:1px solid #17364f;font-size:10px}
.lrn-bottom>div:last-child{border-right:0}
.lrn-bottom h4{margin:0 0 8px;font-size:11px}
.lrn-check{color:#aabfce;line-height:1.8}
.lrn-check span{color:#2edb8e}
.lrn-guide{line-height:1.8;color:#aabfce}
.lrn-guide b{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#087fff;color:#fff;margin-right:5px}
.lrn-quiz-q{color:#aabfce;margin-bottom:7px}
.lrn-quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lrn-quiz-grid button{border:1px solid #21455f;background:#081827;color:#b8cad8;border-radius:6px;padding:7px;font-size:10px}
.lrn-quiz-grid button.is-correct{border-color:#1fb36f;background:#0b3526;color:#4ae09a}
.lrn-quiz-grid button.is-wrong{border-color:#b64d5b;background:#35131a;color:#ff8d98}

/* Responsive: Tablet (≤1199px) — 장면과 입력을 1열로 쌓는다.
   (1050px 경계였을 때 1051–1199px에서 2열 때문에 장면 배율이 0.68–0.82까지 작아졌음) */
@media(max-width:1199px){
 .lrn-workspace{grid-template-columns:1fr}
 .lrn-lower{grid-template-columns:1fr}
 .lrn-bottom{grid-template-columns:1fr}
 .lrn-bottom>div{border-right:0;border-bottom:1px solid #17364f}
 .lrn-scene{height:500px}
}
@media(max-width:650px){
 .lrn{padding:4px}
 .lrn-workspace{gap:5px}
 .lrn-scene{height:520px}
 .lrn-legend{left:10px;top:12px;width:150px}
 .lrn-status{width:160px}
 .lrn-lower{gap:5px}
 .lrn-panel h3{font-size:12px}
}

/* Responsive: Mobile (≤700px) · Landscape (가로 방향, 높이 ≤500px, 폭 ≤1199px)
   - 장면 높이를 고정값 대신 SVG 비율(viewBox)에 맞춘다.
   - 범례·상태를 SVG 위 겹침에서 빼내 SVG 아래(상태 → 범례 순)로 흐르게 한다.
   - SVG 내부(viewBox·좌표·글자 크기)는 바꾸지 않는다. */
@media(max-width:700px),(orientation:landscape) and (max-height:500px) and (max-width:1199px){
 .lrn-scene{height:auto;display:flex;flex-direction:column;gap:8px}
 .lrn-scene svg{height:auto}
 .lrn-legend,.lrn-status{position:static;width:auto}
 .lrn-status{order:1;padding:10px 12px}
 .lrn-legend{order:2;font-size:11px;line-height:1.8}
 .lrn-status small{font-size:11px}
 .lrn-status-desc{font-size:11px}
 /* 내용이 없는 하단 패널(예: PT의 "압력 상태")만 숨긴다. :has 미지원 브라우저에서는 기존처럼 보인다. */
 .lrn-lower-panel:has(> .lrn-panel-body:empty){display:none}
}
/* Landscape: 그림 전체가 한 화면 높이 안에 보이도록 SVG 높이만 제한한다 (비율 유지, 좌우 여백 생김). */
@media(orientation:landscape) and (max-height:500px) and (max-width:1199px){
 .lrn-scene svg{max-height:calc(100vh - 24px)}
}

/* Responsive: Mobile Scene — 계기 타입이 모바일 장면을 제공할 때만(scene-box[data-lrn-mobile="on"]) ≤700px에서 교체한다.
   숨긴 쪽 SVG는 display:none 대신 설계 크기(모바일 폭 360px / 데스크톱 폭 1000px)로 absolute·visibility:hidden 처리한다
   → 레이아웃·화면에는 나타나지 않고(패널 overflow:hidden), 글자 폭 측정[PV 자동 축소]은 실제와 같은 배율로 항상 동작.
   (1px로 숨기면 글자가 극히 작게 그려져 폭이 부정확하게 측정됨) */
.lrn-scene>[data-lrn-scene="mobile"]{position:absolute;left:0;top:0;width:360px;height:auto;visibility:hidden;pointer-events:none}
@media(max-width:700px){
 .lrn-scene[data-lrn-mobile="on"]>[data-lrn-scene="desktop"]{position:absolute;left:0;top:0;width:1000px;height:auto;visibility:hidden;pointer-events:none}
 .lrn-scene[data-lrn-mobile="on"]>[data-lrn-scene="mobile"]{position:static;width:100%;max-width:440px;margin:0 auto;height:auto;visibility:visible;pointer-events:auto}
 /* 모바일 장면에서는 범례를 한 줄로 압축 (ACR 시제품과 같은 방식, 글자 11px 유지) */
 .lrn-scene[data-lrn-mobile="on"]>.lrn-legend{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding:4px 10px}
}

/* Responsive: Touch (≤700px 또는 터치 기기) — 조작 요소를 약 44px 높이로 키운다.
   슬라이더는 브라우저 기본 모양을 유지하고 조작 영역(요소 높이)만 키운다.
   숫자 입력 글자 16px: 모바일 브라우저가 입력 시 화면을 자동 확대하지 않도록 한다. */
@media(max-width:700px),(pointer:coarse){
 .lrn-controls input[type=range]{height:44px}
 .lrn-controls input[type=number],.lrn-controls input.lrn-readonly,.lrn-controls select{min-height:44px;font-size:16px}
 .lrn-controls input.lrn-slider-direct{min-height:44px;font-size:16px}
 .lrn-quiz-grid button{min-height:44px;font-size:12px}
}

/* Absolute 모바일 A안만: 높이에 맞춘 전체 축소를 해제하고 세로 스크롤을 허용한다.
   700px 전환은 기존 Frame CSS를 그대로 따른다. 숨겨진 Absolute SVG도 설계 폭으로 측정한다.
   타입 전환 시 내부 g가 제거되므로 Gauge/DP의 기존 landscape 제한은 유지된다. */
.lrn-scene>[data-lrn-scene="mobile"]:has(> .lrn-pt-absolute-mobile){max-height:none}

/* PT 측정값 → 출력 신호: 기존 lower 슬롯에만 적용, Scene/정보/Trend는 유지한다. */
.lrn-lower-panel:has(.lrn-pt-output){min-width:0}
.lrn-lower-panel:has(.lrn-pt-output)>.lrn-panel-body{height:auto}
.lrn-pt-output{font-size:14px;line-height:1.5;color:#c1d3e1;overflow-wrap:anywhere}
.lrn-pt-output strong{font-size:18px;color:#38e2a0;font-variant-numeric:tabular-nums}
.lrn-pt-output-scale{margin-top:12px}
.lrn-pt-output-scale-title{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.lrn-pt-output-scale-title strong{font-size:16px}
.lrn-pt-output-track{position:relative;height:10px;margin:9px 5px;background:#18394e;border-radius:5px}
.lrn-pt-output-track>span{display:block;height:100%;background:#299d79;border-radius:5px}
.lrn-pt-output-track>i{position:absolute;top:-3px;width:4px;height:16px;transform:translateX(-50%);background:#e3fff4;border-radius:2px}
.lrn-pt-output-scale[data-pt-scale="ma"] .lrn-pt-output-track>span{background:#168dff}
.lrn-pt-output-ends{display:flex;justify-content:space-between;gap:16px}
.lrn-pt-output-ends>span{max-width:48%}
.lrn-pt-output-ends>span:last-child{text-align:right}

/* Learning HOME (learning-home.js) — .lrn-home 루트 아래로 한정한다.
   Reference 대응: Reference WORK/common/common.css 70–80(.practiceHero/.practiceGrid/.practiceCard/.learningHome), 83(≤800px 1열)
   Reference HOME은 실습 화면 CSS를 빌려 쓰지만 WORK는 HOME 전용 class로 분리한다. 값은 Reference와 같다.
   카드는 누를 수 있는 요소이므로 button으로 만들고, 브라우저 기본 button 모양만 지운다. */
.lrn-home{padding:8px}
.lrn-home-hero{background:linear-gradient(180deg,#0c2032,#081522);border:1px solid #173a55;border-radius:10px;padding:16px;margin-bottom:10px}
.lrn-home-hero h2{margin:0 0 6px;font-size:18px}
.lrn-home-hero p{margin:0;color:#9fb5c7;font-size:11px}
.lrn-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* flex 세로 배치: button은 내용을 세로 가운데 정렬하므로, Reference(div 카드)처럼 위에서부터 쌓이게 한다 */
.lrn-home-card{display:flex;flex-direction:column;justify-content:flex-start;width:100%;text-align:left;color:inherit;background:linear-gradient(180deg,#0d2033,#091725);border:1px solid #1c4668;border-radius:10px;padding:16px;min-height:155px;transition:.15s}
.lrn-home-card:not(:disabled):hover{transform:translateY(-2px);border-color:#2189d0}
.lrn-home-icon{display:block;font-size:28px;margin-bottom:12px}
.lrn-home-card h3{margin:0 0 6px;font-size:16px}
.lrn-home-card p{margin:0;color:#91a9bd;font-size:11px;line-height:1.6}
.lrn-home-tag{align-self:flex-start;display:inline-block;margin-top:12px;border:1px solid #2b5978;border-radius:20px;padding:5px 8px;color:#bfe7ff;font-size:9px}
@media(max-width:800px){
 .lrn-home-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
 .lrn-home{padding:4px}
}