:root {
  --bg: #F7F8FA;
  --c1: #FFF;
  --c2: #F0F1F5;
  --c3: #E5E7EB;
  --tx: #1A1D26;
  --tx2: #6B7280;
  --tx3: #9CA3AF;
  --ac: #2563EB;
  --acl: #DBEAFE;
  --acd: #1D4ED8;
  --ok: #10B981;
  --okl: #D1FAE5;
  --wn: #F59E0B;
  --wnl: #FEF3C7;
  --dn: #EF4444;
  --bd: #E5E7EB;
  --r2: 12px;
  --r3: 18px;
  --rf: 100px;
}

[data-theme=dark] {
  --bg: #0F1117;
  --c1: #1A1D26;
  --c2: #22252F;
  --c3: #2D3140;
  --tx: #F3F4F6;
  --tx2: #9CA3AF;
  --tx3: #6B7280;
  --ac: #3B82F6;
  --acl: #1E3A5F;
  --acd: #60A5FA;
  --okl: #064E3B;
  --wnl: #78350F;
  --bd: #2D3140;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

#app {
  width: 375px;
  height: 812px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  border-radius: 44px;
  box-shadow: 0 0 0 3px #2a2a2a, 0 24px 80px rgba(0, 0, 0, .6);
}

.sc {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: none;
  flex-direction: column;
}

.sc.on {
  display: flex;
  animation: si .28s ease;
}

