913 lines
22 KiB
SCSS
913 lines
22 KiB
SCSS
// ──────────────────────────────────────────
|
|
// Variables — monochrome only
|
|
// ──────────────────────────────────────────
|
|
$ink: #111111; // 본문 / 강조 (검정)
|
|
$ink-soft: #333333;
|
|
$muted: #6E6E6E; // 보조 텍스트 (회색)
|
|
$line: #111111; // 구조 구분선 (검정 border)
|
|
$line-soft: #CCCCCC; // 입력/바/내부 구분선 (회색)
|
|
$track: #E5E5E5; // 바 트랙 (회색)
|
|
$wash: #F5F5F5; // 유일하게 허용하는 옅은 회색 면
|
|
$white: #FFFFFF;
|
|
|
|
$radius: 0;
|
|
|
|
// ──────────────────────────────────────────
|
|
// Reset & Base
|
|
// ──────────────────────────────────────────
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html { font-size: 16px; scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
|
|
background: $white;
|
|
color: $ink;
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
// 클릭 요소 focus 시 별도 디자인 없음
|
|
:focus,
|
|
:focus-visible { outline: none; }
|
|
|
|
// ──────────────────────────────────────────
|
|
// Layout
|
|
// ──────────────────────────────────────────
|
|
#app { display: flex; flex-direction: column; min-height: 100vh; }
|
|
|
|
#app-header {
|
|
background: $white;
|
|
border-bottom: 1px solid $line;
|
|
padding: 0 1.5rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-inner {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
height: 56px;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: .85rem;
|
|
font-weight: 700;
|
|
color: $ink;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
letter-spacing: -.01em;
|
|
}
|
|
|
|
.header-name {
|
|
direction: rtl;
|
|
font-size: .85rem;
|
|
font-weight: 700;
|
|
color: $ink;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
letter-spacing: -.01em;
|
|
}
|
|
|
|
|
|
#app-main {
|
|
flex: 1;
|
|
padding: 2rem 1rem 4rem;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.step-wrap {
|
|
// #app-main이 flex 컨테이너라 폭을 명시하지 않으면 콘텐츠 크기로 줄어듦
|
|
width: 100%;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Step Progress Indicator
|
|
// ──────────────────────────────────────────
|
|
.step-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
margin-bottom: 2rem;
|
|
|
|
.step-dot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: .25rem;
|
|
flex: 1;
|
|
position: relative;
|
|
|
|
&:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 14px;
|
|
left: calc(50% + 14px);
|
|
right: calc(-50% + 14px);
|
|
height: 1px;
|
|
background: $line-soft;
|
|
}
|
|
|
|
&.done::after { background: $ink; }
|
|
|
|
.dot-circle {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 1px solid $line-soft;
|
|
background: $white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: .72rem;
|
|
font-weight: 700;
|
|
color: $muted;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dot-label {
|
|
font-size: .68rem;
|
|
color: $muted;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
&.done .dot-circle { background: $ink; border-color: $ink; color: $white; }
|
|
&.active .dot-circle { background: $ink; border-color: $ink; color: $white; }
|
|
&.active .dot-label { color: $ink; font-weight: 700; }
|
|
}
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Cards
|
|
// ──────────────────────────────────────────
|
|
.card {
|
|
background: $white;
|
|
border: 1px solid $line;
|
|
border-radius: $radius;
|
|
padding: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
|
|
&.card-sm { padding: 1.5rem; }
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 800;
|
|
color: $ink;
|
|
letter-spacing: -.02em;
|
|
margin-bottom: .4rem;
|
|
}
|
|
|
|
.section-subtitle {
|
|
color: $muted;
|
|
font-size: .9rem;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Forms (Step 1)
|
|
// ──────────────────────────────────────────
|
|
.form-group {
|
|
margin-bottom: 1.2rem;
|
|
|
|
label {
|
|
display: block;
|
|
font-size: .875rem;
|
|
font-weight: 700;
|
|
margin-bottom: .5rem;
|
|
color: $ink;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: .6rem .9rem;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
font-size: .9rem;
|
|
color: $ink;
|
|
background: $white;
|
|
&::placeholder { color: #A3A3A3; }
|
|
}
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .4rem;
|
|
padding: .5rem 1rem;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
cursor: pointer;
|
|
font-size: .875rem;
|
|
font-weight: 400;
|
|
color: $muted;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
|
|
input[type="radio"] { display: none; }
|
|
|
|
&:hover { border-color: $line; color: $ink; }
|
|
&.selected { border-color: $ink; background: $ink; color: $white; font-weight: 700; }
|
|
}
|
|
}
|
|
|
|
// 카드 바깥에 놓이는 단계 안내문 — 본문보다 크게
|
|
.step-instruction {
|
|
font-size: 1.05rem;
|
|
line-height: 1.65;
|
|
font-weight: 500;
|
|
color: $ink;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Buttons
|
|
// ──────────────────────────────────────────
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: .4rem;
|
|
padding: .65rem 1.6rem;
|
|
border-radius: $radius;
|
|
border: 1px solid transparent;
|
|
font-size: .9rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
background: $white;
|
|
color: $ink;
|
|
|
|
&:disabled { opacity: .35; cursor: not-allowed; }
|
|
|
|
&.btn-primary {
|
|
background: $ink;
|
|
color: $white;
|
|
border-color: $ink;
|
|
&:not(:disabled):hover { background: $white; color: $ink; }
|
|
}
|
|
|
|
&.btn-outline {
|
|
background: $white;
|
|
color: $ink;
|
|
border-color: $ink;
|
|
&:not(:disabled):hover { background: $ink; color: $white; }
|
|
}
|
|
|
|
&.btn-gray {
|
|
background: $white;
|
|
color: $muted;
|
|
border-color: $line-soft;
|
|
&:not(:disabled):hover { border-color: $line; color: $ink; }
|
|
}
|
|
|
|
&.btn-lg { padding: .85rem 2.2rem; font-size: 1rem; }
|
|
&.btn-full { width: 100%; }
|
|
|
|
// 선정 / 미선정 — 미선택 상태는 회색 테두리, 선택 시 검정 반전
|
|
&.btn-select,
|
|
&.btn-reject {
|
|
flex: 1;
|
|
font-size: 1rem;
|
|
padding: .9rem 1rem;
|
|
background: $white;
|
|
color: $ink;
|
|
border-color: $line-soft;
|
|
&:not(:disabled):hover { border-color: $line; }
|
|
}
|
|
|
|
&.btn-selected-select,
|
|
&.btn-selected-reject {
|
|
flex: 1;
|
|
padding: .9rem 1rem;
|
|
font-size: 1rem;
|
|
background: $ink;
|
|
color: $white;
|
|
border-color: $ink;
|
|
}
|
|
}
|
|
|
|
.btn-row {
|
|
display: flex;
|
|
gap: .75rem;
|
|
margin-top: 1.2rem;
|
|
|
|
&.center { justify-content: center; }
|
|
&.end { justify-content: flex-end; }
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Case Card (Step 2)
|
|
// ──────────────────────────────────────────
|
|
.progress-bar-wrap {
|
|
margin-bottom: 1.5rem;
|
|
.progress-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: .82rem;
|
|
color: $muted;
|
|
margin-bottom: .4rem;
|
|
font-weight: 700;
|
|
}
|
|
.progress-track {
|
|
height: 4px;
|
|
background: $track;
|
|
border-radius: $radius;
|
|
overflow: hidden;
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: $ink;
|
|
transition: width .3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
.case-card {
|
|
.case-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .75rem;
|
|
margin-bottom: 1.4rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid $line-soft;
|
|
|
|
.team-badge {
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: $ink;
|
|
background: $white;
|
|
border: 1px solid $line;
|
|
border-radius: $radius;
|
|
padding: .2rem .7rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.industry-tag {
|
|
font-size: .82rem;
|
|
background: $white;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
padding: .25rem .7rem;
|
|
color: $muted;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.var-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .75rem;
|
|
margin-bottom: .85rem;
|
|
|
|
.var-name {
|
|
font-size: .82rem;
|
|
font-weight: 400;
|
|
color: $ink-soft;
|
|
min-width: 110px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.var-bar-track {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: $track;
|
|
border-radius: $radius;
|
|
overflow: hidden;
|
|
|
|
.var-bar-fill {
|
|
height: 100%;
|
|
transition: width .4s ease;
|
|
}
|
|
}
|
|
|
|
.var-score {
|
|
font-size: .85rem;
|
|
font-weight: 700;
|
|
min-width: 32px;
|
|
text-align: right;
|
|
color: $ink;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
|
|
// 점수 수준은 색이 아니라 회색 농도로 구분
|
|
.var-bar-fill[data-level="low"] { background: #C7C7C7; }
|
|
.var-bar-fill[data-level="mid"] { background: #8A8A8A; }
|
|
.var-bar-fill[data-level="high"] { background: $ink; }
|
|
|
|
.judgment-section {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1.2rem;
|
|
border-top: 1px solid $line-soft;
|
|
|
|
.judgment-label {
|
|
font-size: .875rem;
|
|
font-weight: 700;
|
|
margin-bottom: .75rem;
|
|
color: $ink;
|
|
}
|
|
}
|
|
|
|
.confidence-section {
|
|
margin-top: 1.2rem;
|
|
padding: 1rem 1.2rem;
|
|
background: $white;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
|
|
.confidence-label {
|
|
font-size: .82rem;
|
|
font-weight: 700;
|
|
color: $ink;
|
|
margin-bottom: .6rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.confidence-slider {
|
|
width: 100%;
|
|
appearance: none;
|
|
height: 4px;
|
|
border-radius: $radius;
|
|
background: $track;
|
|
cursor: pointer;
|
|
|
|
&::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: $ink;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
&::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: $ink;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.confidence-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: .4rem;
|
|
.cl { font-size: .7rem; color: $muted; }
|
|
}
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Judgment Likert (Step 2)
|
|
// ──────────────────────────────────────────
|
|
.judgment-likert-row {
|
|
display: flex;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.judgment-likert-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: .3rem;
|
|
padding: .7rem .3rem;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
background: $white;
|
|
cursor: pointer;
|
|
|
|
+ .judgment-likert-btn { margin-left: -1px; }
|
|
|
|
.jl-num {
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
color: $muted;
|
|
}
|
|
|
|
.jl-label {
|
|
font-size: .65rem;
|
|
color: $muted;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
&:hover { border-color: $line; position: relative; z-index: 1; }
|
|
|
|
// 값별 색상 구분 없이 선택만 검정 반전
|
|
&.active,
|
|
&[data-val].active {
|
|
border-color: $ink;
|
|
background: $ink;
|
|
position: relative;
|
|
z-index: 2;
|
|
.jl-num, .jl-label { color: $white; }
|
|
}
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// AHP (Step 3)
|
|
// ──────────────────────────────────────────
|
|
.ahp-pair-card {
|
|
.pair-title {
|
|
font-size: .85rem;
|
|
color: $muted;
|
|
margin-bottom: 1.2rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.pair-criteria {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 1.2rem;
|
|
|
|
.crit {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: $muted;
|
|
padding: .6rem;
|
|
border-radius: $radius;
|
|
|
|
&.crit-left { text-align: right; }
|
|
&.crit-right { text-align: left; }
|
|
|
|
// 우세한 쪽은 색이 아니라 굵기/명도로 강조
|
|
&.crit-active-left,
|
|
&.crit-active-right { color: $ink; font-weight: 800; }
|
|
}
|
|
|
|
.vs-badge {
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
color: $muted;
|
|
background: $white;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
padding: .2rem .5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ahp-slider-wrap {
|
|
padding: .5rem 0;
|
|
}
|
|
|
|
.ahp-scale-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: .5rem;
|
|
// Pad by half the thumb width (11px) so labels align with thumb at min/max
|
|
padding: 0 11px;
|
|
|
|
span {
|
|
font-size: .7rem;
|
|
color: $muted;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sc-mid { font-weight: 800; color: $ink; font-size: .72rem; }
|
|
}
|
|
|
|
.ahp-slider {
|
|
width: 100%;
|
|
appearance: none;
|
|
height: 4px;
|
|
border-radius: $radius;
|
|
background: $track;
|
|
cursor: pointer;
|
|
|
|
&::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: $ink;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
&::-moz-range-thumb {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: $ink;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.ahp-description {
|
|
text-align: center;
|
|
margin-top: 1rem;
|
|
padding: .7rem 1rem;
|
|
background: $white;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
font-size: .875rem;
|
|
font-weight: 700;
|
|
color: $ink;
|
|
min-height: 42px;
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Results (Step 4)
|
|
// ──────────────────────────────────────────
|
|
.weight-chart {
|
|
margin-top: .5rem;
|
|
|
|
.wc-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .75rem;
|
|
margin-bottom: .7rem;
|
|
|
|
.wc-label {
|
|
font-size: .82rem;
|
|
font-weight: 400;
|
|
color: $ink-soft;
|
|
min-width: 110px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.wc-track {
|
|
flex: 1;
|
|
height: 14px;
|
|
background: $track;
|
|
border-radius: $radius;
|
|
overflow: hidden;
|
|
|
|
.wc-fill {
|
|
height: 100%;
|
|
background: $ink;
|
|
transition: width .5s ease;
|
|
}
|
|
}
|
|
|
|
.wc-pct {
|
|
font-size: .82rem;
|
|
font-weight: 700;
|
|
color: $ink;
|
|
min-width: 38px;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: .75rem;
|
|
margin-top: 1rem;
|
|
|
|
.stat-box {
|
|
background: $white;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
|
|
.stat-val { font-size: 1.6rem; font-weight: 800; color: $ink; font-variant-numeric: tabular-nums; }
|
|
.stat-label { font-size: .75rem; color: $muted; margin-top: .25rem; line-height: 1.3; }
|
|
|
|
// 경고/정상 모두 색 대신 테두리 굵기로만 구분
|
|
&.stat-warn { border-color: $line; }
|
|
&.stat-ok { border-color: $line-soft; }
|
|
}
|
|
}
|
|
|
|
.comparison-table-wrap {
|
|
overflow-x: auto;
|
|
margin-top: 1rem;
|
|
border: 1px solid $line;
|
|
border-radius: $radius;
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: .82rem;
|
|
|
|
th {
|
|
background: $white;
|
|
padding: .6rem .8rem;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
border-bottom: 1px solid $line;
|
|
white-space: nowrap;
|
|
color: $ink;
|
|
}
|
|
|
|
td {
|
|
padding: .55rem .8rem;
|
|
text-align: center;
|
|
border-bottom: 1px solid $line-soft;
|
|
color: $ink-soft;
|
|
|
|
&:first-child { font-weight: 700; color: $ink; }
|
|
}
|
|
|
|
tr:last-child td { border-bottom: none; }
|
|
|
|
// 불일치 행은 옅은 회색 면으로만 표시
|
|
tr.mismatch td { background: $wash; color: $ink; }
|
|
tr.mismatch td:first-child { color: $ink; }
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: .2rem .55rem;
|
|
border-radius: $radius;
|
|
font-size: .72rem;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
border: 1px solid transparent;
|
|
|
|
&.badge-select { background: $ink; color: $white; border-color: $ink; }
|
|
&.badge-reject { background: $white; color: $muted; border-color: $line-soft; }
|
|
&.badge-match { background: $white; color: $ink; border-color: $line; }
|
|
&.badge-mismatch { background: $ink; color: $white; border-color: $ink; }
|
|
&.badge-neutral { background: $white; color: $muted; border-color: $line-soft; }
|
|
}
|
|
|
|
.neutral-row td { background: $wash; color: $ink-soft; }
|
|
|
|
// ──────────────────────────────────────────
|
|
// Post Survey (Step 5)
|
|
// ──────────────────────────────────────────
|
|
.likert-group {
|
|
margin-bottom: 1.5rem;
|
|
|
|
.likert-q {
|
|
font-size: .9rem;
|
|
font-weight: 700;
|
|
color: $ink;
|
|
margin-bottom: .75rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.likert-options {
|
|
display: flex;
|
|
|
|
label {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: .3rem;
|
|
cursor: pointer;
|
|
|
|
+ label .likert-btn { margin-left: -1px; }
|
|
|
|
input[type="radio"] { display: none; }
|
|
|
|
.likert-btn {
|
|
width: 100%;
|
|
padding: .55rem .2rem;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
text-align: center;
|
|
font-size: .9rem;
|
|
font-weight: 700;
|
|
color: $muted;
|
|
background: $white;
|
|
}
|
|
|
|
.likert-desc { font-size: .65rem; color: $muted; text-align: center; line-height: 1.2; }
|
|
|
|
input:checked + .likert-btn { border-color: $ink; background: $ink; color: $white; position: relative; z-index: 1; }
|
|
&:hover .likert-btn { border-color: $line; }
|
|
}
|
|
}
|
|
}
|
|
|
|
.open-textarea {
|
|
width: 100%;
|
|
padding: .8rem 1rem;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
font-size: .875rem;
|
|
font-family: inherit;
|
|
color: $ink;
|
|
background: $white;
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Complete Screen
|
|
// ──────────────────────────────────────────
|
|
.complete-screen {
|
|
text-align: center;
|
|
padding: 2rem 1rem;
|
|
|
|
.complete-icon { font-size: 2.5rem; margin-bottom: 1rem; filter: grayscale(1); }
|
|
.complete-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
|
|
.complete-desc { color: $muted; font-size: .9rem; margin-bottom: 2rem; line-height: 1.7; }
|
|
}
|
|
|
|
.json-output {
|
|
background: $white;
|
|
color: $ink-soft;
|
|
border: 1px solid $line-soft;
|
|
border-radius: $radius;
|
|
padding: 1.2rem;
|
|
font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
|
|
font-size: .75rem;
|
|
line-height: 1.6;
|
|
text-align: left;
|
|
overflow-x: auto;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
white-space: pre;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Utilities
|
|
// ──────────────────────────────────────────
|
|
.divider {
|
|
height: 1px;
|
|
background: $line-soft;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.text-muted { color: $muted; font-size: .85rem; }
|
|
.text-center { text-align: center; }
|
|
.mt-1 { margin-top: .5rem; }
|
|
.mt-2 { margin-top: 1rem; }
|
|
.mt-3 { margin-top: 1.5rem; }
|
|
.mb-1 { margin-bottom: .5rem; }
|
|
|
|
// 파란색 강조 대신 굵기로만 강조
|
|
.highlight-text {
|
|
color: $ink;
|
|
font-weight: 800;
|
|
}
|
|
|
|
// ──────────────────────────────────────────
|
|
// Responsive
|
|
// ──────────────────────────────────────────
|
|
@media (max-width: 600px) {
|
|
#app-header { padding: 0 1rem; }
|
|
|
|
.header-title { font-size: .78rem; }
|
|
|
|
.card { padding: 1.2rem; }
|
|
|
|
.step-instruction { font-size: .95rem; margin-bottom: 1.2rem; }
|
|
|
|
.step-progress .step-dot .dot-label { display: none; }
|
|
|
|
.var-row .var-name { min-width: 80px; font-size: .76rem; }
|
|
|
|
.ahp-pair-card .pair-criteria { flex-direction: column; text-align: center; gap: .5rem; }
|
|
|
|
.ahp-pair-card .pair-criteria .crit { text-align: center !important; }
|
|
|
|
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
|
|
|
.comparison-table-wrap table { font-size: .75rem; }
|
|
.comparison-table-wrap table td,
|
|
.comparison-table-wrap table th { padding: .4rem .5rem; }
|
|
|
|
.likert-group .likert-options label .likert-desc { display: none; }
|
|
|
|
.btn.btn-lg { padding: .75rem 1.5rem; font-size: .9rem; }
|
|
}
|
|
|
|
@media (max-width: 380px) {
|
|
.step-progress .step-dot .dot-circle { width: 22px; height: 22px; font-size: .65rem; }
|
|
}
|