@charset "utf-8";
/* ==========================================================
   HIVE CELL 홍보·가입 사이트 (2026-10-31)
   방향: 로고(보라 벌방 + 차오르는 꿀) 기준 — 차가운 라일락빛 흰 바탕, 짙은 자두색 글자, 보라 #7C3AED(업무 화면 tokens.css 와 같음, 6차수), 꿀색 #F9AB00 은 "채워진 것"에만
   중심 그림 하나: 첫 화면 "오늘" 시간표 — 육각 벌방이 시간 순서대로 꿀로 채워짐 (움직임은 이것 하나)
   공통 부품(vp.css) 위에 색·모양만 바꾸고, 홍보 화면은 전용 모양(hc-)을 쓴다. 공통 계정 화면(?svc=cell)도 이 색을 따른다.
   ========================================================== */
body.th-cell {
  --c-bg: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-2: #F6F7FB;
  --c-line: #E8EAF0;
  --c-text: #191F28;
  --c-text-2: #4E5968;
  --c-muted: #6B7684;
  --c-brand: #7C3AED;
  --c-brand-strong: #6D28D9;
  --c-on-brand: #FFFFFF;
  --c-accent: #F9AB00;
  --c-focus: #7C3AED;
  --c-info: #5B21B6;
  --c-info-bg: #F5F1FF;
  --hc-plum: #7C3AED;
  --hc-plum-d: #6D28D9;
  --hc-night: #191F28;
  --hc-honey: #F9AB00;
  --hc-honey-2: #FFC94A;
  --hc-honey-ink: #7A5200;
  --hc-lilac: #EFE9FF;
  --r: 12px;
  --hc-shadow: 0 1px 2px rgba(25,31,40,.04), 0 12px 32px -12px rgba(76,52,160,.18);
  background: var(--c-bg);
  letter-spacing: -.01em;
}
body.th-cell :focus-visible { outline: 3px solid var(--hc-plum); outline-offset: 2px; }

/* ---------- 로고 ---------- */
.hclogo { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text); line-height: 1; }
.hclogo__mark { display: block; width: 34px; height: 34px; }
.hclogo__word { font-size: 18px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.hclogo__word b { color: var(--hc-plum); font-weight: 900; }

/* ---------- 머리말 ---------- */
.th-cell .hc-hd { background: rgba(250,248,253,.94); border-bottom: 1px solid var(--c-line); backdrop-filter: blur(8px); }
.th-cell .hc-hd__in { min-height: 68px; }
.th-cell .hc-nav a { font-size: 15px; font-weight: 600; color: var(--c-text-2); }
.th-cell .hc-nav a:hover { color: var(--c-text); }
.th-cell .hc-nav a[aria-current="page"] { color: var(--hc-plum); background: transparent; }
.th-cell .hc-nav .linklike { color: var(--c-text-2); font-size: 15px; }
.th-cell .hc-nav__cta { padding: var(--s-2) 0; }
.th-cell .hc-nav__cta .btn { color: #fff; }
@media (min-width: 960px) {
  .th-cell .hc-nav__util { border-left: 0 !important; display: flex; align-items: center; gap: 4px; }
  .th-cell .hc-nav__util a, .th-cell .hc-nav__util .linklike { font-size: 14px; color: var(--c-muted); }
  .th-cell .hc-nav__cta { padding: 0 0 0 var(--s-2); }
}

/* ---------- 공통 부품 ---------- */
.th-cell .btn { border-radius: var(--r); font-weight: 700; }
.th-cell .btn--primary { background: var(--hc-plum); border-color: var(--hc-plum); color: #fff; }
.th-cell .btn--primary:hover { background: var(--hc-plum-d); }
.th-cell .btn--secondary { background: #fff; border-color: var(--c-line); color: var(--c-text); }
.th-cell .btn--secondary:hover { border-color: var(--hc-plum); color: var(--hc-plum); }
.th-cell .btn--lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.th-cell .btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 767px) { .th-cell .btn--sm { min-height: 44px; } }   /* QA 2차: 계정 화면 [모두 읽음] 등 모바일 누름 영역 */
.hc-btn--quiet { background: transparent; border: 1.5px solid var(--c-line); color: var(--c-text); }
.hc-btn--quiet:hover { border-color: var(--c-text); }
.hc-btn--honey { background: var(--hc-honey); border: 0; color: var(--hc-night); }
.hc-btn--honey:hover { background: var(--hc-honey-2); color: var(--hc-night); }
.hc-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }
.hc-actions--center { justify-content: center; margin: var(--s-6) 0 var(--s-7); }
.th-cell .kicker { color: var(--hc-plum); letter-spacing: .04em; }
.th-cell .auth .h-section { color: var(--c-text); }

/* ---------- 첫 화면 ---------- */
.hc-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); }
.hc-hero__in { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .hc-hero__in { grid-template-columns: 1.08fr .92fr; } }
.hc-hero__name { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-4); font-size: 15px; font-weight: 700; color: var(--hc-plum); }
.hc-hero__name img { display: block; }
.hc-hero__title { margin: 0; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.16; font-weight: 800; letter-spacing: -.04em; color: var(--c-text); max-width: 13em; }
.hc-hero__lead { margin: var(--s-5) 0 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.75; color: var(--c-text-2); max-width: 34em; }
.hc-hero__note { margin: var(--s-4) 0 0; font-size: 14px; color: var(--c-muted); }