@keyframes si {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bi {
  0% {
    transform: scale(.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes sp {
  to {
    transform: rotate(360deg);
  }
}

.sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  flex-shrink: 0;
}

.hd {
  display: flex;
  align-items: center;
  padding: 2px 16px 10px;
  flex-shrink: 0;
}

.hb {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--tx);
  cursor: pointer;
  border-radius: 50%;
}

.hb:active {
  background: var(--c2);
}

.hb svg {
  width: 20px;
  height: 20px;
}

.ht {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
  margin-right: 36px;
}

.ct {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ct::-webkit-scrollbar {
  display: none;
}

.bx {
  padding: 10px 20px 18px;
  background: var(--bg);
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}

.bp {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--r2);
  background: var(--ac);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.bp:active {
  transform: scale(.97);
}

.bp:disabled {
  opacity: .4;
}

.bs2 {
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r2);
  background: var(--c1);
  color: var(--tx);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.nv {
  display: flex;
  border-top: 1px solid var(--bd);
  background: var(--c1);
  padding: 5px 0 8px;
  flex-shrink: 0;
}

.ni {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0;
  color: var(--tx3);
  font-size: 9px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

.ni.on {
  color: var(--ac);
}

.ni svg {
  width: 21px;
  height: 21px;
}

/* === 검색창 & 인기 검색어 스타일 === */
.search-container {
  padding: 10px 20px;
  position: relative; /* 팝업이 이 박스를 기준으로 뜨게 함 */
  flex-shrink: 0;
  z-index: 10; /* 슬라이더보다 위로 오게 설정 */
}

.search-box {
  display: flex;
  align-items: center;
  background: var(--c2);
  border: 1.5px solid var(--bd);
  border-radius: var(--rf);
  padding: 8px 14px;
  transition: border-color 0.2s;
}

.search-box:focus-within {
  border-color: var(--ac); /* 포커스 시 포인트 컬러 */
  background: var(--c1);
}

/* 기존 .search-icon 내용을 아래처럼 수정/추가하세요 */
.search-icon {
  margin-right: 8px;
  color: var(--tx3);
  display: flex; /* SVG를 중앙에 딱 맞추기 위해 추가 */
  align-items: center;
}

/* SVG 크기를 직접 지정해주는 스타일을 꼭 추가하세요 */
.search-icon svg {
  width: 16px;  /* 입력창 글씨 크기랑 잘 어울리는 크기입니다 */
  height: 16px;
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--tx);
  font-family: inherit;
}

.search-box input::placeholder {
  color: var(--tx3);
}

/* 인기 검색어 팝업 */
.popular-searches {
  position: absolute;
  top: 55px; /* 검색창 바로 아래쪽에 딱 붙게 */
  left: 20px;
  right: 20px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: none; /* 평소엔 숨겨둠 */
  flex-direction: column;
  gap: 10px;
}

.popular-searches.on {
  display: flex; /* class에 'on'이 붙으면 스르륵 나타남 */
  animation: fu 0.2s ease;
}

.ps-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ac);
  margin-bottom: 2px;
}

.ps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-item {
  font-size: 12px;
  color: var(--tx2);
  cursor: pointer;
  padding: 2px 0;
}

.ps-item:active {
  color: var(--ac);
  font-weight: 600;
}
/* === 여기까지 === */

.slider {
  position: relative;
  margin: 8px 20px;
  border-radius: var(--r3);
  overflow: hidden;
  height: 110px;
  flex-shrink: 0;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  color: #fff;
  opacity: 0;
  transition: opacity .5s;
}

.slide.on {
  opacity: 1;
}

.slide-1 {
  background: linear-gradient(135deg, #2563EB, #7C3AED);
}

.slide-2 {
  background: linear-gradient(135deg, #059669, #10B981);
}

.slide-3 {
  background: linear-gradient(135deg, #D97706, #F59E0B);
}

.slide .tg {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255, 255, 255, .2);
  border-radius: var(--rf);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 5px;
  width: fit-content;
}

.slide h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.slide p {
  font-size: 11px;
  opacity: .85;
  margin-top: 2px;
}

.dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}

.dot.on {
  background: #fff;
}

.cat-row {
  display: flex;
  overflow-x: auto;
  gap: 0;
  padding: 0 12px;
  flex-shrink: 0;
  margin: 6px 0;
}

.cat-row::-webkit-scrollbar {
  display: none;
}

.cat-item {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

.cat-item .ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.cat-item span {
  font-size: 9.5px;
  color: var(--tx2);
  font-weight: 500;
  white-space: nowrap;
}

.cat-item .ico.c1 { background: #DBEAFE; }
.cat-item .ico.c2 { background: #FDE68A; }
.cat-item .ico.c3 { background: #D1FAE5; }
.cat-item .ico.c4 { background: #E9D5FF; }
.cat-item .ico.c5 { background: #FEE2E2; }
.cat-item .ico.c6 { background: #CFFAFE; }

.sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 20px;
  margin-bottom: 10px;
}

.sub-card {
  padding: 12px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  cursor: pointer;
  transition: all .15s;
  animation: fu .3s ease backwards;
  position: relative;
}

.sub-card:active {
  border-color: var(--ac);
}

.sub-card .nm {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
}

.sub-card .pr {
  font-size: 11px;
  color: var(--ac);
  margin-top: 2px;
  font-weight: 500;
}

.sub-card .rng {
  font-size: 10px;
  color: var(--tx3);
  margin-top: 1px;
}

.sub-card .beta-b {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: var(--wn);
  padding: 1px 5px;
  border-radius: var(--rf);
}

.mc {
  display: flex;
  gap: 10px;
  padding: 13px;
  background: var(--c1);
  border: 1.5px solid var(--bd);
  border-radius: var(--r2);
  cursor: pointer;
  margin: 0 20px 8px;
  align-items: center;
}

.mc:active {
  border-color: var(--ac);
  background: var(--acl);
}

.mc .mi {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.mc h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
}

.mc p {
  font-size: 11px;
  color: var(--tx2);
  margin-top: 1px;
}

.beta-notice {
  margin: 0 20px 10px;
  padding: 10px;
  background: var(--wnl);
  border-radius: var(--r2);
  font-size: 11px;
  color: var(--tx);
  line-height: 1.5;
}

.br-card {
  margin: 0 20px 8px;
  padding: 12px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  animation: fu .3s ease backwards;
}

.br-card:active {
  border-color: var(--ac);
}

.br-icon {
  width: 40px;
  height: 40px;
  background: var(--acl);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.br-nm {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
}

.br-sp {
  font-size: 10px;
  color: var(--tx2);
  margin-top: 1px;
}

.br-pr {
  font-size: 13px;
  font-weight: 700;
  color: var(--ac);
  margin-top: 2px;
}

.ca {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cb {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.55;
  animation: fu .25s ease backwards;
  white-space: pre-line;
}

.cb.bt {
  align-self: flex-start;
  background: var(--c2);
  color: var(--tx);
  border-bottom-left-radius: 3px;
}

.cb.us {
  align-self: flex-end;
  background: var(--ac);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.co {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-self: flex-start;
  animation: fu .25s ease backwards;
}

.co button {
  padding: 7px 12px;
  border: 1.5px solid var(--bd);
  border-radius: var(--rf);
  background: var(--c1);
  color: var(--tx);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.co button:active,
.co button.sel {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
}

.cib {
  display: flex;
  gap: 6px;
  padding: 8px 20px 14px;
  background: var(--bg);
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}

.ci {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--bd);
  border-radius: var(--rf);
  background: var(--c2);
  color: var(--tx);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.ci:focus {
  border-color: var(--ac);
}

.ci::placeholder {
  color: var(--tx3);
}

.csb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--ac);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.csb svg {
  width: 15px;
  height: 15px;
}

.mf {
  padding: 20px;
}

.ml {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 5px;
  display: block;
}

.minp {
  width: 100%;
  padding: 11px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r2);
  background: var(--c2);
  color: var(--tx);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  margin-bottom: 12px;
}

.minp:focus {
  border-color: var(--ac);
}

.minp::placeholder {
  color: var(--tx3);
}

.rta {
  width: 100%;
  min-height: 70px;
  padding: 10px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r2);
  background: var(--c2);
  color: var(--tx);
  font-size: 12px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.5;
  margin-bottom: 12px;
}

.rta:focus {
  border-color: var(--ac);
}

.rta::placeholder {
  color: var(--tx3);
}

.mh {
  font-size: 10px;
  color: var(--tx2);
  line-height: 1.5;
  padding: 8px;
  background: var(--c2);
  border-radius: 8px;
  margin-bottom: 14px;
}

.per-btns {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.per-btn {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r2);
  background: var(--c1);
  color: var(--tx);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.per-btn.sel {
  border-color: var(--ac);
  background: var(--acl);
  color: var(--ac);
  font-weight: 600;
}

.wc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ws {
  width: 52px;
  height: 52px;
  border: 3px solid var(--bd);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: sp 1s linear infinite;
  margin-bottom: 16px;
}

.wt {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 4px;
}

.wd {
  font-size: 12px;
  color: var(--tx2);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 16px;
}

.wss {
  display: flex;
  gap: 20px;
}

.wsi {
  text-align: center;
}

.wsi .n {
  font-size: 22px;
  font-weight: 800;
  color: var(--ac);
}

.wsi .l {
  font-size: 10px;
  color: var(--tx3);
  margin-top: 1px;
}

.qs {
  padding: 10px 16px;
  background: var(--acl);
  margin: 0 20px 10px;
  border-radius: var(--r2);
}

.qs h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ac);
  margin-bottom: 1px;
}

.qs p {
  font-size: 11px;
  color: var(--tx);
  line-height: 1.4;
}

.qc {
  margin: 0 20px 8px;
  background: var(--c1);
  border: 1.5px solid var(--bd);
  border-radius: var(--r3);
  overflow: hidden;
  animation: fu .35s ease backwards;
}

.qc:active {
  border-color: var(--ac);
}

.qc.best {
  border-color: var(--ac);
}

.qb {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ac);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

.qbd {
  padding: 10px 12px;
}

.qcp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.qav {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--acl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac);
}

.qcn {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
}

.qcm {
  font-size: 9px;
  color: var(--tx2);
  display: flex;
  gap: 4px;
  margin-top: 1px;
}

.qsp {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 6px;
}

.qst {
  padding: 2px 6px;
  background: var(--c2);
  border-radius: var(--rf);
  font-size: 9px;
  color: var(--tx2);
}

.qpr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.qp {
  font-size: 17px;
  font-weight: 800;
  color: var(--ac);
}

.qpu {
  font-size: 10px;
  color: var(--tx2);
}

.qdl {
  font-size: 9px;
  color: var(--tx2);
}

.qsb {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  padding: 9px;
  border: none;
  border-radius: var(--r2);
  background: var(--ac);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.ps {
  padding: 0 20px;
  margin-bottom: 12px;
}

.pst {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 6px;
}

.ppc {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
}

.ppi {
  width: 44px;
  height: 44px;
  background: var(--c2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.ppn {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
}

.pps {
  font-size: 10px;
  color: var(--tx2);
  margin-top: 1px;
}

.ppp {
  font-size: 14px;
  font-weight: 800;
  color: var(--ac);
  margin-top: 2px;
}

.pr {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 11px;
}

.pr .l {
  color: var(--tx2);
}

.pr .v {
  font-weight: 600;
  color: var(--tx);
}

.pr.t {
  border: none;
}

.pr.t .l {
  font-weight: 700;
  color: var(--tx);
  font-size: 13px;
}

.pr.t .v {
  font-weight: 800;
  color: var(--ac);
  font-size: 15px;
}

.pe {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--okl);
  border-radius: var(--r2);
  margin-top: 6px;
  font-size: 10px;
  color: var(--tx);
  line-height: 1.4;
}

.dc {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--c1);
  border: 1.5px solid var(--bd);
  border-radius: var(--r2);
  cursor: pointer;
  margin-bottom: 6px;
  align-items: center;
}

.dc:active,
.dc.sel {
  border-color: var(--ac);
  background: var(--acl);
}

.dc .di {
  font-size: 18px;
  flex-shrink: 0;
}

.dc h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx);
}

.dc p {
  font-size: 9px;
  color: var(--tx2);
  margin-top: 1px;
}

.dc .tag {
  margin-left: auto;
  font-size: 8px;
  font-weight: 600;
  color: var(--ac);
  background: var(--acl);
  padding: 2px 6px;
  border-radius: var(--rf);
  flex-shrink: 0;
}

.tp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--c1);
  border-bottom: 1px solid var(--bd);
}

.tpi {
  width: 36px;
  height: 36px;
  background: var(--acl);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tpn {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx);
}

.tpc {
  font-size: 9px;
  color: var(--tx2);
  margin-top: 1px;
}

.tl {
  padding: 16px 20px;
}

.ti {
  display: flex;
  gap: 10px;
  padding-bottom: 18px;
}

.ti:last-child {
  padding-bottom: 0;
}

.tdc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12px;
  flex-shrink: 0;
}

.td {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bd);
  flex-shrink: 0;
  z-index: 1;
}

.td.on {
  background: var(--ac);
  box-shadow: 0 0 0 3px var(--acl);
}

.td.dn {
  background: var(--ok);
}

.tln {
  width: 2px;
  flex: 1;
  background: var(--bd);
  margin-top: 2px;
}

.tln.dn {
  background: var(--ok);
}

.ttl {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx);
}

.ttl.ft {
  color: var(--tx3);
}

.ttm {
  font-size: 9px;
  color: var(--tx2);
  margin-top: 1px;
}

.ttd {
  font-size: 10px;
  color: var(--tx2);
  margin-top: 2px;
  line-height: 1.4;
}

.xc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.xi {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 14px;
  animation: bi .5s ease;
}

.xt {
  font-size: 17px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 4px;
}

.xd {
  font-size: 11px;
  color: var(--tx2);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 20px;
}

.xb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 220px;
}

