/* ============================================================
   CamPick SPA — merged stylesheet
   Shared rules live at the top (unscoped). Anything that only
   applies to one screen is namespaced under its .view-* root so
   screens can never leak styles into each other.
   ============================================================ */

:root{
  --design-w: 430;
  --color-bg: #fbfbfe;
  --color-surface: #ffffff;
  --color-title: #111111;
  --color-accent: #4d31fc;
  --color-accent-2: #4732f7;
  --color-body: #595e90;
  --color-muted: #9a9dc0;
  --color-border: rgba(89,94,144,0.14);
  --color-border-strong: rgba(89,94,144,0.5);
  --color-btn-from: #3d70fb;
  --color-btn-to: #7e3efc;
  --color-logo-from: #00ddff;
  --color-logo-to: #9564fb;
  --grad-primary: linear-gradient(90deg,#3d70fb,#7e3efc);
  --shadow-card: 0 2px 14px rgba(31,29,90,0.07);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 64px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; background:var(--color-bg); }
body{
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  min-height:100vh; min-height:100dvh;
}
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

.icon{
  display:inline-block;
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  flex-shrink:0;
}

/* ── shared tab-screen shell (home / search / community / save / mypage) ── */
.app-wrap{ max-width:480px; margin:0 auto; position:relative; }
.app{ max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; background:var(--color-bg); position:relative; padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); }

/* ── shared bottom navigation ── */
.bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--color-surface); border-top:1px solid var(--color-border); display:flex; padding-bottom:var(--safe-bottom); box-shadow: 0 -4px 16px rgba(31,29,90,0.05); }
.nav-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:9px 4px 8px; color:var(--color-muted); cursor:pointer; }
.nav-item .icon{ width:22px; height:22px; }
.nav-item span{ font-size:10.5px; font-weight:600; }
.nav-item.active{ color:var(--color-accent-2); }

/* ── shared card list primitives (search / save / home recommendations) ── */
.tag{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; }
.tag-row{ display:flex; align-items:center; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
.deadline{ font-size:11.5px; font-weight:700; color:var(--color-muted); }
.deadline.urgent{ color:#ef4444; }
.stat-row{ display:flex; align-items:center; gap:12px; }
.stat{ display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--color-muted); font-weight:600; }
.stat .icon{ width:13px; height:13px; }

.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-title h2{ margin:0; font-size: clamp(17px, 4.6vw, 19px); font-weight:800; color:var(--color-title); letter-spacing:-0.02em; }
.section-title .more{ font-size:12.5px; color:var(--color-muted); font-weight:600; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  .track, .cta-button{ transition:none; }
}

/* ════════════════════════════════════════════════════════════
   화면: 온보딩
   ════════════════════════════════════════════════════════════ */
.view-onboarding{
  position:fixed; inset:0;
  display:flex; justify-content:center;
  background: var(--color-bg);
  overflow:hidden;
}
.view-onboarding .app-shell{
  position:relative; width:100%; max-width:480px; height:100%; overflow:hidden; background:var(--color-bg);
}
.view-onboarding .track{ display:flex; width:300%; height:100%; transition: transform .5s cubic-bezier(.65,0,.35,1); will-change: transform; }
.view-onboarding .screen{ flex:0 0 33.3333%; width:33.3333%; height:100%; overflow:hidden; display:flex; flex-direction:column; position:relative; padding-top:var(--safe-top); padding-bottom:var(--safe-bottom); }

.view-onboarding .back-btn{ appearance:none; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; width: clamp(40px, 11vw, 48px); height: clamp(40px, 11vw, 48px); margin: clamp(12px, 4dvh, 40px) 0 0 clamp(8px, 2vw, 14px); color: var(--color-title); border-radius:50%; flex-shrink:0; }
.view-onboarding .back-btn:hover{ background: rgba(89,94,144,0.08); }
.view-onboarding .back-btn .icon{ width:22px; height:22px; }

.view-onboarding .spacer{ flex:1 1 auto; }

.view-onboarding .cta-section{ padding: 0 20px clamp(10px, 2.5dvh, 24px); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); flex-shrink:0; }
.view-onboarding .cta-button{ width:100%; min-height:48px; height: clamp(48px, 8dvh, 74px); border:none; border-radius:12px; background: linear-gradient(90deg, var(--color-btn-from), var(--color-btn-to)); color:#fff; font-weight:500; font-size: clamp(16px, 4.65vw, 20px); letter-spacing:-0.025em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition: transform .15s ease, filter .15s ease, opacity .2s ease; }
.view-onboarding .cta-button:hover{ filter:brightness(1.05); }
.view-onboarding .cta-button:active{ transform: scale(0.98); }
.view-onboarding .cta-button:focus-visible{ outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px rgba(61,112,251,0.5); }
.view-onboarding .cta-button:disabled{ opacity:.45; cursor:not-allowed; transform:none; filter:none; }

.view-onboarding .logo-section{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding: clamp(8px, 3dvh, 26px) 0 clamp(4px, 1dvh, 12px); flex-shrink:0; }
.view-onboarding .logo-mark{ width: clamp(90px, 22dvh, 190px); aspect-ratio: 96/108.255; }
.view-onboarding .logo-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.view-onboarding .logo-text{ font-family:'Outfit', sans-serif; font-weight:800; font-size: clamp(22px, 6dvh, 37px); line-height:1.1; background: linear-gradient(180deg, var(--color-logo-from) 3.3%, var(--color-logo-to) 91.4%); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; margin-top:-8px; text-align:center; }
.view-onboarding .s1-title{ text-align:center; padding: clamp(4px,1.5dvh,14px) clamp(20px,8vw,40px) 0; flex-shrink:0; }
.view-onboarding .s1-title p{ margin:0 0 4px; font-weight:700; font-size:clamp(20px,5dvh,30px); line-height:1.3; letter-spacing:-0.015em; color:var(--color-title); }
.view-onboarding .s1-title p:last-child{ margin-bottom:0; }
.view-onboarding .s1-title .accent{ color:var(--color-accent); }
.view-onboarding .s1-sub{ text-align:center; padding: clamp(6px,2dvh,18px) clamp(24px,10vw,50px); flex-shrink:0; }
.view-onboarding .s1-sub p{ margin:0; font-weight:500; font-size:clamp(12px,2.8dvh,15px); line-height:1.4; letter-spacing:-0.015em; color:var(--color-body); }
.view-onboarding .hero-image{ width:100%; flex:1 1 auto; min-height:0; position:relative; overflow:hidden; margin-top:clamp(4px,1dvh,12px); }
.view-onboarding .hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }

