:root{
  --bg:#f3f7f1;--bg-soft:#f8fbf6;--card:#fff;--text:#1f2a1f;--muted:#667466;
  --green-900:#2f4636;--green-800:#40543b;--green-700:#55724c;--green-600:#5f7f57;
  --green-100:#eef7ea;--green-50:#f7fbf5;--line:#dce8d8;--line-soft:#edf3e9;
  --teal:#4f9f97;--teal-dark:#367f78;--blue:#3f6f8f;--blue-soft:#eef6f8;
  --warn:#b7791f;--warn-bg:#fff8e8;--danger:#b91c1c;--danger-bg:#fdecec;
  --shadow:0 10px 26px rgba(40,80,40,.07);--shadow-sm:0 5px 14px rgba(40,80,40,.05);
  --grad-main:linear-gradient(135deg,var(--green-700),var(--teal-dark));
  --grad-soft:linear-gradient(135deg,#f7fbf5,#eef6f8);
  --grad-line:linear-gradient(90deg,var(--green-700),var(--teal),var(--blue));
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,rgba(85,114,76,.10),transparent 32%),var(--bg);color:var(--text)}button,textarea,select{font:inherit}button{cursor:pointer}button,.action-button,.mini-action-button{transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease}button:hover,.action-button:hover,.mini-action-button:hover{transform:translateY(-1px)}pre{overflow-x:auto;background:#102010;color:#d9ffd9;padding:16px;border-radius:12px}.app{width:min(960px,92vw);margin:0 auto;padding:32px 0}.hero{margin-bottom:16px;padding:14px 18px;border:1px solid rgba(216,230,210,.9);border-radius:22px;background:var(--grad-soft);box-shadow:0 10px 26px rgba(40,80,40,.06)}.eyebrow{margin:0 0 5px;font-size:13px;font-weight:800;color:var(--green-700);letter-spacing:.06em;text-transform:uppercase}h1{margin:0 0 8px;font-size:clamp(30px,5vw,50px);line-height:1.1;letter-spacing:-.04em}.description{max-width:860px;margin:0;font-size:17px;line-height:1.6;color:#4f5f4f}@media (min-width:900px){.hero .description br{display:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.card h2{margin-top:0}.explore-step{position:relative;overflow:hidden;margin-bottom:18px;transition:all .2s ease}.explore-step::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad-line);opacity:.8}.explore-step.collapsed>*:not(h2){display:none}.explore-step h2{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:10px!important;padding-left:18px;cursor:pointer;user-select:none;font-size:28px;font-weight:900;letter-spacing:-.04em;color:var(--green-900)}.explore-step h2::before{content:'';position:absolute;left:0;top:4px;width:7px;height:30px;border-radius:999px;background:linear-gradient(180deg,var(--green-700),var(--teal))}.explore-step h2::after{content:' 접기';font-size:13px;color:#777;margin-left:8px}.explore-step.collapsed h2::after{content:' 열기'}.explore-step>p{margin:0 0 14px;color:#5d6b5d;line-height:1.55}.explore-step h3{position:relative;margin:18px 0 10px!important;padding-left:12px;font-size:19px;font-weight:900;color:var(--green-800)}.explore-step h3::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.step-nav{position:sticky;top:0;z-index:20;display:flex;gap:8px;margin-bottom:18px;padding:10px;border:1px solid rgba(207,220,200,.8);border-radius:999px;background:rgba(244,247,242,.92);backdrop-filter:blur(10px)}.step-nav button{flex:1;padding:10px 8px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:700}.step-nav button:hover{background:var(--green-100);color:var(--green-800)}.step-nav button.active{background:var(--grad-main);color:white;box-shadow:0 8px 18px rgba(85,114,76,.22)}
.notice-box{margin:10px 0!important;padding:11px 13px!important;border-radius:14px!important;line-height:1.45;font-size:14px}.notice-box strong{font-weight:900}.notice-green{background:linear-gradient(135deg,#f7fbf5,#eef7ea);border:1px solid #d8e6d2;color:var(--green-800)}.notice-yellow{background:linear-gradient(135deg,#fff8e8,#fffdf5);border:1px solid #ead7a4;color:#5f5334}.action-button,button[onclick="saveObservation()"],button[onclick="saveInquiry()"],button[onclick="generateAiQuestionIdeas()"],button[onclick="generateCompareHint()"]{border:0!important;border-radius:999px!important;background:var(--grad-main)!important;color:white!important;font-weight:900;box-shadow:0 8px 18px rgba(54,127,120,.20)}.action-button{padding:9px 13px}.mini-action-button{margin-top:6px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--green-800);font-size:11px;font-weight:800}.mini-action-button:hover{background:var(--green-100)}
textarea{border:1px solid var(--line)!important;border-radius:14px!important;background:#fbfdf9;line-height:1.5;resize:vertical}textarea:focus{outline:0;border-color:var(--teal)!important;box-shadow:0 0 0 4px rgba(79,159,151,.14);background:white}#observationNote,#inquiryQuestion{min-height:110px;margin-top:8px;padding:14px 16px!important;background:linear-gradient(180deg,#fff,#fbfdf9);font-size:15px;line-height:1.6;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}#observationNote::placeholder,#inquiryQuestion::placeholder{color:#9aa89a}button[onclick="saveObservation()"],button[onclick="saveInquiry()"],button[onclick="generateAiQuestionIdeas()"],button[onclick="generateCompareHint()"]{margin-top:12px!important;padding:11px 18px!important;font-size:14px}#observationSaveStatus,#inquirySaveStatus{min-height:20px;margin:10px 0 0;font-size:13px;font-weight:700;color:var(--green-700)}#latestObservationNote,#latestInquiryQuestion{margin-top:14px!important}#latestObservationNote>div,#latestInquiryQuestion>div{border-radius:16px!important;border:1px solid var(--line-soft)!important;background:white!important;box-shadow:0 6px 16px rgba(40,80,40,.06)}
.node-view-tabs,.teacher-filter-tabs,.record-node-filter,.record-filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;align-items:center;justify-content:center}.node-view-tabs button,.teacher-filter-tabs button,.record-node-filter button,.record-filter-tabs button{min-height:38px;padding:8px 12px;border:1px solid #d8e6d2;border-radius:999px;background:white;color:#556455;font-size:13px;font-weight:800}.node-view-tabs button:hover,.teacher-filter-tabs button:hover,.record-node-filter button:hover,.record-filter-tabs button:hover{background:var(--green-100);color:var(--green-800)}.node-view-tabs button:first-child,.teacher-filter-tabs button:first-child,.record-node-filter button:first-child,.record-filter-tabs button:first-child{min-width:110px;padding:10px 22px;background:white;color:var(--green-800);border:1px solid #d8e6d2;font-size:14px;font-weight:900}.node-view-tabs button.active,.teacher-filter-tabs button.active,.record-node-filter button.active,.record-filter-tabs button.active{color:white;border-color:transparent;background:var(--grad-main);box-shadow:0 8px 18px rgba(54,127,120,.20)}.node-view-tabs button:first-child.active,.teacher-filter-tabs button:first-child.active,.record-node-filter button:first-child.active,.record-filter-tabs button:first-child.active{background:linear-gradient(135deg,var(--green-800),var(--green-700))}
#telemetryContainer>div{position:relative;overflow:hidden;margin-bottom:14px!important;padding:14px!important;border:1px solid rgba(220,232,216,.95)!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,246,.96))!important;box-shadow:0 10px 26px rgba(40,80,40,.08)!important}#telemetryContainer>div::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad-line);opacity:.75}#telemetryContainer>div h3{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 4px!important;font-size:22px!important;font-weight:900!important;letter-spacing:-.03em;color:#253525!important}#telemetryContainer>div h3::before{content:'';width:8px;height:8px;margin:0;border-radius:50%;background:linear-gradient(135deg,var(--green-700),var(--teal));box-shadow:0 0 0 3px rgba(79,159,151,.10);flex:0 0 auto}#telemetryContainer small{display:inline-block;margin-top:0;color:#72806f!important}#telemetryContainer div[style*="온라인"]{display:inline-flex;align-items:center;gap:6px;margin-top:8px!important;padding:5px 10px;border-radius:999px;background:#ecf7ef;color:#2f7d45!important;font-size:12px!important;font-weight:800}.node-camera-box{margin-top:8px!important;display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;padding:8px!important;border-radius:16px;background:white;border:1px solid var(--line-soft)}.node-camera-img{width:150px;height:105px;object-fit:cover;border:0;border-radius:14px;background:#f4f4f4;box-shadow:0 8px 18px rgba(40,80,40,.10)}.node-camera-meta{font-size:12px;color:var(--muted);line-height:1.45}.node-camera-meta strong{color:var(--green-800)}.node-single-image{display:block;width:auto;max-width:100%;max-height:320px;margin:10px auto 0;border-radius:14px;object-fit:contain;background:transparent;box-shadow:0 8px 18px rgba(40,80,40,.10)}.node-received-time{font-size:11px;color:#888;margin-top:6px;text-align:right}
#telemetryContainer div[style*="grid-template-columns:repeat(4"]{margin-top:10px!important;gap:10px!important}#telemetryContainer div[style*="border-left:5px"]{border-left-width:0!important;border-radius:16px!important;background:white!important;border:1px solid var(--line-soft)!important;box-shadow:var(--shadow-sm)}#telemetryContainer div[style*="border-left:5px"]::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--green-700),var(--teal));opacity:.65}#telemetryContainer div[style*="border-left:5px"]{position:relative;overflow:hidden}#telemetryContainer div[style*="border-left:5px"] div:first-child{color:var(--muted)!important;font-size:12px!important;font-weight:800!important}#telemetryContainer div[style*="border-left:5px"] div:last-child{font-size:19px!important;font-weight:900!important;letter-spacing:-.02em;color:var(--text)!important}#telemetryContainer div[style*="border-left:5px"] span{font-size:12px!important;color:#72806f!important}
.node-graph-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px!important;padding:8px!important;border:1px solid var(--line-soft);border-radius:16px!important;background:linear-gradient(180deg,#fff,var(--bg-soft))!important;box-shadow:0 5px 14px rgba(40,80,40,.04)}.node-metric-buttons{display:flex;flex-wrap:wrap;gap:6px}.node-metric-buttons button,#compareResult button[onclick^="changeCompareMetric"]{min-width:58px;padding:8px 12px!important;border-radius:999px!important;border:1px solid #dbe8d6!important;background:white!important;color:var(--green-800)!important;font-size:13px;font-weight:900;box-shadow:0 3px 8px rgba(40,80,40,.04)}.node-metric-buttons button[style*="eef7ea"],#compareResult button[onclick^="changeCompareMetric"][style*="eef7ea"]{border-color:transparent!important;background:var(--grad-main)!important;color:white!important;box-shadow:0 6px 14px rgba(54,127,120,.22)}.node-range-select{font-size:12px!important;color:var(--muted)!important;white-space:nowrap}.node-range-select select{width:auto!important;min-width:92px;margin-left:4px;padding:5px 26px 5px 8px!important;border:1px solid #dbe8d6!important;border-radius:10px!important;background:#f8fbf6;font-size:12px!important;font-weight:800;color:var(--green-800)}.node-history-range-info{display:inline-block;margin-top:8px!important;padding:4px 9px;border:1px solid var(--line-soft);border-radius:999px;background:var(--bg-soft);font-size:12px!important;font-weight:800;color:var(--muted)!important}#telemetryContainer div[style*="height:230px"],#telemetryContainer div[style*="height:300px"]{margin-top:10px!important;padding:10px;border:1px solid var(--line-soft);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdf9)}
#compareSection{margin-top:18px}#singleNodeCompareGuide{margin-top:10px}#compareResult{margin-top:18px!important}.compare-select-box{margin-top:10px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#fff8e8,#f8fbf6);border:1px solid #ead7a4}.compare-select-title{font-weight:900;margin-bottom:4px;color:#555}.compare-select-help{font-size:13px;color:#666;margin-bottom:10px}.compare-node-list{display:grid;gap:8px}.compare-node-option{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:white;border:1px solid #ead7a4;cursor:pointer;font-weight:700;transition:transform .15s ease,box-shadow .15s ease}.compare-node-option:hover{transform:translateY(-1px)}.compare-node-option.current{border-color:var(--green-700)!important;background:var(--green-100)!important}.compare-node-option small{display:block;margin-top:2px;font-size:11px;color:var(--green-700);font-weight:800}.compare-node-option input{width:16px;height:16px}.compare-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.compare-photo-grid>div{padding:12px;border:1px solid var(--line-soft);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdf9);box-shadow:0 8px 18px rgba(40,80,40,.06)}.compare-photo-grid>div>div:first-child{font-size:14px!important;font-weight:900!important;color:var(--green-800)!important}.compare-photo-img{width:100%;max-height:180px;object-fit:contain;border:0;border-radius:14px;background:#f8fbf6;box-shadow:0 8px 20px rgba(40,80,40,.08)}.photo-time-hint{margin-top:10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg-soft);font-size:12px;color:#666;line-height:1.45}.photo-time-hint strong{color:var(--green-700)}#compareResult table{width:100%;margin-top:14px;border-collapse:separate!important;border-spacing:0;overflow:hidden;border-radius:12px;box-shadow:0 8px 18px rgba(40,80,40,.05)}#compareResult thead tr{background:var(--grad-main)}#compareResult th{color:white;font-size:13px;font-weight:900;border-bottom:0!important}#compareResult td{background:white;font-size:14px}#compareResult tbody tr:hover td{background:#f8fbff}#compareResult div[style*="height:240px"]{margin-top:14px;padding:14px;border:1px solid var(--line-soft)!important;border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdf9)!important}#compareAiHint{margin-top:14px!important;padding:14px 16px;border:1px solid #d7e6e4;border-radius:16px;background:linear-gradient(135deg,#f0f8f7,#f7fbf5);line-height:1.6;box-shadow:0 6px 16px rgba(54,127,120,.08)}
#observationGuideBox{position:relative;padding:13px 15px!important;border:1px solid #d8e6d2!important;border-radius:18px!important;background:linear-gradient(135deg,#eef7ea,#f0f8f7)!important;box-shadow:0 8px 20px rgba(40,80,40,.07)}#observationGuideBox::before{content:'AI 코치';display:inline-block;margin-bottom:6px;padding:4px 10px;border-radius:999px;background:var(--grad-main);color:white;font-size:12px;font-weight:900}#observationGuideBox div[style*="background:white"]{margin-top:2px!important;margin-bottom:3px!important;padding-bottom:8px!important;border-radius:16px!important;border-color:#dbe8d6!important;box-shadow:var(--shadow-sm)}#observationGuideBox div[style*="background:white"] p:last-child,#observationGuideBox div[style*="background:white"] div:last-child{margin-bottom:0!important}#observationGuideBox strong{display:inline-block;margin:0 0 2px!important;line-height:1.2}#observationGuideBox div[style*="white-space:pre-line"]{margin-top:-1px!important;padding-top:0!important;line-height:1.45!important}#aiQuestionFlow{margin-top:16px;padding:14px;border:1px solid var(--line-soft);border-radius:16px;background:var(--bg-soft);color:var(--green-800);line-height:1.6}
#inquiryList{margin-top:14px}#fullRecordsToggleButton{padding:10px 18px!important;border-radius:999px!important;background:linear-gradient(135deg,var(--green-700),var(--teal-dark))!important;color:white!important;font-weight:900;box-shadow:0 8px 18px rgba(54,127,120,.20)}.timeline-wrapper{position:relative;margin-top:18px;padding-left:34px}.timeline-wrapper::before{content:'';position:absolute;left:13px;top:0;bottom:0;width:3px;border-radius:999px;background:linear-gradient(180deg,var(--green-700),var(--teal),var(--blue))}.timeline-item{position:relative}.timeline-item::before{content:'';position:absolute;left:-27px;top:22px;width:14px;height:14px;border:4px solid var(--teal);border-radius:50%;background:white;box-shadow:0 0 0 4px rgba(79,159,151,.14)}.timeline-card{padding:14px!important;margin-bottom:12px!important;border:1px solid var(--line-soft)!important;border-radius:18px!important;background:linear-gradient(180deg,#fff,#fbfdf9)!important;box-shadow:0 10px 24px rgba(40,80,40,.07)}.timeline-card h3{color:var(--green-800);font-size:19px;font-weight:900}.flow-block{margin-bottom:10px!important;padding:11px 12px!important;border-left-width:0!important;border-radius:16px!important;background:white!important;border:1px solid var(--line-soft)!important;box-shadow:var(--shadow-sm)}.flow-observation{border-top:4px solid var(--green-700)!important}.flow-question{border-top:4px solid var(--teal)!important}.flow-next{border-top:4px solid var(--blue)!important}.flow-block div[style*="font-size:12px"][style*="font-weight:700"]{display:inline-block;margin-bottom:4px;padding:3px 8px;border-radius:999px;background:var(--bg-soft)}.flow-question .flow-next,.flow-observation .flow-next{margin-top:14px!important}.flow-next>div:first-child{margin-bottom:10px!important;font-weight:900;color:#5b6474!important}.flow-next div[style*="background:#fff8e8"],.flow-next div[style*="background:#eef7ea"]{margin-top:8px;padding:12px!important;border-radius:16px!important;box-shadow:var(--shadow-sm)}#fullRecordsBox{margin-top:10px}#fullRecordsBox .flow-next{margin-top:16px!important;padding-top:14px!important}#fullRecordsBox .flow-next>div:first-child{margin-bottom:10px!important}#fullRecordsBox .flow-next div[style*="background:#fff8e8"],#fullRecordsBox .flow-next div[style*="background:#eef7ea"]{margin-top:8px!important}#fullRecordsBox div[style*="관찰:"]+.flow-next{margin-top:18px!important}
.image-modal{display:none;position:fixed;z-index:1000;inset:0;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.72)}.image-modal.open{display:flex}.image-modal-content{position:relative;max-width:min(920px,96vw);max-height:92vh}.image-modal-content img{width:100%;max-height:88vh;object-fit:contain;border-radius:14px;background:white}.image-modal-close{position:absolute;top:-14px;right:-14px;z-index:20;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(20,20,20,.82);color:white;font-size:24px;font-weight:300;box-shadow:0 8px 20px rgba(0,0,0,.28)}.image-modal-close:hover{transform:scale(1.06);background:rgba(0,0,0,.92)}.photo-history-content{position:relative;width:min(920px,96vw);max-height:88vh;overflow-y:auto;padding:18px;border:1px solid var(--line-soft);border-radius:22px;background:white;box-shadow:0 18px 40px rgba(0,0,0,.22)}.photo-history-content h3{margin:0 0 14px;color:var(--green-800);font-size:20px;font-weight:900}.photo-history-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 14px;padding:9px 10px;border:1px solid var(--line-soft);border-radius:16px;background:var(--bg-soft)}.photo-history-toolbar label{display:flex;align-items:center;gap:8px;color:var(--green-800);font-size:13px;font-weight:900}.photo-history-toolbar input[type="date"]{padding:7px 10px;border:1px solid #cfdcc8;border-radius:10px;background:white;color:var(--text);font-weight:700}.photo-history-toolbar button{padding:7px 11px;border:1px solid #cfdcc8;border-radius:999px;background:white;color:var(--green-800);cursor:pointer;font-size:13px;font-weight:900}.photo-history-toolbar button:hover{background:var(--green-100);border-color:var(--green-700)}.photo-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}.photo-history-item{padding:8px;border:1px solid var(--line-soft);border-radius:16px;background:var(--bg-soft);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.photo-history-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(40,80,40,.10)}.photo-history-item img{width:100%;height:105px;object-fit:cover;border-radius:12px;background:#f4f4f4}.photo-history-time{margin-top:6px;text-align:center;font-size:12px;font-weight:800;color:var(--green-700)}#photoHistoryModal{z-index:1000}#imageModal{z-index:1100}#imageModal .image-modal-close{z-index:1101}
.camera-status{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800}.camera-status-good{background:#ecf7ef;color:#2f7d45}.camera-status-warn{background:var(--warn-bg);color:var(--warn)}.camera-status-bad{background:var(--danger-bg);color:var(--danger)}hr{margin:18px 0;border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}#statusText{font-weight:800}
@media (max-width:640px){.app{width:94vw;padding:18px 0}.hero{margin-bottom:14px;padding:14px 16px;border-radius:18px}.eyebrow{margin-bottom:4px;font-size:12px}h1{font-size:24px}.description{font-size:13px;line-height:1.45}.card{padding:13px!important;border-radius:14px!important}.explore-step{margin-bottom:14px!important}.explore-step::before{height:5px}.explore-step h2{margin-bottom:8px!important;padding-left:14px;font-size:22px}.explore-step h2::before{width:6px;height:24px}.explore-step h3{margin-top:16px!important;margin-bottom:8px!important;padding-left:10px;font-size:17px}.explore-step>p{margin-bottom:12px;font-size:14px;line-height:1.5}.step-nav{gap:4px;padding:8px 0;border-radius:18px}.step-nav button{padding:8px 4px;border-radius:14px;font-size:11px;line-height:1.25}.notice-box{margin:9px 0!important;padding:10px 11px!important;border-radius:12px!important;font-size:13px;line-height:1.4}.node-view-tabs,.teacher-filter-tabs,.record-node-filter,.record-filter-tabs{justify-content:center;gap:6px}.node-view-tabs button:first-child,.teacher-filter-tabs button:first-child,.record-node-filter button:first-child,.record-filter-tabs button:first-child{flex:1 1 100%;font-size:13px}.node-view-tabs button:not(:first-child),.teacher-filter-tabs button:not(:first-child),.record-node-filter button:not(:first-child),.record-filter-tabs button:not(:first-child){flex:0 0 auto;min-width:76px;padding:8px 12px;font-size:12px}button,.action-button,.mini-action-button,.node-view-tabs button,.teacher-filter-tabs button,.node-metric-buttons button,#compareResult button[onclick^="changeCompareMetric"]{min-height:36px}button[onclick="saveObservation()"],button[onclick="saveInquiry()"],button[onclick="generateAiQuestionIdeas()"],button[onclick="generateCompareHint()"],#fullRecordsToggleButton{width:100%;min-height:40px;padding:12px 14px!important}#observationNote,#inquiryQuestion{min-height:112px;padding:13px 14px!important;border-radius:14px!important;font-size:14px}#telemetryContainer>div{margin-bottom:14px!important;padding:12px!important;border-radius:14px!important}#telemetryContainer>div h3{gap:12px!important;margin-bottom:2px!important;font-size:19px!important;line-height:1.1!important}#telemetryContainer>div h3::before{width:7px!important;height:7px!important;position:relative;top:-1px;box-shadow:0 0 0 3px rgba(79,159,151,.10)}#telemetryContainer small{font-size:10px;margin-top:0!important}.node-camera-box{grid-template-columns:88px 1fr;gap:8px;margin-top:8px!important;padding:7px!important}.node-camera-img{width:88px!important;height:66px!important;border-radius:10px}.node-camera-meta{font-size:11px;line-height:1.35!important}.node-single-image{width:100%;max-height:260px}.mini-action-button{font-size:10px;padding:4px 8px}.camera-status{font-size:10px;padding:2px 7px}.node-received-time{font-size:10px;margin-top:4px}#telemetryContainer div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important;margin-top:10px!important;gap:7px!important}#telemetryContainer div[style*="border-left:5px"]{padding:9px 7px!important;border-radius:13px!important}#telemetryContainer div[style*="border-left:5px"] div:last-child{font-size:17px!important}.node-graph-toolbar{align-items:flex-start!important;margin-top:10px!important;padding:7px!important}.node-metric-buttons{justify-content:center;width:100%;gap:5px}.node-metric-buttons button,#compareResult button[onclick^="changeCompareMetric"]{min-width:60px;padding:8px 10px!important;font-size:12px}.node-range-select{width:100%;display:flex;align-items:center!important;justify-content:flex-end;gap:6px;margin-top:6px!important;font-size:11px!important;line-height:1}.node-range-select select{width:auto!important;min-width:84px;margin:0!important;padding:5px 22px 5px 7px!important;font-size:11px!important;line-height:1.2}.node-history-range-info{margin-top:5px!important;padding:3px 8px;font-size:11px!important}#telemetryContainer div[style*="height:230px"],#telemetryContainer div[style*="height:300px"]{height:200px!important;padding:7px;border-radius:14px}#telemetryContainer canvas{max-height:190px}.compare-photo-grid{grid-template-columns:1fr;gap:12px}.compare-photo-grid>div{padding:10px}.compare-photo-img{max-height:110px}.photo-time-hint{font-size:11px}#compareResult table{border-radius:8px!important;font-size:12px}#compareResult th,#compareResult td{padding:7px 5px!important}#compareResult div[style*="height:240px"]{padding:10px;border-radius:12px!important}#compareHistoryChart{max-height:210px}#observationGuideBox,#aiQuestionFlow{border-radius:14px!important;font-size:13px}#observationGuideBox{padding:12px!important}.timeline-wrapper{margin-top:12px!important;padding-left:24px}.timeline-wrapper::before{left:8px}.timeline-item::before{left:-23px;width:12px;height:12px}.timeline-card{padding:12px!important;margin-bottom:12px!important;border-radius:16px!important}.timeline-card h3{margin-bottom:10px!important;font-size:17px}.flow-block{padding:10px!important;margin-bottom:10px!important;border-radius:14px!important;font-size:13px}.flow-block div[style*="font-size:12px"]{line-height:1.35}.flow-block div[style*="font-weight:700"]{line-height:1.45}.flow-question .flow-next,.flow-observation .flow-next{margin-top:12px!important}#fullRecordsBox .flow-next{margin-top:14px!important;padding-top:12px!important}.image-modal-close{top:8px!important;right:8px!important;width:36px;height:36px;background:rgba(0,0,0,.68);backdrop-filter:blur(4px);z-index:50}.image-modal-content img{border-radius:14px!important}.photo-history-content{width:94vw;padding:48px 14px 14px;border-radius:14px!important}.photo-history-content .image-modal-close{top:10px!important;right:10px!important}.photo-history-content h3{font-size:17px;margin-bottom:10px}.photo-history-grid{grid-template-columns:repeat(2,1fr);gap:8px}.photo-history-item{padding:6px;border-radius:12px}.photo-history-item img{height:82px;border-radius:10px}.photo-history-time{font-size:10px}hr{margin:18px 0}}

/* =========================================================
   이전 사진 보기 버튼 / 사진 기록 모달 X 버튼 보정
   ========================================================= */

/* 이전 사진 보기 버튼: 웹에서 너무 작지 않게 */
.mini-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding: 7px 13px;

  border-radius: 999px;
  border: 1px solid var(--sf-line);

  background: var(--sf-surface);
  color: var(--sf-accent-dark);

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;
}

/* 사진 정보 영역 안에서는 버튼을 아래에 자연스럽게 배치 */
.node-camera-meta .mini-action-button {
  margin-top: 8px;
}

/* 단일 스마트팜 보기의 이전 사진 버튼은 중앙 정렬 */
.node-single-image + div + .mini-action-button {
  display: flex;
  width: fit-content;
  margin: 8px auto 0;
}

/* 사진 기록 팝업 X 버튼 잘림 방지 */
.photo-history-content {
  overflow: visible;
  padding-top: 22px;
}

/* 사진 기록 모달은 내부 목록만 스크롤되도록 */
.photo-history-grid {
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 2px;
}

.photo-history-grid > div:not(.photo-history-item) {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 320px;
  margin: 8px auto;
  padding: 10px 12px;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 사진 기록 팝업 X 버튼 위치 */
.photo-history-content .image-modal-close {
  top: -16px !important;
  right: -16px !important;
  z-index: 1200;
}

/* 모바일에서는 X 버튼을 박스 안쪽에 */
@media (max-width: 640px) {
  .mini-action-button {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 11px;
  }

  .photo-history-content {
    overflow: hidden;
    padding-top: 48px;
  }

  .photo-history-grid {
    max-height: 70vh;
    overflow-y: auto;
  }

  .photo-history-content .image-modal-close {
    top: 10px !important;
    right: 10px !important;
  }
}

/* =========================================================
   사진 메타 정보 UX 보정
   - 이전 사진 보기 버튼 대비 강화
   - 현재 사진 시각 위치 안정화
   ========================================================= */

/* 사진 메타 영역 */
.node-camera-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* 현재 사진 시각 */
.photo-time-hint {
  display: inline-flex;
  align-items: center;

  margin-top: 2px;
  padding: 5px 10px;

  border-radius: 999px;

  background: #f6faf5;
  border: 1px solid #dbe8d6;

  font-size: 11px;
  font-weight: 700;

  color: #5f6f5f;
}

/* 시간 텍스트 강조 */
.photo-time-hint strong {
  color: #355a35;
}

/* 이전 사진 보기 버튼 */
.mini-action-button {
  border: 1px solid #cdddc8 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fbf6
    ) !important;

  color: #355a35 !important;

  box-shadow:
    0 2px 6px rgba(40, 80, 40, 0.05);

  font-weight: 800;
}

/* hover */
.mini-action-button:hover {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #eef7ea
    ) !important;

  border-color: #b9cfb2 !important;
}

/* 모바일 */
@media (max-width: 640px) {

  .node-camera-meta {
    gap: 5px;
  }

  .photo-time-hint {
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* =========================================================
   단일 스마트팜 사진 하단 정보 중앙 정렬
   ========================================================= */

/* 단일 보기: 사진 아래 시간 텍스트 */
.node-single-image + div {
  width: fit-content;
  margin: 7px auto 0 !important;

  padding: 4px 10px;
  border-radius: 999px;

  background: #f6faf5;
  border: 1px solid #dbe8d6;

  font-size: 12px !important;
  font-weight: 700;
  color: #5f6f5f !important;
  text-align: center;
}

/* 단일 보기: 이전 사진 보기 버튼 */
.node-single-image + div + .mini-action-button {
  display: flex !important;
  width: fit-content;

  margin: 6px auto 0 !important;
  padding: 7px 14px !important;

  border: 1px solid #b9cfb2 !important;
  background: #ffffff !important;

  color: #355a35 !important;
  font-size: 12px;
  font-weight: 800;

  box-shadow: 0 3px 8px rgba(40, 80, 40, 0.08);
}

@media (max-width: 640px) {
  .node-single-image + div {
    margin-top: 6px !important;
    font-size: 11px !important;
  }

  .node-single-image + div + .mini-action-button {
    margin-top: 5px !important;
    padding: 6px 12px !important;
    font-size: 11px;
  }
}

/* =========================================================
   단일 스마트팜 사진 하단 정보 바 정렬
   - 왼쪽: 현재 사진 시각
   - 오른쪽: 이전 사진 보기
   ========================================================= */

/* 사진 아래 메타 정보 영역 */
.node-single-image + div {
  display: flex !important;
  align-items: center;
  justify-content: space-between;

  width: 100% !important;

  margin: 8px 0 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 현재 사진 시각 */
.node-single-image + div .photo-time-hint,
.node-single-image + div {
  font-size: 11px !important;
  font-weight: 700;
  color: #667466 !important;
}

/* 이전 사진 보기 버튼 */
.node-single-image + div + .mini-action-button {
  margin: 0 !important;

  padding: 6px 12px !important;

  border-radius: 999px;

  border: 1px solid #cfdcc8 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fbf6
    ) !important;

  color: #355a35 !important;

  font-size: 11px;
  font-weight: 800;

  box-shadow:
    0 2px 6px rgba(40, 80, 40, 0.06);
}

/* 버튼 hover */
.node-single-image + div + .mini-action-button:hover {
  border-color: #b8ccb2 !important;
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #eef7ea
    ) !important;
}

/* 모바일 */
@media (max-width: 640px) {

  .node-single-image + div {
    margin-top: 6px !important;
  }

  .node-single-image + div .photo-time-hint,
  .node-single-image + div {
    font-size: 10px !important;
  }

  .node-single-image + div + .mini-action-button {
    padding: 5px 10px !important;
    font-size: 10px;
  }
}

/* =========================================================
   단일 스마트팜 사진 영역 안정화
   - 사진 실제 너비 안에서 시간/버튼 정렬
   - 기존 :has 기반 보정 무력화
   ========================================================= */

.node-single-photo-block {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
}

.node-single-photo-block .node-single-image {
  display: block;
  margin: 0 auto;
}

.node-single-photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  margin-top: 4px;
}

.node-single-photo-time {
  font-size: 12px;
  font-weight: 700;
  color: #667466;
  line-height: 1;
}

.node-single-photo-meta .mini-action-button {
  margin: 0 !important;
  padding: 5px 11px !important;
  min-height: 26px;

  border: 1px solid #b9cfb2 !important;
  background: white !important;
  color: #355a35 !important;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 640px) {
  .node-single-photo-meta {
    margin-top: 3px;
  }

  .node-single-photo-time,
  .node-single-photo-meta .mini-action-button {
    font-size: 10px;
  }
}

/* =========================================================
   모바일 단일 사진 하단 메타 간격 보정
   ========================================================= */

@media (max-width: 640px) {
  .node-single-photo-meta {
    margin-top: 7px !important;
  }

  .node-single-photo-meta .mini-action-button {
    min-height: 28px;
    padding: 6px 11px !important;
  }
}

/* =========================================================
   모바일 단일 사진 메타 간격 강제 보정
   ========================================================= */

@media (max-width: 640px) {
  .node-single-photo-block > .node-single-photo-meta {
    margin-top: 10px !important;
  }

  .node-single-photo-block > .node-single-photo-meta .mini-action-button {
    margin-top: 0 !important;
  }
}

/* =========================================================
   단일 스마트팜 사진 영역 최종 정리
   ========================================================= */

.node-single-photo-block {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
}

.node-single-photo-block .node-single-image {
  display: block;
  margin: 0 auto;
}

.node-single-photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  margin-top: 6px !important;
}

.node-single-photo-time {
  font-size: 12px;
  font-weight: 700;
  color: #667466;
  line-height: 1;
}

.node-single-photo-meta .mini-action-button {
  margin: 0 !important;
  padding: 5px 11px !important;
  min-height: 26px;

  border: 1px solid #b9cfb2 !important;
  background: white !important;
  color: #355a35 !important;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 640px) {
  .node-single-photo-meta {
    margin-top: 12px !important;
  }

  .node-single-photo-meta .mini-action-button {
    min-height: 28px;
    padding: 6px 11px !important;
  }
}

.hero {
  position: relative;
  overflow: hidden;

  min-height: 245px;
  margin-bottom: 22px;
  padding: 26px 46px;

  border-radius: 28px;
  border: 1px solid #dfe9df;

  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      90deg,
      rgba(245, 250, 248, 1) 0%,
      rgba(245, 250, 248, 0.99) 25%,
      rgba(245, 250, 248, 0.88) 39%,
      rgba(245, 250, 248, 0.48) 56%,
      rgba(245, 250, 248, 0.12) 72%,
      rgba(245, 250, 248, 0.00) 86%
    ),
    url('/images/hero-smartfarm.png');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #eef5ef;

  box-shadow: 0 10px 28px rgba(0,0,0,0.04);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 500px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;

  margin: 0 0 12px;
  padding: 7px 14px;

  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #447a56;

  box-shadow: 0 4px 14px rgba(55, 90, 65, 0.08);
}

.hero h1 {
  margin: 0;

  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.055em;
  font-weight: 950;

  color: #173b25;
}

.hero-description {
  margin: 12px 0 0;

  font-size: 16px;
  line-height: 1.62;
  font-weight: 750;

  color: #344f3d;
  white-space: normal;
}

.hero-description br {
  display: block;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 18px;
}

.hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 11px;

  border-radius: 999px;

  background: rgba(255,255,255,0.82);

  border: 1px solid rgba(255,255,255,0.92);

  font-size: 12px;

  /* 여기 강화 */
  font-weight: 950;

  letter-spacing: -0.01em;

  color: #213629;

  box-shadow:
    0 2px 8px rgba(55,90,65,0.05);
}

.tag-icon {
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .hero {
    min-height: 235px;
    padding: 24px 34px;
    background-position: 62% center;
  }

  .hero-content {
    max-width: 430px;
  }

  .hero h1 {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 190px;
    padding: 16px 16px;

    border-radius: 20px;
    align-items: flex-start;

    background-size: cover;
    background-position: 73% center;
  }

  .hero-content {
    max-width: 190px;
  }

  .hero-eyebrow {
    margin-bottom: 7px;
    padding: 5px 9px;
    font-size: 10px;
  }

  .hero h1 {
    font-size: 21px;
    line-height: 1.08;
    letter-spacing: -0.07em;
  }

  .hero-description {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.42;
    font-weight: 800;
  }

.hero-tags {
  margin-top: 10px;

  display: flex;
  flex-wrap: nowrap;

  gap: 4px;
}

  .hero-tags span {
    padding: 4px 7px;
    font-size: 9px;
    gap: 3px;
    font-weight: 950;
    white-space: nowrap;
  }

  .tag-icon {
    font-size: 10px;
  }
}