.rs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 12px 0;
}

.rs span {
  font-size: 26px;
  cursor: pointer;
  filter: grayscale(1) opacity(.3);
}

.rs span.on {
  filter: none;
}

.mb-c {
  margin: 0 20px 8px;
  padding: 10px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  cursor: pointer;
}

.mb-c:active {
  border-color: var(--ac);
}

.mb-t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.mb-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
}

.mb-s {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--rf);
}

.mb-s.i {
  color: var(--ac);
  background: var(--acl);
}

.mb-s.d {
  color: var(--ok);
  background: var(--okl);
}

.mb-s.w {
  color: var(--wn);
  background: var(--wnl);
}

.mb-i {
  font-size: 10px;
  color: var(--tx2);
  display: flex;
  gap: 5px;
}

.mp-h {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--acl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ac);
}

.mp-nm {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
}

.mp-em {
  font-size: 10px;
  color: var(--tx2);
  margin-top: 1px;
}

.mp-st {
  display: flex;
  margin: 0 20px 12px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  overflow: hidden;
}

.mp-si {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-right: 1px solid var(--bd);
}

.mp-si:last-child {
  border: none;
}

.mp-si .n {
  font-size: 16px;
  font-weight: 800;
  color: var(--ac);
}

.mp-si .l {
  font-size: 9px;
  color: var(--tx2);
  margin-top: 1px;
}

