/* app/static/styles.css (FULL REPLACEMENT) - Page scoping via: - Landing hero screenshot style: :is(body.landing, body.tonefixer_landing) + .hero/.inner/.title/.sub/.cta - Other pages styled to match the same aesthetic - Optional image: /static/landing-bg.jpg */ /* ----------------------------- Design tokens ----------------------------- */ :root { --bg0: #070812; --bg1: #0b0c10; --bg2: #0f1220; --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.70); --border: rgba(255,255,255,0.10); --surface: rgba(255,255,255,0.06); --surface2: rgba(255,255,255,0.10); --brand: 120, 40, 255; --brand2: 80, 0, 200; --danger: #ff5c5c; --radius: 18px; --radius2: 26px; --shadow: 0 10px 30px rgba(0,0,0,0.35); --container: 1040px; --gap: 16px; --btnH: 48px; --ease: 0.18s ease; } @media (prefers-color-scheme: light) { :root { --bg0: #f4f6ff; --bg1: #f7f7fb; --bg2: #ffffff; --btnText: rgba(255,255,255,0.92); --text: rgba(0,0,0,0.88); --muted: rgba(0,0,0,0.62); --border: rgba(0,0,0,0.10); --surface: rgba(0,0,0,0.04); --surface2: rgba(0,0,0,0.06); --shadow: 0 10px 30px rgba(0,0,0,0.10); } } /* ----------------------------- Base ----------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, "Noto Sans KR", sans-serif; color: var(--text); /* 공통 배경 (랜딩과 톤 맞추기) */ background: radial-gradient(1200px 600px at 12% 0%, rgba(110,139,255,0.18), transparent 55%), radial-gradient(900px 520px at 90% 10%, rgba(87,210,255,0.14), transparent 55%), linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%); } a { color: inherit; text-decoration: none; } a:hover { opacity: 0.96; } .container { max-width: var(--container); margin: 0 auto; padding: 28px 20px 44px; } /* ----------------------------- Helpers / Compatibility ----------------------------- */ .muted { color: var(--muted); } .err { color: var(--danger); font-weight: 700; } .hr { height: 1px; background: var(--border); margin: 16px 0; } /* 기존 템플릿 row/col 호환 */ .row { display: flex; gap: var(--gap); flex-wrap: wrap; } .col { flex: 1 1 320px; min-width: 280px; } /* grid(선택 사용) */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .col-6 { grid-column: span 6; } .col-12 { grid-column: span 12; } @media (max-width: 880px) { .col-6 { grid-column: span 12; } } /* ----------------------------- Typography ----------------------------- */ h1, h2, h3 { margin: 0; letter-spacing: -0.4px; } p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); } .tone-example-box { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); } .tone-example-list { margin: 8px 0 0; padding-left: 18px; color: var(--text); font-size: 80%; } .tone-example-list li + li { margin-top: 6px; } .kpi { font-size: 36px; font-weight: 850; margin: 10px 0 6px; letter-spacing: -0.6px; } /* 원래 가격: 작게 + 회색 + 취소선 */ .kpi-old { font-size: 24px; font-weight: 600; margin: 10px 0 6px; letter-spacing: -0.4px; color: var(--muted); text-decoration: line-through; } /* 최종 가격: 크게 + 강조 색상 */ .kpi-final { font-size: 44px; font-weight: 850; margin: 10px 0 6px; letter-spacing: -0.6px; color: rgb(var(--brand)); } /* ----------------------------- Card / Surface ----------------------------- */ .card { border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface2), var(--surface)); border-radius: var(--radius2); padding: 20px; box-shadow: var(--shadow); } /* ----------------------------- Pills / Chips ----------------------------- */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--muted); font-size: 14px; } /* ----------------------------- Buttons ----------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btnH); padding: 0 14px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text); cursor: pointer; transition: transform var(--ease), background var(--ease), border-color var(--ease), filter var(--ease); user-select: none; } .btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.primary { border: 0; background: linear-gradient(135deg, rgba(var(--brand)), rgba(var(--brand2))); color: var(--btnText); font-weight: 900; } .btn.primary:hover { filter: brightness(1.04); } .btn.big { height: 56px; padding: 0 20px; border-radius: 18px; font-size: 18px; } /* ----------------------------- Inputs ----------------------------- */ select, input[type="email"], input[type="text"] { width: 100%; padding: 12px 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text); outline: none; } select { appearance: none; } input:focus, select:focus { border-color: rgba(110,139,255,0.55); box-shadow: 0 0 0 3px rgba(110,139,255,0.18); } /* ----------------------------- Header / Footer (base.html 구조가 다를 수 있어서 범용적으로) ----------------------------- */ header { margin-bottom: 18px; } /* site-header가 있으면(권장 구조) 살짝 정돈 */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .brand { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface2), var(--surface)); border-radius: 999px; box-shadow: var(--shadow); } .brand .dot { width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(var(--brand)), rgba(var(--brand2))); } .brand .title { font-weight: 800; letter-spacing: -0.2px; } .brand .sub { color: var(--muted); font-size: 13px; } footer, .footer { margin-top: 26px; color: var(--muted); font-size: 13px; } /* ========================================================= LANDING: Screenshot-like full screen hero (NO "landing-" prefix) HTML expects:

...

========================================================= */ /* 랜딩은 풀스크린 느낌을 위해 container를 풀폭으로 */ :is(body.landing, body.tonefixer_landing) .container { max-width: none; padding: 0; } /* 랜딩에서도 헤더가 있으면 "방해 안 되게" 상단에 얇게 배치 */ :is(body.landing, body.tonefixer_landing) header, :is(body.landing, body.tonefixer_landing) .site-header { display: none; } /* 랜딩 footer는 스샷 느낌 위해 숨김(원하면 제거 가능) */ :is(body.landing, body.tonefixer_landing) footer, :is(body.landing, body.tonefixer_landing) .footer { display: none; } /* 배경사진 + blur + 보라 오버레이 */ :is(body.landing, body.tonefixer_landing)::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("/static/building.jpg") center / cover no-repeat; filter: blur(5px) brightness(0.7) grayscale(100%); transform: scale(1.08); /* blur edge artifact 방지 */ } :is(body.landing, body.tonefixer_landing)::after { content: ""; position: fixed; inset: 0; z-index: -1; /* 스샷 느낌의 보라 overlay */ background: linear-gradient(180deg, rgba(var(--brand), 0.7) 0%, rgba(var(--brand2), 0.75) 100%); } /* hero layout */ :is(body.landing, body.tonefixer_landing) .hero { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 33vh 18px 0; } :is(body.landing, body.tonefixer_landing) .inner { text-align: center; max-width: 980px; } /* 큰 강조 문구 */ :is(body.landing, body.tonefixer_landing) .title { margin: 0; font-weight: 900; text-transform: uppercase; /* 원치 않으면 삭제 */ font-size: clamp(25px, 4.2vw, 57px); line-height: 1.05; letter-spacing: -0.02em; color: rgba(255,255,255,0.97); text-shadow: 0 10px 26px rgba(0,0,0,0.35); } /* 서브 문구 */ :is(body.landing, body.tonefixer_landing) .sub { margin: 18px auto 0; max-width: 720px; font-size: clamp(14px, 1.55vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.82); text-shadow: 0 8px 18px rgba(0,0,0,0.28); } /* CTA 버튼 (브랜드 그라데이션) */ :is(body.landing, body.tonefixer_landing) .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; min-height: 58px; padding: 0 36px; border-radius: 999px; background: linear-gradient(135deg, #C2185B, rgba(var(--brand), 1)); border: 2px solid rgba(255,255,255,0.74); color: rgba(255,255,255,0.96); font-weight: 900; font-size: 17px; letter-spacing: -0.01em; box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 2px rgba(var(--brand), 0.28); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } :is(body.landing, body.tonefixer_landing) .cta:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.03); box-shadow: 0 16px 34px rgba(0,0,0,0.40), 0 0 0 3px rgba(var(--brand), 0.36); } :is(body.landing, body.tonefixer_landing) .cta:active { transform: translateY(0); } :is(body.landing, body.tonefixer_landing) .cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } /* 모바일: CTA는 거의 풀폭 */ @media (max-width: 520px) { :is(body.landing, body.tonefixer_landing) .cta { width: 100%; max-width: 360px; } } /* landing: tone example section */ :is(body.landing, body.tonefixer_landing) .examples { padding: 56px 18px 84px; background: rgba(255, 255, 255, 0.95); border-radius: 28px 28px 0 0; margin-top: -32vh; position: relative; z-index: 2; } :is(body.landing, body.tonefixer_landing) .examples-inner { max-width: 1440px; margin: 0 auto; } :is(body.landing, body.tonefixer_landing) .examples-title { font-size: clamp(28px, 2.6vw, 40px); font-weight: 900; color: rgba(7, 10, 22, 0.95); text-align: center; letter-spacing: -0.02em; } :is(body.landing, body.tonefixer_landing) .examples-sub { margin: 12px auto 0; max-width: 720px; text-align: center; color: rgba(7, 10, 22, 0.72); } :is(body.landing, body.tonefixer_landing) .mix-hero { margin-top: 28px; } :is(body.landing, body.tonefixer_landing) .tone-panels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } :is(body.landing, body.tonefixer_landing) .tone-panel { background: #ffffff; border: 1px solid rgba(12, 18, 34, 0.12); border-radius: 20px; padding: 18px; box-shadow: 0 12px 28px rgba(10, 20, 40, 0.08); } :is(body.landing, body.tonefixer_landing) .tone-panel h3, :is(body.landing, body.tonefixer_landing) .interactive-demo h3, :is(body.landing, body.tonefixer_landing) .long-example h3 { margin: 0; color: rgba(10, 16, 32, 0.95); font-size: 20px; font-weight: 800; } :is(body.landing, body.tonefixer_landing) .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } :is(body.landing, body.tonefixer_landing) .panel-tone-control { display: inline-flex; align-items: center; gap: 8px; color: rgba(7, 10, 22, 0.86); font-size: 14px; font-weight: 700; white-space: nowrap; } :is(body.landing, body.tonefixer_landing) .panel-tone-control select { min-width: 132px; color: rgba(7, 10, 22, 0.92); border-color: rgba(12, 18, 34, 0.16); background: #fff; padding: 8px 10px; border-radius: 10px; } :is(body.landing, body.tonefixer_landing) .mix-banner { margin: 12px 0 0; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 700; } :is(body.landing, body.tonefixer_landing) .mix-banner.warning { background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.32); color: #9b1c1c; } :is(body.landing, body.tonefixer_landing) .mix-banner.success { background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.3); color: #065f46; } :is(body.landing, body.tonefixer_landing) .mix-banner.source { background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.28); color: #3730a3; } :is(body.landing, body.tonefixer_landing) .sentence-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } :is(body.landing, body.tonefixer_landing) .sentence-list li { color: rgba(7, 10, 22, 0.92); line-height: 1.55; border: 1px solid rgba(12, 18, 34, 0.08); border-radius: 12px; padding: 10px 12px; background: rgba(248, 250, 252, 0.92); } :is(body.landing, body.tonefixer_landing) .sentence-list.plain li { background: #fff; } :is(body.landing, body.tonefixer_landing) .tone-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid; } :is(body.landing, body.tonefixer_landing) .tone-tag.formal { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.24); color: #1e40af; } :is(body.landing, body.tonefixer_landing) .tone-tag.polite { background: rgba(20, 184, 166, 0.12); border-color: rgba(20, 184, 166, 0.24); color: #0f766e; } :is(body.landing, body.tonefixer_landing) .tone-tag.command { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.24); color: #9a3412; } :is(body.landing, body.tonefixer_landing) .tone-tag.casual { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.24); color: #6b21a8; } :is(body.landing, body.tonefixer_landing) .highlight-red { background: rgba(239, 68, 68, 0.16); color: #b91c1c; padding: 0 3px; border-radius: 4px; } :is(body.landing, body.tonefixer_landing) .highlight-green { background: rgba(16, 185, 129, 0.16); color: #047857; padding: 0 3px; border-radius: 4px; } :is(body.landing, body.tonefixer_landing) .examples-cta-group { margin-top: 38px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } :is(body.landing, body.tonefixer_landing) .examples-cta-group .demo-btn { color: rgba(7, 10, 22, 0.9); background: #fff; border-color: rgba(12, 18, 34, 0.24); } :is(body.landing, body.tonefixer_landing) .card-light { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(12, 18, 34, 0.12); border-radius: 20px; padding: 18px; } :is(body.landing, body.tonefixer_landing) .interactive-demo { margin-top: 28px; } :is(body.landing, body.tonefixer_landing) .demo-sub { margin-top: 8px; color: rgba(7, 10, 22, 0.72); } :is(body.landing, body.tonefixer_landing) .demo-controls { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } :is(body.landing, body.tonefixer_landing) .demo-controls label { color: rgba(7, 10, 22, 0.86); font-size: 14px; font-weight: 700; } :is(body.landing, body.tonefixer_landing) .demo-controls select { margin-top: 6px; min-width: 180px; color: rgba(7, 10, 22, 0.92); border-color: rgba(12, 18, 34, 0.16); background: #fff; } :is(body.landing, body.tonefixer_landing) .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(12, 18, 34, 0.14); background: #fff; } :is(body.landing, body.tonefixer_landing) .toggle input { width: 16px; height: 16px; } :is(body.landing, body.tonefixer_landing) .demo-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } :is(body.landing, body.tonefixer_landing) .demo-grid h4 { margin: 0; color: rgba(7, 10, 22, 0.9); font-size: 16px; } :is(body.landing, body.tonefixer_landing) .long-example { margin-top: 28px; } :is(body.landing, body.tonefixer_landing) .paragraph-example { margin-top: 12px; color: rgba(7, 10, 22, 0.92); line-height: 1.7; font-size: 16px; } @media (max-width: 700px) { :is(body.landing, body.tonefixer_landing) .examples { padding: 36px 14px 56px; margin-top: -14vh; } :is(body.landing, body.tonefixer_landing) .tone-panels, :is(body.landing, body.tonefixer_landing) .demo-grid { grid-template-columns: 1fr; } :is(body.landing, body.tonefixer_landing) .demo-controls { align-items: stretch; } :is(body.landing, body.tonefixer_landing) .panel-head { flex-direction: column; align-items: flex-start; } :is(body.landing, body.tonefixer_landing) .panel-tone-control { width: 100%; } :is(body.landing, body.tonefixer_landing) .panel-tone-control select { width: 100%; } } @media (min-width: 701px) and (max-width: 1024px) { :is(body.landing, body.tonefixer_landing) .tone-panels { grid-template-columns: 1fr 1fr; } } @media (min-width: 1025px) { :is(body.landing, body.tonefixer_landing) .tone-panel { padding: 16px; } :is(body.landing, body.tonefixer_landing) .mix-banner { padding: 9px 10px; font-size: 12px; } :is(body.landing, body.tonefixer_landing) .sentence-list li { padding: 9px 10px; font-size: 14px; line-height: 1.45; } } /* ========================================================= OTHER PAGES: match landing vibe (color/spacing/panels) ========================================================= */ /* upload/pricing(quote)/email/done: 랜딩의 보라톤과 어색하지 않게, 카드/폼이 더 “유리(panel)”처럼 */ :is(body.upload, body.tonefixer_upload) .card, :is(body.pricing, body.tonefixer_pricing) .card, :is(body.quote, body.tonefixer_quote) .card, :is(body.tonefixer_question_email) .card, :is(body.email, body.tonefixer_email) .card, :is(body.done, body.tonefixer_done) .card, :is(body.landing, body.tonefixer_landing) .examples .card { border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border-color: rgba(255,255,255,0.16); } :is(body.tonefixer_question_email) .question-form { margin-top: 16px; } :is(body.tonefixer_question_email) .question-form > label { display: block; margin-top: 16px; } :is(body.tonefixer_question_email) .question-textarea { width: 100%; min-height: 288px; margin-top: 8px; padding: 16px 18px 72px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08)); color: var(--text); font: inherit; line-height: 1.7; outline: none; resize: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 20px rgba(0,0,0,0.10); transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); } :is(body.tonefixer_question_email) .question-textarea::placeholder { color: var(--muted); } :is(body.tonefixer_question_email) .question-textarea:focus { border-color: rgba(110,139,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 4px rgba(110,139,255,0.16); } :is(body.tonefixer_question_email) .question-compose { position: relative; margin-top: 8px; } :is(body.tonefixer_question_email) .question-compose.drag-over .question-textarea { border-color: rgba(var(--brand), 0.72); background: linear-gradient(180deg, rgba(var(--brand), 0.14), rgba(255,255,255,0.09)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 4px rgba(var(--brand), 0.14); } :is(body.tonefixer_question_email) .question-compose-actions { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; z-index: 1; } :is(body.tonefixer_question_email) .question-compose-guide { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.12); color: var(--muted); font-size: 13px; line-height: 1; backdrop-filter: blur(8px); } :is(body.tonefixer_question_email) .question-dropzone { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; background: rgba(var(--brand), 0.16); border: 1px solid rgba(var(--brand), 0.34); border-radius: 999px; cursor: pointer; color: var(--text); font-size: 14px; font-weight: 700; transition: background var(--ease), border-color var(--ease), transform var(--ease); } :is(body.tonefixer_question_email) .question-dropzone:hover { background: rgba(var(--brand), 0.24); border-color: rgba(var(--brand), 0.54); transform: translateY(-1px); } :is(body.tonefixer_question_email) .question-dropzone input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; } :is(body.tonefixer_question_email) .question-attachment-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-height: 260px; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.07)); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); overflow-y: auto; } :is(body.tonefixer_question_email) .question-attachment-list::-webkit-scrollbar { width: 10px; } :is(body.tonefixer_question_email) .question-attachment-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } :is(body.tonefixer_question_email) .question-attachment-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 8px; color: var(--text); font-size: 13px; font-weight: 700; } :is(body.tonefixer_question_email) .question-attachment-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 8px 18px rgba(0,0,0,0.10); } :is(body.tonefixer_question_email) .question-attachment-main { min-width: 0; flex: 1 1 auto; } :is(body.tonefixer_question_email) .question-attachment-name { min-width: 0; color: var(--text); font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(body.tonefixer_question_email) .question-attachment-meta { flex: 0 0 auto; color: rgba(0,0,0,0.78); font-size: 13px; } :is(body.tonefixer_question_email) .question-attachment-remove { flex: 0 0 auto; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--ease), border-color var(--ease), transform var(--ease); } :is(body.tonefixer_question_email) .question-attachment-remove:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.28); transform: translateY(-1px); } @media (max-width: 700px) { :is(body.tonefixer_question_email) .question-compose-actions { left: 16px; right: 16px; bottom: 14px; justify-content: space-between; } :is(body.tonefixer_question_email) .question-compose-guide { font-size: 12px; } } /* 파일 선택 화면 업로드 영역을 약간 강조 */ .file-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; flex: 1; min-height: 240px; padding: 28px 20px; background: rgba(var(--brand), 0.06); border: 2px dashed rgba(var(--brand), 0.4); border-radius: 16px; /* 버튼과 동일 */ cursor: pointer; text-align: center; transition: all 0.18s ease; } .file-upload:hover { background: rgba(var(--brand), 0.12); border-color: rgba(var(--brand), 0.6); transform: translateY(-1px); } .file-upload.drag-over { background: rgba(var(--brand), 0.14); border-color: rgba(var(--brand), 0.72); transform: translateY(-1px); } .file-upload input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; } .file-name { display: block; color: var(--text); font-size: 14px; } .file-name.selected { color: var(--text); } :is(body.upload, body.tonefixer_upload) .upload-file-card, :is(body.landing, body.tonefixer_landing) .examples .upload-file-card { display: flex; flex-direction: column; } /* pricing/email KPI 강조 */ :is(body.pricing, body.tonefixer_pricing) .kpi, :is(body.quote, body.tonefixer_quote) .kpi, :is(body.email, body.tonefixer_email) .kpi { font-size: 38px; } /* done 페이지 버튼 자연스럽게 */ :is(body.done, body.tonefixer_done) a.btn { margin-top: 6px; } /* ----------------------------- Small screens ----------------------------- */ @media (max-width: 520px) { .container { padding: 22px 14px 36px; } .btn.big { width: 100%; } }