/* "오늘" 시간표 — 중심 그림 */
.hc-today { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--hc-shadow); padding: 22px 22px 16px; }
.hc-today__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 14px; border-bottom: 1px solid var(--c-line); }
.hc-today__label { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hc-today__shop { font-size: 14px; color: var(--c-muted); }
.hc-today__list { list-style: none; margin: 0; padding: 6px 0 0; position: relative; }
.hc-today__list::before { content: ""; position: absolute; left: 83px; top: 30px; bottom: 30px; width: 2px; background: var(--hc-lilac); }
.hc-today__item { display: grid; grid-template-columns: 62px 24px 1fr; gap: 0 12px; align-items: center; padding: 12px 0; position: relative; }
.hc-today__time { font-size: 14px; font-weight: 700; color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; }
.hc-today__cell { position: relative; width: 24px; height: 27px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hc-plum); z-index: 1; }
.hc-today__cell::before { content: ""; position: absolute; inset: 3px; clip-path: inherit; background: linear-gradient(to top, var(--hc-honey) var(--fill), #F5F1FF var(--fill)); }
.hc-today__cell { --fill: 0%; }
.hc-today__item:nth-child(-n+3) .hc-today__cell { --fill: 100%; }
.hc-today__item:nth-child(4) .hc-today__cell { --fill: 45%; }
.hc-today__body { display: flex; flex-direction: column; min-width: 0; }
.hc-today__body strong { font-size: 16px; font-weight: 800; color: var(--c-text); }
.hc-today__body span { font-size: 14px; color: var(--c-text-2); }
.hc-today__item:nth-child(5) .hc-today__body strong { color: var(--hc-plum); }
.hc-today__foot { margin: 8px 0 0; padding-top: 12px; border-top: 1px dashed var(--c-line); font-size: 12.5px; color: var(--c-muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .hc-today__item { opacity: 0; transform: translateY(6px); animation: hc-in .45s ease-out forwards; }
  .js .hc-today__item:nth-child(-n+4) .hc-today__cell { animation: hc-fill .6s ease-out both; }
  .js .hc-today__item:nth-child(1) { animation-delay: .15s; } .js .hc-today__item:nth-child(1) .hc-today__cell { animation-delay: .35s; }
  .js .hc-today__item:nth-child(2) { animation-delay: .45s; } .js .hc-today__item:nth-child(2) .hc-today__cell { animation-delay: .65s; }
  .js .hc-today__item:nth-child(3) { animation-delay: .75s; } .js .hc-today__item:nth-child(3) .hc-today__cell { animation-delay: .95s; }
  .js .hc-today__item:nth-child(4) { animation-delay: 1.05s; } .js .hc-today__item:nth-child(4) .hc-today__cell { animation-delay: 1.25s; }
  .js .hc-today__item:nth-child(5) { animation-delay: 1.35s; }
}
@keyframes hc-in { to { opacity: 1; transform: none; } }
@property --fill { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@keyframes hc-fill { from { --fill: 0%; } }
@media (max-width: 420px) {
  .hc-today { padding: 18px 14px 12px; }
  .hc-today__item { grid-template-columns: 50px 22px 1fr; gap: 0 10px; }
  .hc-today__list::before { left: 70px; }
}

/* ---------- 구역 ---------- */
.hc-sec { padding: clamp(56px, 8vw, 104px) 0; }
.hc-sec--tint { background: var(--c-surface-2); }
.hc-h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.3; font-weight: 800; letter-spacing: -.035em; max-width: 20em; }
.hc-sec__lead { margin: var(--s-3) 0 0; font-size: 17px; color: var(--c-text-2); max-width: 36em; }
.hc-more { margin: var(--s-6) 0 0; font-weight: 700; }
.hc-more a { color: var(--hc-plum); }

/* 하루의 순간 — 시간표처럼 가로줄 */
.hc-moments { margin-top: var(--s-6); background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 4px clamp(18px, 3vw, 32px); box-shadow: var(--hc-shadow); }
.hc-moment:last-child { border-bottom: 0; }
.hc-moment { display: grid; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--c-line); }
@media (min-width: 860px) { .hc-moment { grid-template-columns: 210px 1fr 1.25fr; align-items: start; padding: 28px 0; } }
.hc-moment__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hc-moment__body { margin: 0; color: var(--c-text-2); }
.hc-moment__list { margin: 0; padding: 0; list-style: none; }
.hc-moment__list li { position: relative; padding-left: 20px; line-height: 1.65; }
.hc-moment__list li + li { margin-top: 4px; }
.hc-moment__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 10px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hc-plum); }

