/* pasanja.ai 디자인 토큰 — KRDS(전자정부 디자인시스템) 색상/타이포/스페이싱 기준 차용. * 정부 식별요소·민원플로우는 가져오지 않음. */ :root { --gray-10:#F4F5F6; --gray-20:#E6E8EA; --gray-30:#CDD1D5; --gray-50:#8A949E; --gray-60:#6D7882; --gray-80:#464C53; --gray-100:#131416; --primary-10:#ECF2FE; --primary-50:#256EF4; --primary-60:#0B50D0; --primary-70:#063A74; --secondary-10:#EEF2F7; --secondary-20:#D6E0EB; --color-warning:#C26900; --fg-1:var(--gray-100); --fg-2:var(--gray-80); --fg-3:var(--gray-60); --fg-4:var(--gray-50); --bg-canvas:#FFFFFF; --bg-subtle:var(--gray-10); --border-default:var(--gray-30); --border-focus:var(--primary-50); /* KRDS light-gray-60 — 폼 컨트롤 전용 테두리. 카드/구분선(--border-default)보다 진하게 잡아 KRDS 접근성 기준(입력 필드 대비)을 따름 */ --border-input:#58616A; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --radius-xs:4px; --radius-s:6px; --radius-m:8px; --radius-l:10px; --border-w:1px; /* KRDS font-size-label-xsmall/small/medium/large (10px 기준 rem → px 환산값) */ --fs-xsmall:13px; --fs-small:15px; --fs-medium:17px; --fs-large:19px; --font-sans:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif; } * { box-sizing: border-box; } html { color-scheme: light; } body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-canvas); margin:0; font-size:17px; line-height:1.55; } .container { max-width:960px; margin:0 auto; padding: var(--sp-6) var(--sp-4); } .container--wide { width:100%; max-width:1280px; padding-right:clamp(20px, 3vw, 56px); padding-left:clamp(20px, 3vw, 56px); } .container--wide.detail-tools-open { max-width:none; padding-right:0; --detail-panel-width:50vw; } .container--narrow { max-width:480px; } h1,h2 { font-weight:700; letter-spacing:-0.01em; margin:0 0 var(--sp-2); } h1 { font-size:22px; } h2 { font-size:15px; color:var(--fg-2); border-bottom:1px solid var(--border-default); padding-bottom:var(--sp-2); margin-bottom:var(--sp-3); } a { color:var(--primary-60); text-decoration:none; } a:hover { text-decoration:underline; } :focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; } .back { color:var(--fg-3); font-size:13px; display:inline-block; margin-bottom:var(--sp-3); } .sub, .meta { color:var(--fg-3); font-size:13px; margin-bottom:var(--sp-5); } /* Nav — 실제 앱 헤더처럼 배경/그림자로 본문과 분리하고, 본문 컨테이너와 동일한 폭에 정렬 */ .nav { background:#fff; border-bottom:1px solid var(--border-default); box-shadow:0 1px 2px rgba(19,20,22,.04); margin-bottom:var(--sp-6); } .nav-inner { width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(20px, 3vw, 56px); min-height:64px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; } .nav-logo { font-size:19px; font-weight:800; letter-spacing:-0.02em; color:var(--fg-1); text-decoration:none; } .nav-logo span { color:var(--primary-50); } .nav-logo:hover { text-decoration:none; } .nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-5); margin:0; padding:0; align-items:center; justify-content:flex-end; font-size:14px; } .nav ul a { color:var(--fg-2); } .nav ul a:hover { color:var(--primary-60); } .nav-user { color:var(--fg-3); } .nav ul a.nav-auth-link { border-radius:var(--radius-s); color:var(--fg-2); font-weight:700; padding:8px 10px; text-decoration:none; white-space:nowrap; } .nav ul a.nav-auth-link:hover { background:var(--primary-10); color:var(--primary-60); } @media (max-width:480px) { .nav-inner { gap:8px 12px; padding:10px 16px; } .nav ul { gap:var(--sp-3); font-size:13px; } .nav-user { display:none; } } /* 이용안내 */ .guide-shell { padding-bottom:64px; } .guide-header { margin:32px 0 28px; max-width:800px; } .guide-header h1 { font-size:34px; letter-spacing:-.03em; margin:0 0 10px; } .guide-header > p:last-child { color:var(--fg-3); font-size:17px; margin:0; } .guide-anchor-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; } .guide-anchor-nav a { background:#fff; border:1px solid var(--border-default); border-radius:999px; color:var(--fg-2); font-size:14px; font-weight:700; padding:8px 13px; } .guide-anchor-nav a:hover { background:var(--primary-10); color:var(--primary-60); text-decoration:none; } .guide-audience-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:40px; } .guide-audience-card { border:1px solid var(--border-default); border-radius:12px; padding:22px 24px; } .guide-audience-card h2 { border:0; color:var(--fg-1); font-size:20px; margin:0 0 8px; padding:0; } .guide-audience-card p { color:var(--fg-3); margin:0 0 12px; } .guide-audience-card ul { margin:0; padding-left:20px; } .guide-audience-card li + li { margin-top:5px; } .guide-section { margin:0 0 42px; scroll-margin-top:24px; } .guide-section > h2 { color:var(--fg-1); font-size:24px; margin:0 0 18px; } .guide-step-list { counter-reset:guide-step; display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:none; margin:0; padding:0; } .guide-step-list li { border:1px solid var(--border-default); border-radius:12px; counter-increment:guide-step; padding:20px; } .guide-step-list li::before { content:counter(guide-step,decimal-leading-zero); display:block; color:var(--primary-60); font-size:13px; font-weight:800; letter-spacing:.06em; margin-bottom:8px; } .guide-step-list h3 { font-size:17px; margin:0 0 7px; } .guide-step-list p { color:var(--fg-2); font-size:15px; line-height:1.7; margin:0; } .guide-feature-list { display:grid; gap:0; grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-feature-list article { border-bottom:1px solid var(--border-default); padding:18px 16px 18px 0; } .guide-feature-list h3 { font-size:17px; margin:0 0 6px; } .guide-feature-list p { color:var(--fg-2); font-size:15px; line-height:1.7; margin:0; } .guide-login-note, .guide-caution { background:var(--bg-subtle); border-left:3px solid var(--primary-50); border-radius:0 8px 8px 0; color:var(--fg-2); line-height:1.7; margin:20px 0 0; padding:14px 16px; } .guide-checklist { background:var(--bg-subtle); border-radius:12px; padding:22px 26px; } .guide-checklist ul { margin:0; padding-left:22px; } .guide-checklist li + li { margin-top:8px; } .guide-faq { border-top:1px solid var(--border-default); } .guide-faq details { border-bottom:1px solid var(--border-default); padding:16px 2px; } .guide-faq summary { cursor:pointer; font-weight:700; } .guide-faq details p { color:var(--fg-2); line-height:1.7; margin:12px 0 0; } .guide-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } /* 오늘의 물건 리포트 */ .report-shell { padding-bottom:64px; } .report-index-header { margin:24px 0 32px; } .report-index-header h1 { margin:0 0 8px; font-size:32px; letter-spacing:-0.03em; } .report-index-header > p:last-child { color:var(--fg-3); margin:0; } .report-eyebrow { color:var(--primary-60); font-size:12px; font-weight:800; letter-spacing:.08em; margin:0 0 8px; } .report-card-list { display:grid; gap:16px; } .report-card { padding:24px; } .report-card-date { color:var(--fg-3); font-size:13px; margin:0 0 8px; } .report-card h2 { font-size:21px; margin:0 0 10px; } .report-card h2 a { color:var(--fg-1); text-decoration:none; } .report-card h2 a:hover { color:var(--fg-1); } .report-card-excerpt { color:var(--fg-2); line-height:1.7; margin:0 0 14px; } .report-read-more { font-weight:700; } .report-empty { padding:40px 24px; text-align:center; } .report-empty h1, .report-empty h2 { margin-top:0; } .report-empty p { color:var(--fg-3); } .report-article { max-width:900px; margin:24px auto 0; } .report-article-header { border-bottom:1px solid var(--border-default); margin-bottom:28px; padding-bottom:20px; } .report-article-header h1 { font-size:34px; letter-spacing:-.03em; line-height:1.3; margin:0; } .report-header-count { color:var(--fg-3); font-size:14px; margin:12px 0 0; } .report-content { color:var(--fg-1); font-size:16px; line-height:1.85; overflow-wrap:anywhere; } .report-content h2 { font-size:24px; line-height:1.4; margin:36px 0 14px; } .report-content h3 { font-size:19px; line-height:1.45; margin:28px 0 10px; } .report-content p { margin:0 0 16px; } .report-content ul { margin:0 0 20px; padding-left:24px; } .report-content li { margin:0 0 6px; } .report-content a { overflow-wrap:anywhere; } .report-summary { background:var(--bg-subtle); border:1px solid var(--border-default); border-radius:12px; margin-bottom:20px; padding:22px 24px; } .report-summary h2, .report-highlights > h2, .report-inventory > h2 { font-size:22px; line-height:1.4; margin:0 0 10px; } .report-summary p { margin:0; } .report-stats { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 34px; } .report-stats > strong, .report-stats > span { background:#f1f5f9; border-radius:999px; font-size:13px; padding:6px 11px; } .report-stats > strong { background:var(--primary-60); color:#fff; } .report-stats > .report-stats-note { background:transparent; color:var(--fg-3); padding-left:0; } .report-highlights { margin-bottom:38px; } .report-highlight-list { display:grid; gap:14px; } .report-highlight-card { border:1px solid var(--border-default); border-radius:12px; padding:20px 22px; } .report-highlight-card h3 { font-size:18px; line-height:1.5; margin:0 0 8px; } .report-highlight-card h3 a, .report-inventory-group li > a { color:var(--primary-60); text-decoration:none; } .report-highlight-card h3 a:hover, .report-inventory-group li > a:hover { color:var(--primary-60); } .report-highlight-card h3 a:hover, .report-inventory-group li > a:hover, .report-card h2 a:hover { text-decoration:underline; } .report-highlight-card > p:not(.report-notice-meta) { margin:0 0 10px; } .report-notice-meta, .report-notice-facts { color:var(--fg-3); font-size:13px; line-height:1.6; margin:0 0 6px; } .report-notice-facts { margin:0; } .report-source-link { font-size:13px; margin:8px 0 0; } .report-inventory { border-top:1px solid var(--border-default); padding-top:28px; } .report-inventory > h2 { margin-bottom:20px; } .report-inventory > h2 span, .report-inventory-group h3 span { color:var(--fg-3); font-size:14px; font-weight:500; } .report-inventory-group { border-top:1px solid var(--border-default); padding:18px 0; } .report-inventory-group h3 { font-size:17px; margin:0 0 10px; } .report-inventory-group ul { list-style:none; margin:0; padding:0; } .report-inventory-group li { border-bottom:1px solid #edf0f2; padding:12px 0; } .report-inventory-group li:last-child { border-bottom:0; } .report-inventory-group li > a { font-size:15px; line-height:1.55; } .report-inventory-group .report-notice-facts { margin-top:5px; } .report-inventory-group .report-source-link { margin-top:4px; } .report-article-footer { border-top:1px solid var(--border-default); color:var(--fg-3); font-size:13px; line-height:1.7; margin-top:40px; padding-top:18px; } .report-admin-layout { align-items:start; display:grid; gap:20px; grid-template-columns:minmax(0, 1fr) 300px; } .report-admin-editor, .report-admin-list { padding:24px; } .report-admin-editor h2, .report-admin-list h2 { font-size:20px; margin:0 0 18px; } .report-admin-editor form { display:grid; gap:9px; } .report-admin-editor label { font-size:14px; font-weight:700; margin-top:8px; } .report-admin-editor label span { color:var(--fg-3); font-size:12px; font-weight:400; margin-left:6px; } .report-admin-editor input, .report-admin-editor textarea { border:1px solid var(--border-default); border-radius:8px; font:inherit; padding:11px 12px; width:100%; } .report-admin-editor textarea { line-height:1.6; resize:vertical; } .report-admin-generated-note { color:var(--fg-3); font-size:13px; margin:0; } .report-source-data { color:var(--fg-3); font-size:13px; } .report-source-data summary { cursor:pointer; } .report-source-data textarea { margin-top:10px; } .report-admin-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .report-admin-list ul { list-style:none; margin:0; padding:0; } .report-admin-list li + li { border-top:1px solid var(--border-default); } .report-admin-list li a { color:inherit; display:block; padding:12px 0; text-decoration:none; } .report-admin-list li strong, .report-admin-list li span { display:block; } .report-admin-list li span { color:var(--fg-3); font-size:12px; margin-top:5px; } .report-notice { border-radius:8px; margin:0 0 18px; padding:12px 16px; } .report-notice--success { background:#edf8f0; color:#176534; } .report-notice--error { background:#fff1f0; color:#a12622; } .report-preview { border-top:1px solid var(--border-default); margin-top:24px; padding-top:16px; } .report-preview summary { cursor:pointer; font-weight:700; margin-bottom:16px; } @media (max-width:760px) { .report-shell { padding-bottom:40px; } .guide-shell { padding-bottom:40px; } .guide-header { margin-top:20px; } .guide-header h1 { font-size:28px; } .guide-audience-grid, .guide-step-list, .guide-feature-list { grid-template-columns:1fr; } .guide-audience-card, .guide-step-list li { padding:18px; } .guide-section > h2 { font-size:21px; } .guide-checklist { padding:18px 20px; } .guide-actions { display:grid; } .guide-actions > * { justify-content:center; } .report-index-header h1, .report-article-header h1 { font-size:27px; } .report-summary { padding:18px; } .report-highlight-card { padding:16px; } .report-card, .report-admin-editor, .report-admin-list { padding:18px; } .report-admin-layout { grid-template-columns:1fr; } .report-admin-actions { display:grid; } .report-admin-actions > * { justify-content:center; text-align:center; } } /* Buttons — KRDS button.small 사이즈 트랙(height-6/40px + padding-5/12px + radius-medium1/6px) 기준 */ .btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--sp-3); border-radius:var(--radius-s); font-size:var(--fs-small); font-weight:700; border:var(--border-w) solid transparent; cursor:pointer; text-decoration:none; font-family:inherit; } .btn-primary { background:var(--primary-50); color:#fff; } .btn-primary:hover { background:var(--primary-60); text-decoration:none; } .btn-tertiary { background:#fff; color:var(--fg-1); border-color:var(--border-default); } .btn-tertiary:hover { background:var(--bg-subtle); text-decoration:none; } /* Form controls — KRDS input/select.small 사이즈 트랙(height-6/40px) + input 전용 테두리색 */ select, input[type=text] { height:40px; padding:0 var(--sp-4); font-size:var(--fs-small); font-family:inherit; border:var(--border-w) solid var(--border-input); border-radius:var(--radius-s); background:#fff; color:var(--fg-1); } select:hover, input:hover { border-color:var(--fg-2); } select:focus, input:focus { border-color:var(--primary-50); } form.filters { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-3); } .listing-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--sp-3); } .listing-description { margin:0; color:var(--fg-3); font-size:var(--fs-small); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .search-input { flex:1 1 280px; min-width:220px; } .clear-filters { padding:0 var(--sp-2); font-size:var(--fs-small); white-space:nowrap; } .result-summary { display:flex; justify-content:space-between; align-items:center; margin:var(--sp-5) 0 var(--sp-2); color:var(--fg-3); font-size:var(--fs-small); } .result-summary strong { color:var(--fg-1); } .table-scroll { width:100%; overflow-x:auto; } /* 자산유형 필터 — 체크박스 대신 클릭 즉시 적용되는 토글 칩 (KRDS krds-check-area 자리에 배지형 필터 적용) */ .asset-type-filters { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-5); } .filter-chip { display:inline-flex; align-items:center; height:32px; padding:0 var(--sp-3); border-radius:var(--radius-l); font-size:var(--fs-small); font-weight:700; border:var(--border-w) solid var(--border-default); color:var(--fg-2); background:#fff; } .filter-chip:hover { border-color:var(--primary-50); color:var(--primary-60); text-decoration:none; } .filter-chip.is-active { background:var(--primary-50); border-color:var(--primary-50); color:#fff; } .filter-chip.is-active:hover { background:var(--primary-60); border-color:var(--primary-60); color:#fff; } /* 즐겨찾기 별 버튼 */ .fav-star { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:none; background:none; padding:0; font-size:18px; line-height:1; color:var(--gray-30); cursor:pointer; } .fav-star:hover { color:var(--fg-4); text-decoration:none; } .fav-star.is-active { color:#F5A623; } .favorite-list { list-style:none; margin:0; padding:0; } .favorite-list li { padding:var(--sp-2) 0; border-bottom:1px solid var(--gray-20); font-size:14px; } .favorite-list li:last-child { border-bottom:none; } /* Table — KRDS krds-table-wrap.data 패턴(헤더 subtle 배경 + 옅은 구분선, thead bold/text-bolder, tbody regular/text-subtle) 그대로: 헤더 heading-xxsmall/15px, 본문 label-medium/17px */ table { width:100%; border-collapse:collapse; font-size:var(--fs-medium); } .notice-list-table { min-width:900px; } thead th { text-align:left; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-small); font-weight:700; color:var(--fg-1); background:var(--secondary-10); border-bottom:var(--border-w) solid var(--secondary-20); } tbody td { padding:var(--sp-3) var(--sp-4); border-bottom:var(--border-w) solid var(--border-default); color:var(--fg-2); vertical-align:top; } /* 목록의 기관/제목과 가격/게시일을 각각 두 줄로 묶어 핵심 정보를 빠르게 비교 */ .notice-list-table th:first-child, .notice-list-table td:first-child, .notice-list-table th:nth-child(2), .notice-list-table td:nth-child(2), .notice-list-table th:last-child, .notice-list-table td:last-child { white-space:nowrap; } .notice-title-cell { min-width:360px; } .notice-read-status { display:block; margin-top:4px; color:var(--fg-3); font-size:11px; white-space:nowrap; } .notice-read-status[hidden] { display:none; } .notice-title-cell .notice-institution, .bid-date-cell span { display:block; } .notice-title-cell .notice-institution { margin-top:4px; color:var(--fg-3); font-size:var(--fs-medium); } .notice-posted-date { margin-top:4px; color:var(--fg-3); font-size:var(--fs-medium); } .court-region { display:block; margin-top:4px; color:var(--fg-3); font-size:var(--fs-small); } .favorite-cell { text-align:center; } /* 배지 여러 개가 줄바꿈될 때 위아래로 바짝 붙지 않게 — 배지 나열하는 곳은 항상 이 컨테이너로 감쌀 것 */ .badge-group { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-1); } /* Badge / status tag — KRDS krds-badge.large 트랙(size-height-5/32px + padding-3/8px + label-small/15px) */ .badge { display:inline-flex; align-items:center; height:28px; line-height:28px; padding:0 var(--sp-2); border-radius:var(--radius-xs); font-size:var(--fs-small); font-weight:700; border:var(--border-w) solid var(--primary-50); color:var(--primary-60); background:#fff; white-space:nowrap; } /* 자산유형별 구분색 — outline 톤은 유지하고 색상만 종류별로 분리 (risk-badge의 경고색 주황은 사용하지 않음) */ .badge-real_estate { border-color:var(--primary-50); color:var(--primary-60); } .badge-claim { border-color:#228738; color:#1F7A34; } .badge-movable { border-color:#346FB2; color:#1C589C; } .badge-ip { border-color:#7C3AED; color:#6D28D9; } .badge-vehicle { border-color:#0D9488; color:#0F766E; } .badge-equity { border-color:#D63D4A; color:#AB2B36; } .badge-membership { border-color:#4F46E5; color:#4338CA; } .badge-etc { border-color:var(--gray-30); color:var(--fg-3); } .risk-badge { display:inline-flex; align-items:center; height:28px; line-height:28px; padding:0 var(--sp-2); border-radius:var(--radius-xs); font-size:var(--fs-small); font-weight:700; border:var(--border-w) solid var(--color-warning); color:var(--color-warning); background:#FDF3E7; white-space:nowrap; } .tag-status { display:inline-flex; align-items:center; height:28px; line-height:28px; padding:0 var(--sp-2); border-radius:var(--radius-xs); font-size:var(--fs-small); font-weight:700; background:var(--bg-subtle); color:var(--fg-3); white-space:nowrap; } .tag-status.on-sale { background:var(--primary-10); color:var(--primary-60); } .tag-status.conditional-waiver { background:#FDF3E7; color:var(--color-warning); } .tag-status.pure-waiver { background:var(--bg-subtle); color:var(--fg-4); } /* Pagination */ .pagination { display:flex; gap:var(--sp-1); justify-content:center; margin-top:var(--sp-6); font-size:14px; } .pagination a, .pagination span { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-s); color:var(--fg-2); } .pagination a:hover { background:var(--bg-subtle); text-decoration:none; } .pagination .current { background:var(--primary-50); color:#fff; font-weight:700; } .empty { color:var(--fg-3); text-align:center; padding:var(--sp-8) 0; font-size:14px; } @media (max-width:600px) { .listing-header { align-items:flex-start; } .listing-description { max-width:34ch; } .search-input { flex-basis:100%; } form.filters .btn { flex:1; } } /* 좁은 화면에서는 공고 표를 동일한 데이터의 카드형 목록으로 재배치 */ @media (max-width:720px) { .table-scroll { overflow:visible; } .notice-list-table { display:block; min-width:0; } .notice-list-table thead { display:none; } .notice-list-table tbody { display:flex; flex-direction:column; gap:var(--sp-3); } .notice-list-table tbody tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas: "number favorite" "title favorite" "court favorite" "assets assets" "bid bid"; align-items:start; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3); border:1px solid var(--border-default); border-radius:var(--radius-m); background:#fff; } .notice-list-table tbody td { min-width:0; padding:0; border:0; white-space:normal; } .notice-list-table .notice-number-cell { grid-area:number; color:var(--fg-3); font-size:var(--fs-small); } .notice-list-table .notice-title-cell { grid-area:title; min-width:0; } .notice-list-table .notice-title-cell > a { display:block; font-size:var(--fs-medium); font-weight:700; line-height:1.4; overflow-wrap:anywhere; } .notice-list-table .notice-title-cell .notice-institution { margin-top:2px; font-size:var(--fs-small); } .notice-list-table .court-region-cell { grid-area:court; color:var(--fg-3); font-size:var(--fs-small); } .notice-list-table .court-region-cell > span { display:inline; } .notice-list-table .court-region-cell .court-region { margin:0 0 0 var(--sp-1); } .notice-list-table .notice-assets-cell { grid-area:assets; } .notice-list-table .favorite-cell { grid-area:favorite; display:flex; flex-direction:column; align-items:center; text-align:center; } .notice-list-table .notice-read-status { margin-top:2px; font-size:10px; } .notice-list-table .bid-date-cell { grid-area:bid; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-1) var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--gray-20); } .notice-list-table .bid-date-cell > span:first-child { font-weight:700; color:var(--fg-1); } .notice-list-table .notice-posted-date { margin:0; font-size:var(--fs-small); } form.filters .search-input { flex:1 0 100%; min-width:0; } form.filters select { flex:1 1 calc(50% - var(--sp-2)); min-width:0; } form.filters .btn { flex:1 0 100%; } .result-summary { margin-top:var(--sp-4); } } /* 상세페이지 */ .detail-layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-6); align-items:start; margin-bottom:112px; } .detail-layout.has-panel { grid-template-columns:minmax(0, 1fr) minmax(320px, var(--detail-panel-width)); gap:0; } .detail-main { min-width:0; } .detail-main h1 { font-size:28px; margin-bottom:var(--sp-3); } .detail-institution { margin:calc(-1 * var(--sp-2)) 0 var(--sp-3); color:var(--fg-3); font-size:var(--fs-medium); overflow-wrap:anywhere; } .detail-panel { position:fixed; z-index:40; top:80px; right:0; bottom:0; display:flex; flex-direction:column; width:var(--detail-panel-width); min-width:0; padding:var(--sp-4) clamp(20px, 3vw, 56px) var(--sp-4) var(--sp-5); border-left:1px solid var(--border-default); background:#fff; } .detail-panel[hidden], .detail-panel-body[hidden] { display:none !important; } .detail-panel-header { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border-default); } .detail-panel-tabs { display:flex; align-self:stretch; align-items:stretch; gap:var(--sp-1); } .detail-panel-tab { padding:var(--sp-2) var(--sp-3); border:0; border-bottom:2px solid transparent; background:transparent; color:var(--fg-3); font:inherit; font-size:var(--fs-small); font-weight:700; white-space:nowrap; cursor:pointer; } .detail-panel-tab:hover { color:var(--fg-1); background:var(--bg-subtle); } .detail-panel-tab[aria-selected="true"] { color:var(--primary-60); border-bottom-color:var(--primary-50); } .panel-close { width:36px; height:36px; border:0; border-radius:var(--radius-s); background:transparent; color:var(--fg-2); font-size:28px; line-height:1; cursor:pointer; } .panel-close:hover { background:var(--bg-subtle); } .panel-resize-handle { position:fixed; z-index:41; top:80px; right:calc(var(--detail-panel-width) - 5px); bottom:0; display:flex; width:10px; align-items:center; justify-content:center; cursor:col-resize; touch-action:none; } .panel-resize-handle[hidden] { display:none !important; } .panel-resize-handle::after { width:2px; height:40px; border-radius:2px; background:var(--gray-30); content:""; } .panel-resize-handle:hover::after, .panel-resize-handle:focus-visible::after { background:var(--primary-50); } .panel-resize-handle:focus-visible { outline:2px solid var(--border-focus); outline-offset:-2px; } body.is-panel-resizing { cursor:col-resize; user-select:none; } .detail-panel-body { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; padding-top:var(--sp-3); } .pdf-frame { width:100%; flex:1; min-height:240px; border:1px solid var(--border-default); border-radius:var(--radius-m); } .panel-open-new { align-self:flex-end; margin-top:var(--sp-2); font-size:var(--fs-small); } .source-links { display:flex; flex-wrap:wrap; gap:var(--sp-2); } .source-primary { width:100%; } .notice-inquiry-note { margin:var(--sp-4) 0 var(--sp-5); padding:var(--sp-3) var(--sp-4); border-left:4px solid var(--color-warning); border-radius:var(--radius-s); background:#FDF3E7; color:#704000; font-size:var(--fs-small); } .section-description { margin:-var(--sp-1) 0 var(--sp-3); color:var(--fg-3); font-size:var(--fs-small); } .chat-placeholder { margin-top:var(--sp-3); padding:var(--sp-4); text-align:center; border:1px dashed var(--border-default); border-radius:var(--radius-m); background:var(--bg-subtle); color:var(--fg-3); font-size:13px; } .notice-chat { display:flex; flex:1; flex-direction:column; min-height:0; margin:0; padding:0; background:#fff; } .chat-privacy-note, .chat-status { margin:0 0 var(--sp-3); color:var(--fg-3); font-size:var(--fs-xsmall); } .chat-thread { display:flex; flex-direction:column; gap:var(--sp-2); max-height:360px; overflow-y:auto; margin:var(--sp-3) 0; } .notice-chat .chat-thread { flex:1; min-height:0; max-height:none; } .chat-message { max-width:95%; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-m); font-size:var(--fs-small); white-space:pre-wrap; overflow-wrap:anywhere; } .chat-message strong { display:block; margin-bottom:2px; font-size:var(--fs-xsmall); } .chat-message p { margin:0; } .chat-message--user { align-self:flex-end; background:var(--primary-10); } .chat-message--assistant { align-self:flex-start; background:var(--bg-subtle); } .chat-form { display:flex; flex-direction:column; gap:var(--sp-2); } .chat-form textarea { width:100%; height:84px; min-height:84px; flex:0 0 84px; padding:var(--sp-3); resize:none; font:inherit; font-size:var(--fs-small); border:1px solid var(--border-input); border-radius:var(--radius-s); } .chat-form textarea:focus { outline:2px solid var(--border-focus); outline-offset:1px; } .chat-form button:disabled { opacity:.55; cursor:not-allowed; } .chat-launcher { position:fixed; right:24px; bottom:24px; z-index:35; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border:0; border-radius:50%; background:var(--primary-50); color:#fff; box-shadow:0 4px 14px rgba(19,20,22,.22); cursor:pointer; } .chat-launcher:hover { background:var(--primary-60); } .chat-launcher svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .chat-launcher.is-panel-open { opacity:0; pointer-events:none; } .info-heading { display:flex; align-items:flex-start; gap:var(--sp-2); } .info-heading h2 { margin-bottom:1rem; } .info-tooltip { position:relative; flex:0 0 auto; margin-top:2px; } .info-tooltip summary { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid var(--gray-50); border-radius:50%; color:var(--fg-3); font-size:13px; font-weight:700; line-height:1; cursor:pointer; list-style:none; } .info-tooltip summary::-webkit-details-marker { display:none; } .info-tooltip-content { position:absolute; z-index:20; top:26px; left:0; width:min(320px, calc(100vw - 48px)); padding:var(--sp-3); border:1px solid var(--border-default); border-radius:var(--radius-s); background:#fff; color:var(--fg-2); box-shadow:0 4px 16px rgba(19,20,22,.16); font-size:var(--fs-small); font-weight:400; line-height:1.5; } section { margin-bottom:var(--sp-6); } table.schedule th { padding:var(--sp-2) var(--sp-3); font-size:var(--fs-small); font-weight:700; color:var(--fg-1); background:var(--secondary-10); border-bottom:var(--border-w) solid var(--secondary-20); text-align:left; } table.schedule td { padding:var(--sp-2) var(--sp-3); border-bottom:var(--border-w) solid var(--border-default); color:var(--fg-2); font-size:var(--fs-medium); text-align:left; } .info-section { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-20); } .info-section h2 { font-size: 1.25rem; font-weight: 800; color: var(--fg-1); border-bottom: none; padding-bottom: 0; margin-bottom: 1rem; } .info-row { display: flex; padding: 0.85rem 0; border-bottom: 1px solid var(--gray-10); font-size: var(--fs-medium); } .info-row:last-child { border-bottom: none; } .info-label { flex: 0 0 180px; color: var(--fg-3); } .info-value { flex: 1; white-space: pre-wrap; } .info-value--location { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:var(--sp-3); row-gap:var(--sp-2); white-space:normal; } .location-address { flex:0 1 auto; min-width:0; } .location-map-links { display:flex; flex:0 0 auto; flex-wrap:nowrap; gap:var(--sp-2); } .location-map-link { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border-default); border-radius:var(--radius-s); background:#fff; } .map-provider-icon { display:block; width:22px; height:22px; object-fit:contain; } .location-map-link:hover { border-color:var(--primary-50); background:var(--primary-10); text-decoration:none; } .memo-form { display:flex; flex-direction:column; gap:var(--sp-2); } .memo-form textarea { width:100%; min-height:120px; padding:var(--sp-3); resize:vertical; font:inherit; font-size:var(--fs-medium); border:1px solid var(--border-input); border-radius:var(--radius-s); } .memo-form textarea:focus { outline:2px solid var(--border-focus); outline-offset:1px; } .memo-form-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); } .memo-status { min-height:1.5em; margin:0; color:var(--fg-3); font-size:var(--fs-small); } .memo-form button:disabled { opacity:.55; cursor:wait; } @media (max-width:600px) { .detail-main h1 { font-size:23px; } .info-row { flex-direction:column; gap:var(--sp-1); } .info-label { flex:none; font-size:var(--fs-small); } .info-value { width:100%; } .info-value--location { align-items:flex-start; } .source-links .btn { flex:1 1 100%; } .schedule-scroll { max-width:100%; overflow-x:auto; } table.schedule { min-width:520px; } .memo-form-footer { align-items:stretch; flex-direction:column-reverse; } .memo-form-footer .btn { width:100%; } } @media (max-width:720px) { .detail-layout.has-panel { display:block; } .detail-panel { inset:64px 0 0; width:100%; padding:var(--sp-3) var(--sp-4) var(--sp-4); border:0; box-shadow:0 0 0 100vmax rgba(19,20,22,.32); } .panel-resize-handle { display:none; } .chat-launcher { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:54px; height:54px; } } /* render_markdown_lite()가 만드는

/