.mp-mn {
  margin: 0 20px;
}

.mp-mi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--bd);
  cursor: pointer;
}

.mp-mi:active .mp-il {
  color: var(--ac);
}

.mp-il {
  font-size: 12px;
  color: var(--tx);
}

.mp-ir {
  font-size: 10px;
  color: var(--tx3);
}

.sp-content {
  padding: 20px;
}

.sp-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 10px;
}

.sp-content p {
  font-size: 12px;
  color: var(--tx2);
  line-height: 1.6;
  margin-bottom: 8px;
}

.sp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 12px;
}

.sp-item .l {
  color: var(--tx2);
}

.sp-item .v {
  font-weight: 500;
  color: var(--tx);
}

.sp-toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--bd);
  position: relative;
  cursor: pointer;
  border: none;
}

.sp-toggle.on {
  background: var(--ac);
}

.sp-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}

.sp-toggle.on::after {
  transform: translateX(18px);
}

.addr-card {
  padding: 10px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  margin-bottom: 6px;
}

.addr-card .nm {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
}

.addr-card .ad {
  font-size: 10px;
  color: var(--tx2);
  margin-top: 2px;
  line-height: 1.4;
}

.addr-card .def {
  display: inline-block;
  margin-top: 3px;
  font-size: 9px;
  color: var(--ac);
  background: var(--acl);
  padding: 1px 6px;
  border-radius: var(--rf);
}