/* 고객 화면 */
.hc-split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .hc-split { grid-template-columns: 1.2fr .8fr; } }
.hc-cust { margin: var(--s-6) 0 0; }
.hc-cust__row { padding: 16px 0; border-top: 1px solid var(--c-line); }
.hc-cust__row dt { font-weight: 800; font-size: 17px; }
.hc-cust__row dd { margin: 2px 0 0; color: var(--c-text-2); }
.hc-phone { justify-self: center; width: 260px; padding: 10px; border-radius: 38px; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 24px 48px -20px rgba(76,52,160,.28); }
.hc-phone__screen { border-radius: 30px; background: #fff; border: 1px solid var(--c-line); padding: 26px 18px 20px; }
.hc-phone__screen p { margin: 0; }
.hc-phone__shop { font-size: 12px; color: var(--c-muted); }
.hc-phone__h { font-size: 20px; font-weight: 800; margin: 2px 0 14px !important; }
.hc-phone__label { font-size: 11.5px; font-weight: 700; color: var(--c-muted); margin: 12px 0 6px !important; }
.hc-phone__pick { font-size: 14px; font-weight: 700; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; }
.hc-phone__days, .hc-phone__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hc-phone__days span, .hc-phone__slots span { text-align: center; font-size: 12.5px; font-weight: 700; padding: 8px 0; border-radius: 9px; background: var(--c-surface-2); color: var(--c-text-2); }
.hc-phone__days .is-on, .hc-phone__slots .is-on { background: var(--hc-plum); color: #fff; }
.hc-phone__btn { margin-top: 18px !important; text-align: center; font-size: 14px; font-weight: 800; padding: 12px 0; border-radius: 10px; background: var(--hc-plum); color: #fff; }

/* 시작 3단계 */
.hc-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .hc-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.hc-steps__item p { margin: 6px 0 0; color: var(--c-text-2); }
.hc-steps__no { display: inline-grid; place-items: center; width: 40px; height: 45px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hc-lilac); color: var(--hc-plum); font-weight: 900; font-size: 17px; }
.hc-steps__title { margin: 14px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

/* 자주 묻는 질문 */
.hc-faq { margin-top: var(--s-5); border-top: 1px solid var(--c-line); }
.hc-faq__item { border-bottom: 1px solid var(--c-line); }
.hc-faq__item summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-size: 17px; font-weight: 700; }
.hc-faq__item summary::-webkit-details-marker { display: none; }
.hc-faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--hc-plum); }
.hc-faq__item[open] summary::after { content: "−"; }
.hc-faq__item p { margin: 0; padding: 0 0 20px; color: var(--c-text-2); max-width: 40em; }