.view-onboarding .s2-body{ padding: clamp(10px, 3dvh, 36px) clamp(20px, 6vw, 32px) 0; flex-shrink:0; }
.view-onboarding .s2-body h1{ margin:0 0 10px; font-weight:700; font-size:clamp(20px, min(6.3vw, 3.6dvh), 30px); line-height:1.3; letter-spacing:-0.015em; color:var(--color-title); }
.view-onboarding .s2-body p{ margin:0; font-weight:500; font-size:clamp(12px, min(3.5vw, 2dvh), 15px); line-height:1.4; color:var(--color-body); }
.view-onboarding .school-input{ margin: clamp(10px, 3dvh, 32px) clamp(20px, 6vw, 32px) 0; border: 1px solid var(--color-border-strong); border-radius: 12px; padding: clamp(10px, 2dvh, 18px) clamp(14px, 4vw, 18px); display:flex; align-items:center; gap: 12px; flex-shrink:0; }
.view-onboarding .school-input .icon{ width:26px; height:26px; color: var(--color-body); }
.view-onboarding .school-input input{ border:none; outline:none; background:transparent; font-family:inherit; width:100%; font-weight:500; font-size: clamp(13px, 3.6vw, 15px); color: var(--color-title); letter-spacing:-0.02em; }
.view-onboarding .school-input input::placeholder{ color: var(--color-body); opacity:.55; }
.view-onboarding .school-input .placeholder-sub{ display:block; font-size:0.82em; margin-top:2px; color:var(--color-body); opacity:.55; max-height:20px; overflow:hidden; transition: opacity .2s ease, max-height .2s ease, margin-top .2s ease; }
.view-onboarding .school-input .placeholder-sub.hide{ opacity:0; max-height:0; margin-top:0; }
.view-onboarding .school-input.error{ border-color:#ef4444; }
.view-onboarding .hint-link{ display:block; text-align:center; margin-top: clamp(6px, 1.5dvh, 20px); font-weight:600; font-size: clamp(13px, 3.6vw, 15px); color: var(--color-body); letter-spacing:-0.015em; text-decoration:none; flex-shrink:0; }
.view-onboarding .s2-hero{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding: clamp(4px,1dvh,16px) 40px; }
.view-onboarding .s2-hero img{ width:100%; max-width:266px; max-height:100%; height:auto; object-fit:contain; }

.view-onboarding .s3-top-row{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding-top: max(12px, var(--safe-top)); flex-shrink:0; }
.view-onboarding .s3-top-row .back-btn{ grid-column:1; justify-self:start; margin:0 0 0 clamp(4px,1.5vw,10px); }
.view-onboarding .s3-top-row .stepper{ grid-column:2; justify-self:center; }
.view-onboarding .s3-top-row .s3-top-row-spacer{ grid-column:3; }
.view-onboarding .stepper{ display:flex; align-items:center; gap:5px; }
.view-onboarding .stepper .dot{ width: clamp(20px, min(6vw, 4.6dvh), 26px); height: clamp(20px, min(6vw, 4.6dvh), 26px); border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(71,50,247,0.12); color: var(--color-accent-2); font-weight:700; font-size: clamp(11px, 2.6dvh, 13px); flex-shrink:0; }
.view-onboarding .stepper .dot.done{ background: var(--color-accent-2); color:#fff; }
.view-onboarding .stepper .dot.done .icon{ width:13px; height:13px; background-color:#fff; }
.view-onboarding .stepper .dot.current{ background: var(--color-accent-2); color:#fff; }
.view-onboarding .stepper .line{ width: clamp(28px, 9vw, 64px); height:2px; background: var(--color-accent-2); flex-shrink:0; }

.view-onboarding .s3-heading{ padding: clamp(16px,4.5dvh,32px) clamp(20px,6vw,32px) 0; flex-shrink:0; }
.view-onboarding .s3-heading h1{ margin:0 0 8px; font-weight:700; font-size:clamp(20px, min(6.3vw, 3.6dvh), 30px); line-height:1.3; letter-spacing:-0.015em; color:var(--color-title); }
.view-onboarding .s3-heading p{ margin:0; font-weight:500; font-size:clamp(12px, min(3.5vw, 2dvh), 15px); line-height:1.4; color:var(--color-body); }
.view-onboarding .s3-heading .accent{ font-weight:700; color:var(--color-accent); }

.view-onboarding .interest-grid{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.4dvh, 12px); padding: clamp(10px,2.2dvh,26px) clamp(18px,5vw,26px) 0; }
.view-onboarding .tile{ appearance:none; cursor:pointer; position:relative; width:100%; height:100%; min-height:0; border: 1px solid var(--color-border-strong); border-radius: 13px; background: #fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(2px, 1dvh, 10px); transition: border-color .15s ease, background .15s ease, transform .1s ease; font-family:inherit; }
.view-onboarding .tile:active{ transform: scale(0.97); }
.view-onboarding .tile .icon{ width: clamp(20px, 5.5dvh, 38px); height: clamp(20px, 5.5dvh, 38px); color: var(--color-title); transition: color .15s ease; }
.view-onboarding .tile span.label{ font-weight:700; font-size: clamp(11px, 2.3dvh, 14px); color: var(--color-title); text-align:center; }
.view-onboarding .tile .check-dot{ position:absolute; top:8px; right:8px; width:16px; height:16px; border-radius:50%; border: 1.5px solid var(--color-border-strong); background:#fff; display:flex; align-items:center; justify-content:center; }
.view-onboarding .tile .check-dot .icon{ width:10px; height:10px; background-color:#fff; opacity:0; transition:opacity .15s ease; }
.view-onboarding .tile.selected{ border-color: var(--color-accent-2); background: rgba(71,50,247,0.06); }
.view-onboarding .tile.selected .icon:not(.check-dot .icon){ color: var(--color-accent-2); }
.view-onboarding .tile.selected span.label{ color: var(--color-accent-2); }
.view-onboarding .tile.selected .check-dot{ background: var(--color-accent-2); border-color: var(--color-accent-2); }
.view-onboarding .tile.selected .check-dot .icon{ opacity:1; }

.view-onboarding .s3-counter{ text-align:center; padding: clamp(6px,1.2dvh,20px) 20px 0; font-weight:600; font-size: clamp(12px,3.2vw,13px); color: var(--color-body); flex-shrink:0; }
.view-onboarding .s3-counter b{ color: var(--color-accent-2); }

/* ════════════════════════════════════════════════════════════
   화면: 홈
   ════════════════════════════════════════════════════════════ */
.view-home .topbar{ padding: calc(var(--safe-top) + 14px) 20px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.view-home .school-pill{ display:flex; align-items:center; gap:6px; min-width:0; }
.view-home .school-pill .icon{ width:16px; height:20px; color:var(--color-accent); }
.view-home .school-pill span{ font-weight:600; font-size: clamp(14px, 3.8vw, 16px); color:var(--color-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 46vw; }
.view-home .school-pill .chev{ width:11px; height:7px; color:var(--color-body); opacity:.6; }
.view-home .topbar-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.view-home .bell-btn{ appearance:none; border:none; background:var(--color-surface); box-shadow:var(--shadow-card); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; cursor:pointer; }
.view-home .bell-btn .icon{ width:19px; height:19px; color:var(--color-title); }
.view-home .bell-btn .dot{ position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:#ff4d6d; border:1.5px solid var(--color-surface); }

.view-home .lang-btn{ appearance:none; border:1px solid var(--color-border); background:var(--color-surface); box-shadow:var(--shadow-card); height:40px; border-radius:20px; padding:0 11px; display:flex; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; }
.view-home .lang-btn .icon{ width:15px; height:15px; color:var(--color-title); }
.view-home .lang-btn .lang-code{ font-size:12.5px; font-weight:700; color:var(--color-title); }
.view-home .lang-btn .chev{ width:9px; height:9px; color:var(--color-body); opacity:.6; }

.view-home .lang-sheet-overlay{ position:fixed; inset:0; background:rgba(17,17,17,0.4); display:flex; align-items:flex-end; justify-content:center; z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.view-home .lang-sheet-overlay.open{ opacity:1; pointer-events:auto; }
.view-home .lang-sheet{ width:100%; max-width:480px; background:var(--color-surface); border-radius:20px 20px 0 0; padding:20px 20px calc(20px + var(--safe-bottom)); transform:translateY(100%); transition:transform .25s cubic-bezier(.65,0,.35,1); }
.view-home .lang-sheet-overlay.open .lang-sheet{ transform:translateY(0); }
.view-home .lang-sheet-title{ font-size:16px; font-weight:800; color:var(--color-title); margin-bottom:10px; }
.view-home .lang-sheet-list{ display:flex; flex-direction:column; gap:2px; }
.view-home .lang-option{ appearance:none; border:none; background:transparent; width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 8px; border-radius:12px; font-size:15px; font-weight:600; color:var(--color-title); cursor:pointer; }
.view-home .lang-option.active{ color:var(--color-accent-2); background:rgba(71,50,247,0.06); }
.view-home .lang-option .icon{ width:16px; height:16px; color:var(--color-accent-2); }

.view-home .search-bar{ margin: 4px 20px 22px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding: 13px 16px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.view-home .search-bar .icon{ width:18px; height:18px; color:var(--color-muted); }
.view-home .search-bar span{ font-size: clamp(13px, 3.6vw, 14px); color:var(--color-muted); font-weight:500; }

.view-home .section{ padding: 6px 20px 0; }

.view-home .pick-scroll{ display:flex; gap:12px; overflow-x:auto; padding: 0 20px 4px; margin: 0 -20px; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.view-home .pick-scroll::-webkit-scrollbar{ display:none; }
.view-home .pick-card{ scroll-snap-align:start; flex:0 0 auto; width: min(78vw, 320px); border-radius:18px; overflow:hidden; position:relative; box-shadow:var(--shadow-card); background-color:#3d70fb; background-image:linear-gradient(135deg,#3d70fb,#7e3efc); background-size:cover; background-position:center; background-repeat:no-repeat; aspect-ratio: 320/150; display:flex; align-items:flex-end; }
.view-home .pick-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%); }
.view-home .pick-card .icon-wm{ position:absolute; right:14px; top:14px; width:56px; height:56px; color:rgba(255,255,255,0.28); }
.view-home .pick-card .pick-text{ position:relative; z-index:1; padding:16px; color:#fff; }
.view-home .pick-card .pick-tag{ font-size:11.5px; font-weight:700; opacity:.85; margin-bottom:4px; }
.view-home .pick-card .pick-title{ font-size: clamp(14px,4vw,16px); font-weight:800; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.view-home .pick-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.view-home .pick-dots span{ width:6px; height:6px; border-radius:50%; background:var(--color-border); transition: background .25s ease, width .25s ease; }
.view-home .pick-dots span.active{ background:var(--color-accent-2); width:16px; border-radius:3px; }

.view-home .list-card{ display:flex; align-items:center; gap:14px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:14px; box-shadow:var(--shadow-card); cursor:pointer; transition: transform .12s ease; }
.view-home .list-card:active{ transform: scale(0.98); }
.view-home .list-card + .list-card{ margin-top:12px; }
.view-home .thumb{ flex-shrink:0; width: clamp(64px,17vw,80px); height: clamp(64px,17vw,80px); border-radius:12px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.view-home .thumb .icon{ width:28px; height:28px; color:#fff; opacity:.9; }
.view-home .rec-chips{ display:flex; flex-wrap:wrap; gap:6px; margin: -2px 0 12px; }
.view-home .list-body{ min-width:0; flex:1; }
.view-home .list-title{ font-weight:700; font-size: clamp(14px,3.8vw,15.5px); color:var(--color-title); line-height:1.35; margin:0 0 8px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; letter-spacing:-0.01em; }
.view-home .list-body .tag-row{ margin-bottom:7px; }

/* ════════════════════════════════════════════════════════════
   화면: 탐색 (검색)
   ════════════════════════════════════════════════════════════ */
.view-search .topbar{ padding: calc(var(--safe-top) + 14px) 20px 6px; }
.view-search .topbar h1{ margin:0; font-size: clamp(20px,5.4vw,24px); font-weight:800; color:var(--color-title); letter-spacing:-0.02em; }

.view-search .search-bar{ margin: 12px 20px 16px; background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:14px; padding: 4px 14px; display:flex; align-items:center; gap:10px; transition: border-color .15s ease; }
.view-search .search-bar:focus-within{ border-color: var(--color-accent-2); }
.view-search .search-bar .icon{ width:18px; height:18px; color:var(--color-muted); flex-shrink:0; }
.view-search .search-bar input{ border:none; outline:none; background:transparent; width:100%; font-family:inherit; font-size: clamp(13px,3.6vw,14.5px); font-weight:500; color:var(--color-title); padding:11px 0; }
.view-search .search-bar input::placeholder{ color:var(--color-muted); }

.view-search .chip-scroll{ display:flex; gap:8px; overflow-x:auto; padding:0 20px 4px; margin:0 -20px 22px; -ms-overflow-style:none; scrollbar-width:none; }
.view-search .chip-scroll::-webkit-scrollbar{ display:none; }
.view-search .chip{ flex:0 0 auto; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-body); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px; white-space:nowrap; cursor:pointer; }

.view-search .filter-row{ display:flex; align-items:center; justify-content:space-between; padding: 0 20px 14px; }
.view-search .segmented{ display:flex; background:#f1f2fa; border-radius:10px; padding:3px; gap:2px; }
.view-search .segmented button{ appearance:none; border:none; background:transparent; padding:7px 12px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--color-muted); cursor:pointer; }
.view-search .segmented button.active{ background:var(--color-surface); color:var(--color-title); box-shadow:0 1px 4px rgba(31,29,90,0.12); }
.view-search .sort-btn{ display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--color-body); cursor:pointer; }
.view-search .sort-btn .icon{ width:14px; height:14px; }

.view-search .list, .view-save .list{ padding:0 20px; display:flex; flex-direction:column; gap:12px; }
.view-search .card, .view-save .card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:16px; box-shadow:var(--shadow-card); cursor:pointer; transition:transform .12s ease; }
.view-search .card:active, .view-save .card:active{ transform:scale(0.98); }
.view-search .sep{ color:var(--color-border); font-size:11px; }
.view-search .card-title, .view-save .card-title{ font-weight:800; font-size: clamp(15px,4vw,16.5px); color:var(--color-title); margin:0 0 6px; letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.view-search .card-desc, .view-save .card-desc{ font-size: clamp(12.5px,3.4vw,13.5px); color:var(--color-body); line-height:1.5; margin:0 0 12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.view-search .card-foot, .view-save .card-foot{ display:flex; align-items:center; justify-content:space-between; }

/* ════════════════════════════════════════════════════════════
   화면: 커뮤니티
   ════════════════════════════════════════════════════════════ */
.view-community .topbar{ padding: calc(var(--safe-top) + 14px) 20px 6px; }
.view-community .topbar h1{ margin:0; font-size: clamp(20px,5.4vw,24px); font-weight:800; color:var(--color-title); letter-spacing:-0.02em; }

.view-community .tab-row{ display:flex; gap:22px; padding: 14px 20px 14px; border-bottom:1px solid var(--color-border); margin-bottom:20px; }
.view-community .tab{ font-size: clamp(13.5px,3.7vw,14.5px); font-weight:700; color:var(--color-muted); cursor:pointer; padding-bottom:12px; margin-bottom:-1px; border-bottom:2px solid transparent; white-space:nowrap; }
.view-community .tab.active{ color:var(--color-title); border-color:var(--color-accent-2); }

.view-community .section{ padding: 0 20px; }

.view-community .comm-banner{ margin:0 20px 26px; border-radius:20px; padding:22px; background: linear-gradient(135deg,#3d70fb,#7e3efc); color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-card); cursor:pointer; }
.view-community .comm-banner .icon-wm{ position:absolute; right:-6px; bottom:-10px; width:100px; height:100px; color:rgba(255,255,255,0.16); }
.view-community .comm-banner .eyebrow{ font-size:12px; font-weight:700; opacity:.85; margin-bottom:6px; }
.view-community .comm-banner h3{ margin:0 0 8px; font-size: clamp(18px,5vw,21px); font-weight:800; letter-spacing:-0.02em; }
.view-community .comm-banner .members{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; opacity:.9; }
.view-community .comm-banner .members .icon{ width:14px; height:14px; }

.view-community .post-scroll{ display:flex; gap:12px; overflow-x:auto; padding: 0 20px 4px; margin: 0 -20px 30px; -ms-overflow-style:none; scrollbar-width:none; }
.view-community .post-scroll::-webkit-scrollbar{ display:none; }
.view-community .post-card{ scroll-snap-align:start; flex:0 0 auto; width:min(62vw,220px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:16px; box-shadow:var(--shadow-card); cursor:pointer; }
.view-community .post-tag{ display:inline-block; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; background:#eef0ff; color:#4338ca; margin-bottom:10px; }
.view-community .mine-badge{ display:inline-block; font-size:10.5px; font-weight:700; padding:3px 7px; border-radius:6px; background:rgba(71,50,247,0.08); color:var(--color-accent-2); margin:0 0 10px 5px; }
.view-community .post-title{ font-size:14px; font-weight:700; color:var(--color-title); line-height:1.4; margin:0 0 14px; min-height:2.8em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.view-community .recruit-list{ display:flex; flex-direction:column; gap:12px; padding: 0 20px; }
.view-community .recruit-card{ display:flex; align-items:center; gap:14px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow-card); cursor:pointer; }
.view-community .recruit-body{ flex:1; min-width:0; }
.view-community .recruit-tag{ display:inline-block; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; margin-bottom:8px; }
.view-community .recruit-title{ font-weight:700; font-size: clamp(14px,3.8vw,15px); color:var(--color-title); line-height:1.35; margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.view-community .recruit-org{ font-size:12px; color:var(--color-muted); font-weight:600; }
.view-community .recruit-cap{ flex-shrink:0; text-align:center; }
.view-community .recruit-cap .num{ font-size:13px; font-weight:800; color:var(--color-accent-2); white-space:nowrap; }
.view-community .cap-bar{ width:44px; height:4px; border-radius:2px; background:#eceafd; margin-top:6px; overflow:hidden; }
.view-community .cap-bar-fill{ height:100%; background:var(--grad-primary); border-radius:2px; }

.view-community .fab{ position:fixed; right:max(20px, calc((100vw - 480px)/2 + 20px)); bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); background:var(--grad-primary); color:#fff; border:none; border-radius:999px; padding:14px 18px 14px 16px; display:flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; box-shadow:0 8px 20px rgba(77,49,252,0.35); cursor:pointer; z-index:15; transition: transform .12s ease, box-shadow .12s ease; }
.view-community .fab:hover{ box-shadow:0 10px 24px rgba(77,49,252,0.42); }
.view-community .fab:active{ transform:scale(0.94); }
.view-community .fab .icon{ width:17px; height:17px; background-color:#fff; }

/* ════════════════════════════════════════════════════════════
   화면: 글쓰기
   ════════════════════════════════════════════════════════════ */
.view-write .app{ padding-bottom: calc(90px + var(--safe-bottom)); }
.view-write .topbar{ position:sticky; top:0; z-index:10; background:var(--color-bg); padding: calc(var(--safe-top) + 12px) 8px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-border); }
.view-write .topbar h1{ margin:0; font-size:16.5px; font-weight:800; color:var(--color-title); letter-spacing:-0.02em; }
.view-write .round-btn{ appearance:none; width:38px; height:38px; border-radius:50%; background:transparent; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--color-title); transition: background .15s ease, transform .1s ease; }
.view-write .round-btn:hover{ background: rgba(89,94,144,0.08); }
.view-write .round-btn:active{ transform: scale(0.92); }
.view-write .round-btn .icon{ width:20px; height:20px; }
.view-write .topbar .spacer{ width:38px; height:38px; }

.view-write .form-wrap{ padding: 18px 20px 0; }
.view-write .field-group{ margin-bottom:22px; }
.view-write .field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--color-body); margin-bottom:10px; }

.view-write .category-row{ display:flex; gap:8px; flex-wrap:wrap; }
.view-write .category-chip{ appearance:none; cursor:pointer; border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-body); font-size:13px; font-weight:700; padding:9px 15px; border-radius:999px; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease; }
.view-write .category-chip:active{ transform: scale(0.96); }
.view-write .category-chip.selected{ border-color: var(--cat-color, var(--color-accent-2)); background: var(--cat-bg, rgba(71,50,247,0.08)); color: var(--cat-color, var(--color-accent-2)); }

.view-write .title-input{ width:100%; border:none; border-bottom:1.5px solid var(--color-border); outline:none; background:transparent; padding:8px 2px 12px; font-size:17px; font-weight:700; color:var(--color-title); letter-spacing:-0.01em; transition: border-color .15s ease; font-family:inherit; }
.view-write .title-input::placeholder{ color:var(--color-muted); font-weight:600; }
.view-write .title-input:focus{ border-color:var(--color-accent-2); }

.view-write .content-input{ width:100%; min-height:180px; resize:none; border:none; outline:none; background:transparent; padding:2px; font-size:14.5px; line-height:1.65; color:var(--color-title); font-family:inherit; }
.view-write .content-input::placeholder{ color:var(--color-muted); }

.view-write .char-count{ display:block; text-align:right; font-size:11.5px; color:var(--color-muted); font-weight:600; margin-top:6px; }
.view-write .char-count.limit{ color:#ef4444; }

.view-write .photo-row{ display:flex; gap:10px; flex-wrap:wrap; }
.view-write .photo-add{ appearance:none; cursor:pointer; width:72px; height:72px; border-radius:14px; border:1.5px dashed var(--color-border); background:var(--color-surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--color-muted); transition: border-color .15s ease, transform .1s ease; flex-shrink:0; }
.view-write .photo-add:active{ transform: scale(0.95); }
.view-write .photo-add .icon{ width:18px; height:18px; }
.view-write .photo-add span{ font-size:10.5px; font-weight:700; }
.view-write .photo-add:disabled{ opacity:.4; cursor:not-allowed; }
.view-write .photo-thumb{ position:relative; width:72px; height:72px; border-radius:14px; overflow:hidden; flex-shrink:0; box-shadow:var(--shadow-card); }
.view-write .photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.view-write .photo-thumb .remove{ position:absolute; top:3px; right:3px; width:19px; height:19px; border-radius:50%; background:rgba(17,17,17,0.55); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.view-write .photo-thumb .remove .icon{ width:9px; height:9px; background-color:#fff; }

.view-write .cta-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--color-surface); border-top:1px solid var(--color-border); padding: 12px 20px calc(12px + var(--safe-bottom)); }
.view-write .cta-inner{ max-width:480px; margin:0 auto; }
.view-write .cta-btn{ width:100%; border:none; border-radius:14px; background:var(--grad-primary); color:#fff; font-weight:700; font-size:16px; padding:16px; cursor:pointer; transition: transform .1s ease, opacity .2s ease; display:flex; align-items:center; justify-content:center; gap:8px; }
.view-write .cta-btn:active{ transform: scale(0.98); }
.view-write .cta-btn:disabled{ opacity:.4; cursor:not-allowed; }
.view-write .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; animation: write-spin .7s linear infinite; display:none; }
.view-write .cta-btn.loading .spinner{ display:inline-block; }
@keyframes write-spin{ to{ transform: rotate(360deg); } }

.view-write .toast{ position:fixed; left:50%; bottom: calc(96px + var(--safe-bottom)); transform: translateX(-50%) translateY(10px); background:#111111; color:#fff; font-size:13.5px; font-weight:600; padding:12px 20px; border-radius:999px; box-shadow:0 8px 20px rgba(17,17,17,0.25); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:30; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.view-write .toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.view-write .toast .icon{ width:15px; height:15px; background-color:#4ade80; flex-shrink:0; }

/* ════════════════════════════════════════════════════════════
   화면: 상세보기
   ════════════════════════════════════════════════════════════ */
.view-detail .app{ padding-bottom: calc(84px + var(--safe-bottom)); }
.view-detail .hero{ width:100%; aspect-ratio: 390/230; background: linear-gradient(135deg,#3d70fb,#7e3efc); background-size:cover; background-position:center; position:relative; }
.view-detail .hero .icon-wm{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; color:rgba(255,255,255,0.35); }
.view-detail .hero-topbar{ position:absolute; top:0; left:0; right:0; padding: calc(var(--safe-top) + 12px) 16px 0; display:flex; align-items:center; justify-content:space-between; }
.view-detail .round-btn{ width:38px; height:38px; border-radius:50%; background:rgba(17,17,17,0.35); backdrop-filter: blur(6px); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.view-detail .round-btn .icon{ width:19px; height:19px; color:#fff; }
.view-detail .round-btn.saved{ background:rgba(255,255,255,0.9); }
.view-detail .round-btn.saved .icon{ color:var(--color-accent-2); }

.view-detail .content{ padding: 20px 20px 0; }
.view-detail .cat-badge{ display:inline-block; font-size:12px; font-weight:700; padding:5px 11px; border-radius:8px; background:#eef0ff; color:#4338ca; margin-bottom:12px; }
.view-detail h1.title{ margin:0 0 10px; font-size: clamp(20px,5.6vw,24px); font-weight:800; color:var(--color-title); line-height:1.35; letter-spacing:-0.02em; }
.view-detail .title-meta{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.view-detail .title-meta .deadline{ font-size:13px; font-weight:700; color:#ef4444; }
.view-detail .dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--color-border); }
.view-detail .subtag{ font-size:13px; font-weight:600; color:var(--color-body); }

.view-detail .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:18px; box-shadow:var(--shadow-card); margin-bottom:26px; }
.view-detail .info-item{ display:flex; align-items:flex-start; gap:10px; }
.view-detail .info-item .icon-box{ width:30px; height:30px; border-radius:8px; background:#f1f2fa; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.view-detail .info-item .icon-box .icon{ width:15px; height:15px; color:var(--color-accent-2); }
.view-detail .info-item .info-text{ min-width:0; }
.view-detail .info-item .info-label{ font-size:11.5px; color:var(--color-muted); font-weight:600; margin-bottom:3px; }
.view-detail .info-item .info-value{ font-size:13px; color:var(--color-title); font-weight:700; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.view-detail .section{ margin-bottom:26px; }
.view-detail .section h2{ margin:0 0 12px; font-size:16.5px; font-weight:800; color:var(--color-title); letter-spacing:-0.01em; }
.view-detail .section p.desc{ margin:0; font-size:14px; line-height:1.65; color:var(--color-body); }

.view-detail .hashtag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.view-detail .hashtag{ font-size:12.5px; font-weight:700; color:var(--color-accent-2); background:#f2ecff; padding:6px 12px; border-radius:999px; }

.view-detail .period-card{ display:flex; align-items:center; gap:12px; background:#f8f8fd; border-radius:14px; padding:16px; margin-bottom:8px; }
.view-detail .period-card .icon-box{ width:36px; height:36px; border-radius:10px; background:var(--color-surface); box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.view-detail .period-card .icon-box .icon{ width:17px; height:17px; color:var(--color-accent-2); }
.view-detail .period-card .p-label{ font-size:11.5px; color:var(--color-muted); font-weight:600; margin-bottom:3px; }
.view-detail .period-card .p-value{ font-size:13.5px; color:var(--color-title); font-weight:700; }

.view-detail .cta-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--color-surface); border-top:1px solid var(--color-border); padding: 12px 20px calc(12px + var(--safe-bottom)); }
.view-detail .cta-inner{ max-width:480px; margin:0 auto; }
.view-detail .cta-btn{ width:100%; border:none; border-radius:14px; background:var(--grad-primary); color:#fff; font-weight:700; font-size:16px; padding:16px; cursor:pointer; }
.view-detail .cta-btn.danger{ background:#fef2f2; color:#dc2626; }

/* 내가 쓴 글 상세 */
.view-detail .post-body{ margin:0 0 26px; font-size:14.5px; line-height:1.7; color:var(--color-body); white-space:pre-wrap; word-break:break-word; }
.view-detail .post-photos{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.view-detail .post-photos img{ width:100%; border-radius:14px; display:block; }

/* ════════════════════════════════════════════════════════════
   화면: 저장
   ════════════════════════════════════════════════════════════ */
.view-save .topbar{ padding: calc(var(--safe-top) + 14px) 20px 6px; display:flex; align-items:center; justify-content:space-between; }
.view-save .topbar h1{ margin:0; font-size: clamp(20px,5.4vw,24px); font-weight:800; color:var(--color-title); letter-spacing:-0.02em; }
.view-save .edit-btn{ appearance:none; border:none; background:transparent; font-size:13.5px; font-weight:700; color:var(--color-accent-2); cursor:pointer; padding:6px 4px; }

.view-save .meta-row{ display:flex; align-items:center; justify-content:space-between; padding: 14px 20px 18px; }
.view-save .meta-row .count{ font-size:13.5px; font-weight:700; color:var(--color-body); }
.view-save .meta-row .count b{ color:var(--color-title); }
.view-save .sort-btn{ display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--color-body); cursor:pointer; }
.view-save .sort-btn .icon{ width:14px; height:14px; }

.view-save .card{ display:flex; align-items:flex-start; gap:12px; }
.view-save .checkbox{ display:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--color-border); flex-shrink:0; margin-top:2px; align-items:center; justify-content:center; background:#fff; }
.view-save .checkbox .icon{ width:11px; height:11px; background-color:#fff; opacity:0; }
.view-save .checkbox.checked{ background:var(--color-accent-2); border-color:var(--color-accent-2); }
.view-save .checkbox.checked .icon{ opacity:1; }
.view-save .edit-mode .checkbox{ display:flex; }
.view-save .card-main{ flex:1; min-width:0; }
.view-save .bookmark-btn{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:#f1f2fa; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; }
.view-save .bookmark-btn .icon{ width:15px; height:15px; color:var(--color-accent-2); }
.view-save .edit-mode .bookmark-btn{ display:none; }

/* ════════════════════════════════════════════════════════════
   화면: 마이페이지
   ════════════════════════════════════════════════════════════ */
.view-mypage .topbar{ padding: calc(var(--safe-top) + 14px) 20px 6px; }
.view-mypage .topbar h1{ margin:0; font-size: clamp(20px,5.4vw,24px); font-weight:800; color:var(--color-title); letter-spacing:-0.02em; }

.view-mypage .profile-card{ margin: 16px 20px 18px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:20px; padding:20px; box-shadow:var(--shadow-card); }
.view-mypage .profile-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.view-mypage .avatar{ width:60px; height:60px; border-radius:50%; background: linear-gradient(135deg,#3d70fb,#7e3efc); overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-weight:800; font-size:22px; }
.view-mypage .avatar > svg, .view-mypage .avatar > img{ width:100%; height:100%; display:block; object-fit:cover; }
.view-mypage .profile-info{ min-width:0; flex:1; }
.view-mypage .profile-name{ font-size: clamp(17px,4.6vw,19px); font-weight:800; color:var(--color-title); margin:0 0 4px; display:flex; align-items:center; gap:6px; }
.view-mypage .profile-dept{ font-size:13px; color:var(--color-body); font-weight:500; margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view-mypage .verified-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#059669; background:#e8fbf0; padding:3px 8px; border-radius:999px; }
.view-mypage .verified-badge .icon{ width:11px; height:11px; }

.view-mypage .stat-row{ border-top:1px solid var(--color-border); padding-top:16px; }
.view-mypage .stat-item{ flex:1; text-align:center; }
.view-mypage .stat-item + .stat-item{ border-left:1px solid var(--color-border); }
.view-mypage .stat-num{ font-size: clamp(16px,4.3vw,18px); font-weight:800; color:var(--color-title); margin-bottom:3px; }
.view-mypage .stat-label{ font-size:11.5px; color:var(--color-muted); font-weight:600; }

.view-mypage .mypage-section{ margin: 0 20px 18px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow-card); }
.view-mypage .section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.view-mypage .section-head h2{ margin:0; font-size:15.5px; font-weight:800; color:var(--color-title); }
.view-mypage .link-btn{ font-size:12.5px; font-weight:700; color:var(--color-accent-2); background:none; border:none; cursor:pointer; }

.view-mypage .chip-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.view-mypage .chip{ background:#f1f2fa; color:var(--color-body); font-size:12.5px; font-weight:700; padding:8px 13px; border-radius:999px; }

.view-mypage .verify-row{ display:flex; align-items:center; gap:12px; }
.view-mypage .verify-icon{ width:42px; height:42px; border-radius:12px; background:#e8fbf0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.view-mypage .verify-icon .icon{ width:20px; height:20px; color:#059669; }
.view-mypage .verify-text b{ display:block; font-size:14px; color:var(--color-title); margin-bottom:2px; }
.view-mypage .verify-text span{ font-size:12px; color:var(--color-muted); }

.view-mypage .section-label{ padding: 20px 24px 8px; font-size:12px; font-weight:700; color:var(--color-muted); }
.view-mypage .menu-list{ margin: 0 20px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:18px; box-shadow:var(--shadow-card); overflow:hidden; }
.view-mypage .menu-item{ display:flex; align-items:center; gap:13px; padding:15px 18px; cursor:pointer; }
.view-mypage .menu-item + .menu-item{ border-top:1px solid var(--color-border); }
.view-mypage .menu-item .icon-box{ width:32px; height:32px; border-radius:9px; background:#f1f2fa; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.view-mypage .menu-item .icon-box .icon{ width:16px; height:16px; color:var(--color-body); }
.view-mypage .menu-item span.label{ flex:1; font-size:14px; font-weight:600; color:var(--color-title); }
.view-mypage .menu-item .chev{ width:14px; height:14px; color:var(--color-muted); }
.view-mypage .menu-item.danger span.label{ color:#ef4444; }
.view-mypage .menu-item.danger .icon-box{ background:#fef2f2; }
.view-mypage .menu-item.danger .icon-box .icon{ color:#ef4444; }