/* 최근 검색어 칩 스타일 */
.recent-chip {
  padding: 6px 14px;
  background: var(--c2);
  border: 1px solid var(--bd);
  border-radius: 99px;
  font-size: 13px;
  color: var(--tx2);
  cursor: pointer;
  transition: all 0.2s;
}

.recent-chip:active {
  background: var(--c1);
  border-color: var(--ac);
  color: var(--ac);
}

/* === 네비게이션 부착형 공지사항 스타일 === */
.notice-banner {
  position: absolute;
  /* 하단바 높이에 맞춰 조절하세요! (보통 60px ~ 65px 정도입니다) */
  bottom: 60px; 
  left: 0;
  right: 0;
  background: rgba(250, 250, 250, 0.95); /* 아주 밝은 회색/흰색 배경 */
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--bd); /* 상단에만 얇은 선을 그어 구분 */
  border-bottom: 1px solid var(--bd);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 89; 
}

.nb-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  overflow: hidden; /* 글자가 길어지면 잘리도록 설정 */
}

.nb-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx2); /* 차분한 회색 글씨 */
  border: 1px solid #cbd5e1; /* 얇은 테두리 */
  padding: 2px 6px;
  border-radius: 4px; /* 살짝만 둥글게 */
  white-space: nowrap;
}

.nb-text {
  font-size: 13px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 글자가 길면 ... 으로 표시 */
}