/* 마지막 권유 */
.hc-cta { background: linear-gradient(180deg, #F5F1FF 0%, #EFE9FF 100%); color: var(--c-text); padding: clamp(56px, 8vw, 96px) 0; }
.hc-cta__in { text-align: center; }
.hc-cta__title { margin: 0 auto; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.3; max-width: 18em; }
.hc-cta p { margin: var(--s-3) 0 var(--s-5); color: var(--c-text-2); }
.th-cell .main:has(> .hc-cta:last-child) + .hc-ft { margin-top: 0; }

/* ---------- 안내 페이지 머리 ---------- */
.hc-pagehead { padding: clamp(40px, 6vw, 72px) 0 var(--s-5); }
.hc-pagehead__title { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.hc-pagehead__lead { margin: var(--s-3) 0 0; font-size: 17px; color: var(--c-text-2); max-width: 36em; }
.hc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }
.hc-jump a { padding: 8px 14px; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text); font-weight: 700; font-size: 14px; text-decoration: none; }
.hc-jump a:hover { background: var(--hc-lilac); color: var(--hc-plum); }

/* 기능 안내 */
.hc-feat { display: grid; gap: var(--s-3) var(--s-7); padding: var(--s-6) 0; border-top: 1px solid var(--c-line); scroll-margin-top: 84px; }
.hc-feat:first-child { border-top: 1px solid var(--c-line); }
@media (min-width: 860px) { .hc-feat { grid-template-columns: 300px 1fr; } }
.hc-feat__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hc-feat__head p { margin: 6px 0 0; color: var(--c-text-2); }
.hc-feat__list { margin: 0; padding: 0; list-style: none; }
.hc-feat__list li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--c-line); }
.hc-feat__list li:last-child { border-bottom: 0; }
.hc-feat__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 11px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hc-plum); }

