/* 전체 흐름: 모바일 선택 화면을 압축하고 검색 후에는 독립 카드 화면만 표시한다. */
:root{--green:#173f35;--line:#dce4df;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#f4f6f2;color:#19211e;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif}.app-header{display:flex;align-items:center;gap:10px;background:var(--green);color:white;padding:calc(12px + env(safe-area-inset-top)) 14px 12px}.app-header strong{font-size:19px}.app-header span{font-size:10px;margin-left:auto}.screen{width:min(920px,100%);margin:auto;padding:14px 12px calc(16px + env(safe-area-inset-bottom))}h1{font-size:20px;margin:0 0 12px}button,select{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:7px;background:white;color:var(--green)}button{cursor:pointer;font-weight:700}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #d99a29;outline-offset:2px}label{font-size:12px;font-weight:700;min-width:0;display:grid;gap:4px}select{width:100%;min-width:0;font-size:13px;text-overflow:ellipsis}.context-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.instruction{font-size:12px;margin:12px 0 6px;color:#63716a}.selector-row{display:grid;grid-template-columns:.85fr 1.25fr 1fr;gap:3px}.selector-row select{padding:6px 2px}.save-bar{display:flex;justify-content:space-between;align-items:center;margin:10px 0 6px;font-size:12px}.save-bar b{margin-left:5px}.save-bar button{min-height:38px;font-size:12px}.saved-box{min-height:110px;border:1px solid var(--line);border-radius:9px;background:white;padding:3px 8px}.saved-row{display:flex;align-items:center;gap:4px;min-height:34px}.saved-row+ .saved-row{border-top:1px solid #eef1ee}.saved-row span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px}.saved-row button{padding:0;border:0;min-height:32px;min-width:32px;font-size:20px}#saved-empty{font-size:12px;color:#63716a;margin:10px 0}#load-status{font-size:12px;margin:4px 0;color:#8c4c20}#load-status:empty{display:none}#search-status{font-size:11px;margin:8px 0;color:#63716a}.primary{display:block;background:var(--green);color:white;width:100%;font-size:15px;min-height:46px}.connection{font-size:10px;color:#63716a;margin:8px 0 0}.connection.offline{color:#906415}.results-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.results-header h1{font-size:18px;margin:0}.results-header button{font-size:12px}.results-header span{font-size:13px}.muted,.result-summary{font-size:11px;color:#63716a}.result-summary p{overflow-wrap:anywhere}.pager{display:flex;align-items:center;gap:8px;margin:10px 0}.pager button{flex-shrink:0;font-size:13px}.pager p{font-size:12px;flex:1;text-align:center;margin:0}#card-viewer{display:block;min-width:0}[hidden]{display:none!important}

/* 5개 조합 저장 후에도 검색 버튼을 모바일 한 화면 안에 유지한다. */
.saved-box{height:178px;min-height:178px;overflow-y:auto;overscroll-behavior:contain}
.saved-row{height:34px}.saved-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 새 자료 요청 버튼을 검색과 분리하되 모바일 첫 화면 높이를 유지한다. */
.latest{width:100%;min-height:34px;margin-top:5px;font-size:12px}.instruction{margin-top:7px}.screen{padding-top:10px}.connection{margin:4px 0;font-size:10px}

h1{margin-bottom:8px}

/* 작은 모바일에서는 5줄을 유지하고 두 실행 버튼을 나란히 배치한다. */
@media(max-height:650px){
  .saved-box{height:148px;min-height:148px}
  .saved-row{height:28px;min-height:28px}.saved-row button{min-height:28px;height:28px}
  #selection-screen #search,#selection-screen #latest{display:inline-block;vertical-align:top;min-height:44px;margin-top:0;padding:7px 2px;font-size:11px}
  #selection-screen #search{width:calc(68% - 3px)}
  #selection-screen #latest{width:calc(32% - 3px)}
}

/* 세로 스크롤과 확대는 브라우저에 맡기고 가로 밀기는 카드 이동에 사용한다. */
#card-viewer{touch-action:pan-y pinch-zoom}
.push-settings{margin-top:4px;font-size:12px}.push-settings summary{cursor:pointer;color:#173f35}.push-settings p{margin:5px 0}.push-settings button{min-height:36px;padding:5px 12px}

/* 자료실로 돌아가는 고정 주소 메뉴. 방문 기록과 관계없이 같은 화면으로 이동한다. */
.library-return{display:block;width:100%;min-height:36px;margin-top:5px;padding:7px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--green);font-size:12px;font-weight:700;text-align:center;text-decoration:none}.library-return:focus-visible{outline:3px solid #d99a29;outline-offset:2px}

/* 두 화면 탭과 경매 화면은 기존 예측 카드 스타일에 영향을 주지 않도록 범위를 제한한다. */
.app-tabs{display:flex;max-width:920px;margin:auto;border-bottom:1px solid var(--line);background:white}.app-tabs a{flex:1;min-height:44px;padding:11px 4px;text-align:center;color:var(--green);text-decoration:none;font-weight:700}.app-tabs a[aria-current]{background:#e5efe8;border-bottom:3px solid var(--green)}
#auction-form{display:grid;gap:10px}#auction-date{font:inherit;min-height:44px;max-width:100%;width:100%;border:1px solid var(--line);border-radius:8px;padding:7px;background:white}.auction-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}.auction-controls label{display:flex;align-items:center}.auction-controls input{width:20px;height:20px}.auction-controls button{font-size:12px}#auction-status{overflow-wrap:anywhere}.auction-row{background:white;border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin:7px 0;overflow-wrap:anywhere;font-size:13px;line-height:1.35}.auction-row h2{font-size:14px;line-height:1.35;margin:0 0 3px}.auction-row p{font-size:13px;margin:2px 0}

/* 품목 상자에 붙는 목록: 모바일에서도 운영 품목 강조와 내부 스크롤을 유지한다. */
.auction-product-field{position:relative;display:grid;gap:4px;min-width:0;font-size:12px;font-weight:700}
#auction-product-open{text-align:left;width:100%;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-product{color:#1260c8!important;font-weight:700!important}
#auction-product-panel{position:absolute;top:100%;left:0;right:0;z-index:20;background:white;border:1px solid var(--line);border-radius:8px;padding:5px;box-shadow:0 6px 16px #0002}
#auction-product-choices{max-height: min(38dvh,300px);overflow-y:auto;overscroll-behavior:contain}
#auction-product-choices h3{font-size:11px;background:#eef3ef;padding:7px 4px;margin:5px 0}
.product-choice{display:block;text-align:left;width:100%;min-height:44px;border:0;border-bottom:1px solid #eef1ee;border-radius:0;font-weight:400;color:#19211e;padding:8px 5px;overflow-wrap:anywhere}
.product-choice[aria-pressed="true"]{background:#eaf1fb}
.product-choice:focus-visible{outline:2px solid #1260c8;outline-offset:-2px}

/* 두 정보 묶음: 첫 묶음은 거래 식별, 둘째 묶음은 규격/수량·가격·합계 순의 2열이다.
   높이를 고정하지 않아 긴 산지명, 큰 숫자, 글자 확대도 줄바꿈으로 모두 표시한다. */
.auction-identity-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
.auction-trade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;border-top:1px solid var(--line);margin:6px 0 0;padding-top:6px}
.auction-trade>div{min-width:0}.auction-trade dt{font-size:11px;color:#63716a;line-height:1.3}
.auction-trade dd{margin:1px 0 0;font-size:13px;font-weight:400;line-height:1.35;color:#19211e}

/* 낙찰가격 제목과 금액은 본문 크기를 유지하면서 청색 굵은 글씨로 강조한다. */
.auction-trade .auction-winning-price dt,.auction-trade .auction-winning-price dd{font-size:13px;font-weight:700;color:#1260c8}

/* 경매 첫 줄(품목 제목)을 제외한 모든 내용은 본문 한 글자 폭만큼 들여쓴다. */
.auction-identity > :not(h2),.auction-trade{margin-left:1em}

/* 선택된 최상위 탭에만 화살표를 표시한다. 비선택 탭도 같은 폭을 확보해 글자 이동을 방지한다. */
.app-tabs .tab-selected-mark{color:#111111;-webkit-text-fill-color:#111111;display:inline-block;width:1.2em;margin-right:.2em;visibility:hidden}
.app-tabs a[aria-current="page"] .tab-selected-mark{visibility:visible}

/* 인접 카드가 화면 밖으로 넘치지 않도록 슬라이드 영역만 가린다. 상세 대화상자는 최상위 계층을 유지한다. */
.card-slide-stage{position:relative;overflow:hidden;overflow:clip;min-width:0}
.card-slide-preview{position:absolute;top:0;left:0;width:100%;pointer-events:none}

/* 경매 메뉴는 모바일에서도 한 줄 유지. 그래프는 화면 폭에 맞춘 동일 간격 거래축이다. */
.auction-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.auction-actions button{padding:10px 2px;font-size:12px;white-space:nowrap;min-width:0}.auction-actions [aria-pressed=true]{background:#173f35;color:white;border-color:#173f35}
#auction-graph-panel{margin-top:14px;background:white;padding:12px;border:1px solid var(--line);border-radius:10px}.graph-fields{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px}.graph-fields select{width:100%;min-width:0}.graph-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:10px}#graph-status,#graph-detail{font-size:12px;overflow-wrap:anywhere}#graph-chart svg{width:100%;height:auto;display:block}#graph-chart circle{cursor:pointer}#graph-chart circle:focus{stroke:#f0a020;stroke-width:3;outline:none}.graph-loading::before{content:'';display:inline-block;width:10px;height:10px;border:2px solid #bcd3c4;border-top-color:#16734b;border-radius:50%;animation:graph-spin 1s linear infinite;margin-right:6px}@keyframes graph-spin{to{transform:rotate(360deg)}}

.auction-actions [aria-pressed=false]{background:#fff;color:#173f35;border-color:var(--line)}

/* 서류철 탭: 탭별 고유 색상 + 진한 선택 배경 + 기존 화살표로 현재 위치를 구분한다. */
.app-tabs{gap:5px;padding:10px 8px 0;background:#edf1ed;border:0;align-items:flex-end}
#tab-forecast{--tab-ink:#176447;--tab-tint:#e1eee5;--tab-edge:#a8cbbb}#tab-auction{--tab-ink:#235fa0;--tab-tint:#e4edf9;--tab-edge:#b1c9e6}#tab-history{--tab-ink:#895413;--tab-tint:#f8edda;--tab-edge:#dfc697}
.app-tabs a{position:relative;min-width:0;min-height:46px;padding:12px 3px 10px;border:1px solid var(--tab-edge);border-bottom:3px solid var(--tab-edge);border-radius:18px 18px 4px 4px;background:var(--tab-tint);color:var(--tab-ink);font-size:13px;white-space:nowrap;transition:background .15s,color .15s}
.app-tabs a[aria-current]{background:var(--tab-ink);color:#fff;border-color:var(--tab-ink);border-bottom:3px solid var(--tab-ink);padding-top:16px;box-shadow:0 3px 7px #173f3526}
.app-tabs a:focus-visible,.history-menus button:focus-visible{outline:3px solid #e5a928;outline-offset:2px}
.auction-actions{margin:0 0 12px}.auction-actions button{border-radius:11px;min-height:44px}
.history-menus{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.history-menus button{font-size:14px;border-radius:12px;background:#f8edda;border-color:#dfc697;color:#70430f;min-height:44px}.history-menus button[aria-pressed=true]{background:#895413;color:#fff;border-color:#895413;font-weight:700}
#daily-auction-panel{padding:18px;border:1px solid #dfc697;border-radius:12px;background:#fffaf1}

/* 기본 색상 설정: 대표색/메뉴색/정보 배경/테두리를 탭별로 함께 관리한다. */
:root{--forecast-ink:#176447;--forecast-tint:#e1eee5;--forecast-paper:#f1f7f3;--forecast-edge:#a8cbbb;
 --auction-ink:#235fa0;--auction-tint:#e4edf9;--auction-paper:#f1f5fc;--auction-edge:#b1c9e6;
 --history-ink:#895413;--history-tint:#f8edda;--history-paper:#fcf7ee;--history-edge:#dfc697}
body,body[data-theme=forecast]{--section-ink:var(--forecast-ink);--section-tint:var(--forecast-tint);--section-paper:var(--forecast-paper);--section-edge:var(--forecast-edge)}
body[data-theme=auction]{--section-ink:var(--auction-ink);--section-tint:var(--auction-tint);--section-paper:var(--auction-paper);--section-edge:var(--auction-edge)}
body[data-theme=history]{--section-ink:var(--history-ink);--section-tint:var(--history-tint);--section-paper:var(--history-paper);--section-edge:var(--history-edge)}
#tab-forecast{--tab-ink:var(--forecast-ink);--tab-tint:var(--forecast-tint);--tab-edge:var(--forecast-edge)}
#tab-auction{--tab-ink:var(--auction-ink);--tab-tint:var(--auction-tint);--tab-edge:var(--auction-edge)}
#tab-history{--tab-ink:var(--history-ink);--tab-tint:var(--history-tint);--tab-edge:var(--history-edge)}
/* 전체 정보 배경을 이어 주며, 카드 내부의 예측 신호 색상은 카드 자체에서 관리한다. */
body{background:var(--section-paper)}
main{min-height:calc(100dvh - 120px);background:var(--section-paper)}
.screen{--green:var(--section-ink);--line:var(--section-edge);background:var(--section-paper)}
.screen button,.screen select{border-color:var(--section-edge)}
.screen .primary,.auction-actions button[aria-pressed=true],.history-menus button[aria-pressed=true]{background:var(--section-ink);border-color:var(--section-ink);color:white}
.auction-actions button,.history-menus button,#latest,#history-refresh{background:var(--section-tint);border-color:var(--section-edge);color:var(--section-ink)}
.auction-actions button[aria-pressed=true],.history-menus button[aria-pressed=true]{background:var(--section-ink);color:white}
.screen .auction-actions button[aria-pressed=false]{background:var(--section-tint);color:var(--section-ink)}
#auction-graph-panel,.auction-row,#daily-auction-panel{background:var(--section-paper);border-color:var(--section-edge)}

/* 일일경매요약은 기존 모바일 카드의 폭과 선택상자 위치를 유지한다. */
#daily-auction-panel{padding:0;overflow:hidden;border-radius:12px}

/* 메뉴 배치: 경매 필터 다음에 실행 메뉴, 과거정보는 상위 탭과 이어지는 2단 서류철 구조다. */
#auction-screen .auction-actions{margin:10px 0 12px}
body[data-theme=history] #tab-history{border-radius:18px 18px 0 0;box-shadow:none}
body #history-screen{max-width:920px;padding-top:0}
#history-screen .history-menus{margin:0 -12px 14px;padding:10px 12px 0;gap:6px;background:var(--history-ink);border-radius:0;position:relative}
#history-screen .history-menus button{border-radius:12px 12px 0 0;border:1px solid var(--history-edge);border-bottom:0;min-height:44px;background:var(--history-tint);color:var(--history-ink);position:relative}
#history-screen .history-menus button[aria-pressed=true]{background:var(--history-paper);color:var(--history-ink);border-color:var(--history-paper);box-shadow:0 2px 0 var(--history-paper)}
#history-screen .history-menus button[aria-pressed=true]::before{content:'▸ ';font-weight:700}
#history-summary-panel,#daily-auction-panel{max-width:656px;margin-left:auto;margin-right:auto}


/* 입체형 실행 버튼: 높이 36px, 간격 8px, 아래 테두리 3px로 작은 버튼 형태를 강조한다. */
#auction-screen .auction-actions{display:flex;justify-content:center;gap:8px;margin:8px 0 14px}
#auction-screen .auction-actions button{width:auto;min-height:36px;padding:7px 11px;font-size:12px;line-height:16px;border:1px solid #235fa0;border-bottom-width:3px;border-radius:5px;background:linear-gradient(#fff,#edf3fc);color:#235fa0}
#auction-screen .auction-actions button[aria-pressed=true]{background:linear-gradient(#377bbd,#235fa0);color:white}
#auction-screen .auction-actions button:active:not(:disabled){transform:translateY(1px);border-bottom-width:2px}
@media(max-width:350px){#auction-screen .auction-actions{gap:6px}#auction-screen .auction-actions button{padding-left:8px;padding-right:8px}}

/* 경매 버튼은 같은 간격으로 조금 더 넓게 펼치되 작은 화면에서도 한 줄을 유지한다. */
#auction-screen .auction-actions{gap:clamp(12px,4vw,20px);justify-content:center}
@media(max-width:350px){#auction-screen .auction-actions{gap:12px}}
/* 예측 검색/카드 화면의 실행 버튼과 버튼형 링크를 녹색 입체형으로 통일한다. */
#selection-screen button,#results-screen button,#selection-screen .library-return,#results-screen #return-to-selection{border:1px solid #176447;border-bottom-width:3px;border-radius:5px;background:linear-gradient(#fff,#e5f0e9);color:#176447;box-shadow:0 1px 2px #173f3518}
#selection-screen button.primary,#results-screen #return-to-selection{background:linear-gradient(#32845f,#176447);color:white}
#selection-screen button:active:not(:disabled),#results-screen button:active:not(:disabled){transform:translateY(1px);border-bottom-width:2px}

/* 예측 실행 메뉴 설정: 동일한 3열, 두 줄 높이와 기존 입체 버튼/화살표 유지. */
#selection-screen .forecast-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#selection-screen .forecast-actions>a,#selection-screen .forecast-actions>button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;width:100%;min-height:54px;margin:0;padding:6px 2px;font-size:12px;line-height:18px;text-align:center}
@media(max-width:350px){#selection-screen .forecast-actions>a,#selection-screen .forecast-actions>button{font-size:10px}}

/* 가격비교 설정: 기존 가격표의 녹색 계열과 연결하고 여섯 탭을 320px에서도 유지한다. */
#tab-comparison{--tab-ink:#426c38;--tab-tint:#e7f3df;--tab-edge:#b7d0a9}
#tab-comparison[aria-current]{color:#fff}
body[data-theme=comparison]{--section-ink:#426c38;--section-tint:#e7f3df;--section-paper:#f4faf1;--section-edge:#b7d0a9}
#comparison-frame{display:block;width:100%;height:80vh;min-height:560px;border:0;background:#f4faf5}
@media(max-width:420px){.app-tabs{gap:2px;padding-left:3px;padding-right:3px}.app-tabs a{overflow-wrap:anywhere}}