.nb-close {
  background: none;
  border: none;
  padding: 0;
  color: var(--tx3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
}

.nb-close svg {
  width: 16px;
  height: 16px;
}

/* === 견적 방식 선택 카드 (빠른견적 / 구매입찰) === */
.method-big-card {
  margin: 0 20px 10px;
  padding: 16px;
  background: var(--c1);
  border: 1.5px solid var(--bd);
  border-radius: var(--r3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.method-big-card:active {
  border-color: var(--ac);
  background: var(--acl);
}

.method-big-card.disabled {
  opacity: 0.55;
}

.method-big-card .mbc-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--acl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.method-big-card .mbc-icon.warn { background: var(--wnl); }

.method-big-card .mbc-body h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 3px;
}

.method-big-card .mbc-body p {
  font-size: 11px;
  color: var(--tx2);
  line-height: 1.45;
}

.method-big-card .mbc-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

.mbc-badge.soon { background: var(--wnl); color: var(--wn); }
.mbc-badge.fast { background: var(--acl); color: var(--ac); }

/* === 빠른 견적 로딩 === */
.fq-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
}

.fq-spinner {
  width: 46px;
  height: 46px;
  border: 3px solid var(--bd);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: sp 1s linear infinite;
  margin-bottom: 18px;
}

.fq-loading-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 6px;
  text-align: center;
}

.fq-loading-sub {
  font-size: 11px;
  color: var(--tx2);
  text-align: center;
  line-height: 1.55;
  margin-bottom: 22px;
}

.fq-step-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }

.fq-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: 10px;
  font-size: 11px;
  color: var(--tx2);
  transition: all 0.35s;
}

.fq-step.done { border-color: var(--ok); background: var(--okl); color: var(--tx); }
.fq-step.active { border-color: var(--ac); background: var(--acl); color: var(--ac); font-weight: 600; }

.fq-step .step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bd);
  flex-shrink: 0;
}

.fq-step.done .step-dot { background: var(--ok); }
.fq-step.active .step-dot { background: var(--ac); }

/* === 견적결과 시장가 비교 === */
.fq-market-banner {
  margin: 0 20px 10px;
  padding: 11px 14px;
  background: var(--acl);
  border-radius: var(--r2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fq-market-banner .mb-label { font-size: 10px; color: var(--ac); font-weight: 600; margin-bottom: 2px; }
.fq-market-banner .mb-price { font-size: 16px; font-weight: 800; color: var(--ac); }
.fq-market-banner .mb-source { font-size: 9px; color: var(--tx2); margin-top: 1px; }
.fq-market-banner .mb-avg-save { font-size: 11px; font-weight: 700; color: var(--ok); }
.fq-market-banner .mb-save-sub { font-size: 9px; color: var(--tx2); margin-top: 1px; }

.qc-market-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 10px;
  border-top: 1px solid var(--bd);
  margin-top: 2px;
}

.qc-market-row .saving { font-size: 10px; color: var(--ok); font-weight: 600; }
.qc-market-row .saving.over { color: var(--dn); }
.qc-market-row .mkt-ref { font-size: 9px; color: var(--tx3); }

/* 구매입찰 유도 배너 */
.bid-cta {
  margin: 4px 20px 16px;
  padding: 14px;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border-radius: var(--r3);
  color: #fff;
}

.bid-cta .bc-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.bid-cta .bc-sub { font-size: 10px; opacity: 0.85; line-height: 1.4; margin-bottom: 10px; }

.bid-cta .bc-btn {
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.bid-cta .bc-btn:active { background: rgba(255,255,255,0.35); }
/* ===== 추가 개선 ===== */

/* 타이핑 인디케이터 */
.typing-indicator {
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 12px 14px !important;
  min-width: 52px;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  background: var(--tx3);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* 버튼 클릭 햅틱 */
.bp:active        { transform: scale(0.975); transition: transform 0.08s; }
.mc:active        { transform: scale(0.985); transition: transform 0.08s; }
.br-card:active   { transform: scale(0.985); transition: transform 0.08s; }
.qsb:active       { transform: scale(0.97);  transition: transform 0.08s; }
.cat-item:active  { transform: scale(0.92);  transition: transform 0.08s; }

/* 채팅 말풍선 진입 */
.cb { animation: bubbleIn 0.18s ease backwards; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 타입별 배지 ===== */
.type-a { color: var(--ac); background: var(--acl); }
.type-b { color: var(--tx2); background: var(--c2); border: 1px solid var(--bd); }
.type-c { color: #fff; background: #999; }

/* fq-result 상단 여백 */
#fqResultContent { padding-bottom: 20px; }