/* ---------- 원장님 가입 ---------- */
.hc-join { padding: clamp(32px, 5vw, 64px) 0 var(--s-7); }
.hc-join__in { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .hc-join__in { grid-template-columns: .8fr 1.2fr; gap: var(--s-8); } .hc-join__side { position: sticky; top: 100px; } }
.hc-join__gets { margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.hc-join__gets li { position: relative; padding: 8px 0 8px 22px; }
.hc-join__gets li::before { content: ""; position: absolute; left: 0; top: 1em; width: 10px; height: 11px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hc-honey); }
.hc-join__login { margin: var(--s-5) 0 0; color: var(--c-text-2); }
.hc-join__form { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: clamp(20px, 3vw, 36px); box-shadow: var(--hc-shadow); }
.hc-join__group { border: 0; margin: 0 0 var(--s-5); padding: 0; min-width: 0; }
.hc-join__group > legend { font-size: 18px; font-weight: 800; padding: 0; margin-bottom: var(--s-4); }
.hc-join__group + .hc-join__group { padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.hc-join__row { display: grid; gap: 0 var(--s-4); }
@media (min-width: 640px) { .hc-join__row { grid-template-columns: 1fr 1fr; } }

/* 가입 직후 */
.hc-todo { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.hc-todo__item { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line); }
.hc-todo__item .btn { grid-column: 2; justify-self: start; }
@media (min-width: 720px) { .hc-todo__item { grid-template-columns: 40px 1fr auto; } .hc-todo__item .btn { grid-column: auto; } }
.hc-todo__title { margin: 0; font-size: 18px; font-weight: 800; }
.hc-todo__text p { margin: 2px 0 0; color: var(--c-text-2); }

/* ---------- 꼬리말 ---------- */
.th-cell .hc-ft { margin-top: var(--s-8); background: #fff; border-top: 1px solid var(--c-line); padding: var(--s-7) 0 var(--s-6); }
.hc-ft__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.hc-ft__tag { margin: 0; color: var(--c-muted); font-size: 14px; }
.hc-ft__links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: var(--s-5) 0 0; padding: 0; font-size: 14px; }
.hc-ft__links a { color: var(--c-text-2); text-decoration: none; }
.hc-ft__links a:hover { color: var(--hc-plum); text-decoration: underline; }
.hc-ft__info { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: var(--s-4); font-style: normal; font-size: 12.5px; color: var(--c-muted); }
.hc-ft__copy { margin: var(--s-3) 0 0; font-size: 12.5px; color: var(--c-muted); }

/* ==========================================================
   2026-10-31 보강: 프로그램 소개 · 이용 방법 · 장단점 · 자주 묻는 질문
   ========================================================== */
.hc-sec--top { padding-top: var(--s-6); }
.hc-sec__lead--after { margin-top: var(--s-6); }
.hc-sec__lead a, .hc-more a { color: var(--hc-plum); font-weight: 700; }

/* 소개: 원장님들이 겪던 일 (순서 있는 목록) */
.hc-problems { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.hc-problems__item { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.hc-problems__no { font-size: 26px; font-weight: 800; color: var(--hc-plum); line-height: 1.2; font-variant-numeric: tabular-nums; }
.hc-problems__item h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.hc-problems__item p { margin: 4px 0 0; color: var(--c-text-2); }

/* 소개: 어떤 매장에 맞나 */
.hc-deflist { margin: var(--s-6) 0 0; }
.hc-deflist__row { display: grid; gap: 4px 32px; padding: 18px 0; border-top: 1px solid var(--c-line); }
@media (min-width: 760px) { .hc-deflist__row { grid-template-columns: 210px 1fr; } }
.hc-deflist__row dt { font-weight: 800; font-size: 17px; }
.hc-deflist__row dd { margin: 0; color: var(--c-text-2); }

/* 소개: 원칙 */
.hc-principles { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 860px) { .hc-principles { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.hc-principles__item { padding-top: 16px; border-top: 3px solid var(--hc-plum); }
.hc-principles__item h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.hc-principles__item p { margin: 6px 0 0; color: var(--c-text-2); }

/* 이용 방법 */
.hc-ready { margin: var(--s-4) 0 var(--s-6); padding: clamp(20px, 3vw, 28px); background: var(--c-surface-2); border-radius: 18px; scroll-margin-top: 84px; }
.hc-ready > p { margin: 4px 0 0; color: var(--c-text-2); }
.hc-ready__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.hc-ready__list li { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-size: 14.5px; font-weight: 600; }
.hc-phase { padding: var(--s-6) 0 var(--s-4); scroll-margin-top: 84px; }
.hc-phase__title { margin: 0 0 var(--s-4); font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.03em; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.hc-phase__steps { list-style: none; margin: 0; padding: 0; }
.hc-phase__step { display: grid; grid-template-columns: 40px 1fr; gap: 4px var(--s-4); align-items: start; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.hc-phase__step .hc-steps__no { width: 34px; height: 38px; font-size: 15px; }
.hc-phase__text h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
.hc-phase__text p { margin: 2px 0 0; color: var(--c-text-2); }
.hc-phase__menu { grid-column: 2; margin: 0; justify-self: start; font-size: 13px; font-weight: 700; color: var(--hc-plum-d); background: var(--hc-lilac); padding: 4px 10px; border-radius: 8px; }
@media (min-width: 860px) {
  .hc-phase__step { grid-template-columns: 40px 1fr 260px; }
  .hc-phase__menu { grid-column: auto; justify-self: end; margin-top: 6px; }
}

/* 장단점 */
.hc-procon { display: grid; gap: var(--s-6); margin: var(--s-4) 0 var(--s-7); }
@media (min-width: 900px) { .hc-procon { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.hc-procon__title { margin: 0; padding-bottom: 12px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; border-bottom: 3px solid; }
.hc-procon__title--pro { border-color: var(--hc-plum); }
.hc-procon__title--con { border-color: #CBD2DC; }
.hc-procon__list { list-style: none; margin: 0; padding: 0; }
.hc-procon__list li { padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.hc-procon__list h3 { margin: 0; font-size: 17px; font-weight: 800; }
.hc-procon__list p { margin: 4px 0 0; color: var(--c-text-2); }
.hc-compare { padding: var(--s-6) 0 var(--s-4); }
.hc-compare__scroll { margin-top: var(--s-5); overflow-x: auto; border: 1px solid var(--c-line); border-radius: 16px; background: #fff; }
.hc-compare__table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.hc-compare__table th, .hc-compare__table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.hc-compare__table tbody tr:last-child th, .hc-compare__table tbody tr:last-child td { border-bottom: 0; }
.hc-compare__table thead th { font-size: 14px; color: var(--c-muted); font-weight: 700; background: var(--c-bg); }
.hc-compare__table tbody th { font-weight: 700; width: 26%; }
.hc-compare__table td { color: var(--c-text-2); }
.hc-compare__table .is-us { background: var(--c-info-bg); color: var(--c-text); font-weight: 700; }
.hc-compare__table thead .is-us { color: var(--hc-plum); background: var(--hc-lilac); }
.hc-compare__note { margin: var(--s-3) 0 0; font-size: 14px; color: var(--c-muted); }

/* 첫 화면: 아쉬운 점 먼저 */
.hc-honest__in { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .hc-honest__in { grid-template-columns: .9fr 1.1fr; gap: var(--s-7); } }
.hc-honest__list { list-style: none; margin: 0; padding: 4px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; }
.hc-honest__list li:last-child { border-bottom: 0; }
.hc-honest__list li { display: flex; flex-direction: column; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.hc-honest__list strong { font-size: 17px; font-weight: 800; }
.hc-honest__list span { color: var(--c-text-2); margin-top: 2px; }

/* 자주 묻는 질문 페이지 */
.hc-faq--page { margin-top: 0; }

/* ==========================================================
   2026-10-31 밝은 톤 (경쟁 프로그램 홈페이지처럼 흰 바탕 · 밝은 회청색 패널 · 밝은 보라 강조)
   어두운 띠·진한 선을 없애고, 꿀색은 벌방 그림과 작은 점에만 남김
   ========================================================== */
.th-cell .hc-hd { background: rgba(255,255,255,.96); }
.hc-hero { background: radial-gradient(1200px 520px at 85% 10%, #F1EBFF 0%, rgba(241,235,255,0) 60%), linear-gradient(180deg, #FAF8FF 0%, #FFFFFF 100%); }
.hc-today { border-radius: 24px; }
.hc-btn--honey { background: var(--hc-plum); color: #fff; }
.hc-btn--honey:hover { background: var(--hc-plum-d); color: #fff; }
.hc-btn--quiet { background: #fff; }
.hc-sec--tint .hc-moments, .hc-sec--tint .hc-faq { background: #fff; }
.hc-faq { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 0 clamp(18px, 3vw, 28px); }
.hc-faq__item:last-child { border-bottom: 0; }
.hc-steps__item { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 24px; box-shadow: var(--hc-shadow); }
.hc-principles__item { background: var(--c-surface-2); border-top: 0; border-radius: 18px; padding: 22px; }
.hc-principles__item h3 { color: var(--hc-plum-d); }
.hc-problems__no { color: var(--hc-plum); }
.hc-procon__col { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 24px clamp(18px, 3vw, 28px) 8px; box-shadow: var(--hc-shadow); }
.hc-procon__title { border-bottom-width: 2px; }
.hc-procon__list li:last-child { border-bottom: 0; }
.hc-compare__scroll { box-shadow: var(--hc-shadow); }
.hc-compare__table thead th { background: var(--c-surface-2); }
.hc-join { background: linear-gradient(180deg, #FAF8FF 0%, #FFFFFF 60%); }
.th-cell .hc-ft { background: var(--c-surface-2); border-top: 0; }
.hc-today__item:nth-child(5) .hc-today__body strong { color: var(--hc-plum); }
.hc-moment__list li::before, .hc-feat__list li::before { background: var(--hc-plum); }
/* 버튼은 둥근 알약 모양 (뷰티 매장 프로그램 홈페이지들의 익숙한 모양) */
.th-cell .btn { border-radius: 999px; }
.th-cell .btn--primary { box-shadow: 0 6px 16px -6px rgba(124,58,237,.45); }
.th-cell .hc-join__form .btn--primary, .th-cell .auth .btn--primary { border-radius: 14px; }

/* ==========================================================
   2026-10-31 모객 고도화: 상담 신청 · 업종별 활용 · 휴대폰 하단 고정 버튼
   ========================================================== */
.hc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 960px) {
  .th-cell .hc-nav__menu a { padding: 0 9px; font-size: 14.5px; }
  .th-cell .hc-nav__contact { color: var(--hc-plum) !important; font-weight: 700; }
}
.hc-cta__btns { margin: 0 !important; justify-content: center; }
.hc-cta .hc-btn--quiet { background: rgba(255,255,255,.8); }

/* 상담 방식 고르기 */
.hc-choice { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.hc-choice > legend { font-weight: 700; margin-bottom: var(--s-2); padding: 0; }
.hc-choice__row { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-choice__opt { position: relative; cursor: pointer; }
.hc-choice__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hc-choice__opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--c-line); border-radius: 999px; background: #fff; font-weight: 700; font-size: 15px; color: var(--c-text-2); }
.hc-choice__opt input:checked + span { border-color: var(--hc-plum); background: var(--c-info-bg); color: var(--hc-plum-d); }
.hc-choice__opt input:focus-visible + span { outline: 3px solid var(--hc-plum); outline-offset: 2px; }
.hc-join__form textarea { width: 100%; }

/* 신청 완료 */
.hc-done { text-align: center; padding-bottom: var(--s-8); }
.hc-done__mark { display: block; margin: 0 auto var(--s-4); }
.hc-done .hc-pagehead__lead { margin-left: auto; margin-right: auto; }

/* 업종별 활용 */
.hc-kinds { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .hc-kinds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .hc-kinds { grid-template-columns: repeat(3, 1fr); } }
.hc-kinds__item a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; color: var(--c-text); text-decoration: none; box-shadow: var(--hc-shadow); transition: border-color .15s; }
.hc-kinds__item a:hover { border-color: var(--hc-plum); }
.hc-kinds__name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.hc-kinds__lead { color: var(--c-text-2); font-size: 15px; flex: 1; }
.hc-kinds__tag { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--c-info-bg); color: var(--hc-plum-d); }
.hc-kinds__tag.is-basic { background: var(--c-surface-2); color: var(--c-muted); }
.hc-kindhead { background: linear-gradient(180deg, #FAF8FF 0%, #FFFFFF 100%); padding-bottom: var(--s-6); }
.hc-crumb { margin: 0 0 var(--s-3); font-size: 14px; color: var(--c-muted); }
.hc-crumb a { color: var(--hc-plum); text-decoration: none; font-weight: 700; }

/* 첫 화면 업종 바로가기 */
.hc-kindbar { padding: 0 0 clamp(48px, 7vw, 88px); }
.hc-kindbar__in { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .hc-kindbar__in { grid-template-columns: 220px 1fr; } }
.hc-kindbar__title { margin: 0; font-size: 19px; font-weight: 800; }
.hc-kindbar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hc-kindbar__list a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.hc-kindbar__list a:hover { background: var(--hc-lilac); color: var(--hc-plum-d); }

/* 휴대폰 하단 고정 버튼 */
.hc-mbar { display: none; }
@media (max-width: 759px) {
  .hc-mbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--c-line); backdrop-filter: blur(8px); }
  .hc-mbar .btn { min-height: 48px; font-size: 16px; }
  body.th-cell { padding-bottom: 76px; }
}
/* 매장 고객 화면 (예약 페이지·예약 조회·결과지) */
.hc-hd--guest .hc-hd__in { justify-content: center; }
.hc-ft--guest { padding: var(--s-5) 0; text-align: center; }
.hc-ft--guest a { color: var(--hc-plum); font-weight: 700; }

/* 실제 화면 (2026-10-31 시연용 매장 캡처) */
.hc-shots { background: var(--c-surface-2); }
.hc-shots__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-5) 0 var(--s-4); }
.hc-shots__tabs button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--c-line); background: #fff; font: inherit; font-size: 15px; font-weight: 700; color: var(--c-text-2); cursor: pointer; }
.hc-shots__tabs button[aria-selected="true"] { background: var(--hc-plum); border-color: var(--hc-plum); color: #fff; }
.hc-shots__tabs button:focus-visible { outline: 3px solid var(--hc-plum); outline-offset: 2px; }
.hc-shot { margin: var(--s-5) 0 0; }
.hc-shots.is-tabbed .hc-shot { margin-top: 0; }
.hc-shot__frame { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 56px -28px rgba(76,52,160,.35); }
.hc-shot__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F3F4F8; border-bottom: 1px solid var(--c-line); }
.hc-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9DCE3; }
.hc-shot__bar span { margin-left: 10px; font-size: 12.5px; color: var(--c-muted); font-weight: 600; }
.hc-shot img { display: block; width: 100%; height: auto; }
.hc-shot figcaption { margin-top: 14px; color: var(--c-text-2); font-size: 15px; }
.hc-shot figcaption strong { color: var(--c-text); margin-right: 6px; }
.hc-shot--narrow .hc-shot__frame { max-width: 420px; margin: 0 auto; border-radius: 28px; }
.hc-shot--narrow figcaption { text-align: center; }
@media (max-width: 759px) { .hc-shot:not(.hc-shot--narrow) .hc-shot__frame { overflow-x: auto; } .hc-shot:not(.hc-shot--narrow) img { width: 760px; max-width: none; } }

/* ---------- CELL launch (2026-11-01) 약관·요금·도움말·계정 ---------- */
.hc-doc { max-width: 760px; padding-bottom: var(--s-7); color: var(--c-text-2); font-size: 16px; line-height: 1.75; }
.hc-doc h2 { margin: var(--s-6) 0 var(--s-2); font-size: 19px; font-weight: 800; color: var(--c-text); letter-spacing: -.02em; }
.hc-doc h2:first-child { margin-top: 0; }
.hc-doc p { margin: 0 0 var(--s-2); }
.hc-doc ol, .hc-doc ul { margin: 0 0 var(--s-2); padding-left: 1.4em; }
.hc-doc li + li { margin-top: 4px; }
.hc-doc a { color: var(--hc-plum); font-weight: 700; }
.hc-doc__co { display: grid; gap: 0; margin: var(--s-3) 0; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; background: #fff; }
.hc-doc__co > div { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--c-line); }
.hc-doc__co > div:first-child { border-top: 0; }
.hc-doc__co dt { padding: 10px 14px; background: var(--c-surface-2); font-weight: 700; color: var(--c-text); font-size: 14.5px; }
.hc-doc__co dd { margin: 0; padding: 10px 14px; }
.hc-doc__table { font-size: 15px; }
.hc-doc__table td { vertical-align: top; }
.hc-jump a[aria-current="page"] { background: var(--hc-plum); color: #fff; }
.hc-plans { display: grid; gap: var(--s-4); margin: var(--s-2) 0 var(--s-6); }
@media (min-width: 860px) { .hc-plans { grid-template-columns: 1fr 1fr; align-items: start; } }
.hc-plan { position: relative; padding: 28px; border: 1px solid var(--c-line); border-radius: 20px; background: #fff; box-shadow: var(--hc-shadow); }
.hc-plan--on { border: 2px solid var(--hc-plum); }
.hc-plan__tag { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--hc-lilac); color: var(--hc-plum-d); font-weight: 800; font-size: 13px; }
.hc-plan__tag--soon { background: #FFF4D6; color: var(--hc-honey-ink); }
.hc-plan__name { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); }
.hc-plan__price { margin: 6px 0 var(--s-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--c-muted); font-size: 14.5px; }
.hc-plan__price b { font-size: 34px; font-weight: 900; color: var(--c-text); letter-spacing: -.03em; }
.hc-plan__list { list-style: none; margin: 0; padding: 0; }
.hc-plan__list li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--c-line); color: var(--c-text-2); }
.hc-plan__list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2.5px solid var(--hc-plum); border-bottom: 2.5px solid var(--hc-plum); transform: rotate(-45deg); }
.hc-plan__cta { margin: var(--s-4) 0 0; }
.hc-plan__note { margin: var(--s-3) 0 0; color: var(--c-muted); font-size: 14.5px; }
.hc-plans__faq { margin-bottom: var(--s-4); }
.hc-faq__go { display: inline-block; margin-left: 4px; color: var(--hc-plum); font-weight: 700; white-space: nowrap; }
.hc-ft__legal { margin: 6px 0 0; font-size: 13px; }
.th-cell .auth__alt { margin-top: var(--s-4); padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface-2); }
.th-cell .auth__alt summary { cursor: pointer; font-weight: 700; color: var(--c-text-2); }
.th-cell .auth__alt .form { margin-top: var(--s-3); }
/* 사이클 2 (2026-11-01) 매장 고객 화면 머리글: 매장 이름 + 작은 "HIVE CELL로 예약" */
.hc-hd--shop .hc-hd__in { justify-content: space-between; gap: 12px; }
.hc-shop { min-width: 0; text-decoration: none; }
.hc-shop__name { display: block; overflow: hidden; color: var(--hc-ink, #1d1830); font-size: 18px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.hc-shop__by { flex: none; padding: 4px 10px; border-radius: 999px; background: #F1ECFF; color: #5B3FD9; font-size: 12px; font-weight: 700; text-decoration: none; }
.hc-ft__shop { margin: 0 0 8px; color: var(--hc-ink, #1d1830); font-size: 14px; }