/* 파일 경로: /theme/smartcompanytheme/css/guel-whitebox-theme.css */
@charset "utf-8";

/* =======================================================
   Guel Whitebox Renewal Tokens
   기준: view_skin 작업지시서 v2 디자인 토큰
======================================================= */
html:root,
:root {
    --bg: #FFFFFF;
    --accent: #7C3AED;
    --ink: #0F0F0F;
    --muted: #6B6B6B;
    --line: rgba(0, 0, 0, 0.08);
    --hl-positive: #C4B5FD;
    --hl-negative: #FCA5A5;

    /* 기존 앱 전역 토큰 치환 */
    --ar-paper: #FFFFFF;
    --ar-ivory: #FFFFFF;
    --ar-board: #FFFFFF;
    --ar-ink: #0F0F0F;
    --ar-ink-deep: #0F0F0F;
    --ar-red: #7C3AED;
    --ar-red-deep: #5B21B6;
    --ar-mist: rgba(15, 15, 15, 0.62);
    --ar-mist-soft: rgba(15, 15, 15, 0.42);
    --ar-line: rgba(0, 0, 0, 0.08);

    /* Archive 전용 토큰 치환 */
    --archive-paper: #FFFFFF;
    --archive-board: #FFFFFF;
    --archive-ink: #0F0F0F;
    --archive-deep: #0F0F0F;
    --archive-red: #7C3AED;
    --archive-mist: #6B6B6B;
    --archive-soft: #6B6B6B;
    --archive-line: rgba(0, 0, 0, 0.08);
    --archive-line-strong: rgba(0, 0, 0, 0.16);

    /* Onboarding 전용 토큰 치환 */
    --ob-paper: #FFFFFF;
    --ob-board: #FFFFFF;
    --ob-ink: #0F0F0F;
    --ob-deep: #0F0F0F;
    --ob-red: #7C3AED;
    --ob-mist: #6B6B6B;
    --ob-soft: #6B6B6B;
    --ob-line: rgba(0, 0, 0, 0.08);
    --ob-line-strong: rgba(0, 0, 0, 0.16);
    --ob-pos: rgba(196, 181, 253, 0.42);
    --ob-neg: rgba(252, 165, 165, 0.42);

    /* Article 스킨 토큰 치환 */
    --article-primary: #7C3AED;
    --article-primary-strong: #5B21B6;
    --article-ink: #0F0F0F;
    --article-muted: #6B6B6B;
    --article-line: rgba(0, 0, 0, 0.08);
    --article-line-strong: rgba(0, 0, 0, 0.16);
    --article-surface: #FFFFFF;
    --article-surface-soft: #FFFFFF;
    --article-shadow: none;

    /* 회원/기본 스킨 계열 토큰 치환 */
    --guel-bg: #FFFFFF;
    --guel-surface: #FFFFFF;
    --guel-surface-soft: #FFFFFF;
    --guel-surface-softer: #FFFFFF;
    --guel-border: rgba(0, 0, 0, 0.08);
    --guel-border-strong: rgba(0, 0, 0, 0.16);
    --guel-text-main: #0F0F0F;
    --guel-text-sub: #6B6B6B;
    --guel-text-muted: #6B6B6B;
    --guel-black: #0F0F0F;
    --guel-accent: #7C3AED;
    --guel-accent-strong: #5B21B6;

    /* 기존 이용권 색상도 화이트박스 계열로 정리 */
    --c-free: #FFFFFF;
    --c-mericano: #7C3AED;
    --c-latte: #C4B5FD;
    --c-mocha: #0F0F0F;
}

html,
body,
body.guel-app-page,
.guel-app-page,
#app-wrapper,
.app-sub-content,
.guel-archive-app,
.guel-archive-frame,
.guel-archive-hero,
.gso-overlay,
#appHub.app-hub,
#appHub .hub-home-shell,
.main-home-shell,
.guel-home,
.guel-page,
.guel-content,
.guel-editorial,
.guel-onboarding,
.guel-onboarding-app,
.ob-app,
.ob-frame,
.member-wrap,
.login-wrap,
.register-wrap,
.shop-wrap,
#container,
#wrapper {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #0F0F0F !important;
}

html body.is-inapp-view,
html body.is-inapp-view .app-sub-content {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

.app-header,
.app-header.scrolled,
.app-header.sub-mode,
.app-bottom-nav,
.guel-global-subnav,
.guel-bookmark-popup,
.guel-head,
.guel-index-head,
.guel-feedback-panel,
.guel-feedback-modal,
.guel-feedback-toast {
    background: rgba(255, 255, 255, 0.98) !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    color: #0F0F0F !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.app-bottom-nav {
    border-top-color: rgba(0, 0, 0, 0.12) !important;
}

.app-bottom-nav .nav-tab.active {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #0F0F0F !important;
}

.accent-fill,
.guel-seal {
    fill: #7C3AED !important;
    stroke: none !important;
}

.accent-stroke,
.guel-subnav-link.is-active,
.guel-subnav-link.is-active .guel-subnav-ai-icon,
.guel-link.is-active,
.guel-tab.is-active,
.guel-nav .active,
.guel-active {
    color: #7C3AED !important;
    stroke: #7C3AED !important;
    border-color: #7C3AED !important;
}

.guel-svg,
.app-tool-icon,
.guel-sleeve {
    color: #0F0F0F !important;
    stroke: currentColor !important;
}

.guel-archive-meta,
.guel-card,
.guel-drink-badge,
.lb-ar,
.guel-archive-page-link,
.guel-archive-page-ellipsis,
.guel-search-trigger,
.gso-tag,
.gso-grade-btn,
.gso-author-input,
.lc-collapsed,
.lc-grid,
.lc-card,
.lc-filter-row,
.lc-author-input,
.article-card,
.article-cate,
.article-toolbar,
.article-btn,
.article-panel,
.article-neighbors__item,
.article-search,
.article-search__form,
.article-empty,
.article-bulk-actions,
.ob-card,
.ob-panel,
.ob-toolbar,
.ob-button,
.ob-choice,
.guel-card-panel,
.sz-card-panel,
.guel-form,
.guel-input,
.guel-select,
.guel-textarea,
input,
select,
textarea,
button {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.guel-card,
.guel-drink-badge,
.guel-archive-page-link,
.lc-card,
.lc-card-img,
.guel-card-figure,
.article-card,
.article-cate,
.article-toolbar,
.article-panel,
.article-neighbors__item,
.article-search,
.article-empty,
.article-bulk-actions,
.article-cover,
.article-card__thumb,
.ob-card,
.ob-panel,
.ob-toolbar,
.ob-choice,
.guel-card-panel,
.sz-card-panel,
.guel-form,
.guel-input,
.guel-select,
.guel-textarea,
input,
select,
textarea {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

.gso-grade-btn.is-active,
.gso-tag.is-active,
.lc-grade-btn.is-active,
.lc-card.is-checked,
.article-cate li#bo_cate_on a,
.article-btn--primary,
.article-btn:hover,
.ob-button.is-active,
.ob-choice.is-active,
.guel-btn-primary,
.guel-primary,
button[type="submit"] {
    background: #7C3AED !important;
    background-color: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #FFFFFF !important;
}

.gso-grade-btn.is-active,
.gso-tag.is-active,
.lc-grade-btn.is-active,
.lc-card.is-checked,
.ob-choice.is-active {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7C3AED !important;
}

.lc-card.is-checked::after,
.ob-choice.is-active::after {
    border-color: #7C3AED !important;
}

.lc-check,
.lc-card.is-checked .lc-check {
    border-color: #7C3AED !important;
}

.lc-card.is-checked .lc-check {
    background: #7C3AED !important;
}

.gso-title-myungjo::before,
.lc-desc-rule,
.article-quote,
.article-callout,
.guel-accent-bar,
.ob-progress-fill {
    background-color: #7C3AED !important;
    border-color: #7C3AED !important;
}

.gso-giant-input,
input:focus,
textarea:focus,
select:focus {
    border-color: #0F0F0F !important;
    border-bottom-color: #0F0F0F !important;
    caret-color: #7C3AED !important;
    color: #0F0F0F !important;
    outline-color: #7C3AED !important;
}

.gso-submit-btn,
.lc-submit,
.guel-archive-page-link.is-current,
.article-search .article-search__submit,
.guel-btn-black,
.guel-black-button {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    color: #FFFFFF !important;
    border-color: #0F0F0F !important;
}

.guel-greeting-title,
.guel-card-title,
.guel-archive-meta strong,
.guel-card-meta .author,
.gso-title-myungjo,
.lc-collapsed-label,
.lc-card-la,
.lc-desc-la,
.lc-desc-ko,
.article-title,
.article-card__title,
.article-panel__title,
.article-neighbors__item strong,
.article-profile__meta-tags,
.ob-title,
.ob-heading,
.guel-title,
.guel-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0F0F0F !important;
}

.guel-card-excerpt,
.guel-card-meta,
.guel-card-tags span,
.guel-archive-meta,
.gso-tag,
.lc-collapsed-sub,
.lc-card-roman,
.lc-desc-pron,
.lc-desc-text,
.article-muted,
.article-eyebrow-text,
.article-card__excerpt,
.article-toolbar__count,
.article-profile__desc,
.article-search--minimal input[type="text"]::placeholder,
.ob-meta,
.ob-desc,
.ob-caption,
.guel-muted,
.guel-desc,
.guel-caption,
small {
    color: #6B6B6B !important;
}

a,
.article-btn,
.article-chip,
.article-state,
.guel-link {
    color: #0F0F0F !important;
}

a:hover,
.article-btn:hover,
.guel-link:hover {
    color: #7C3AED !important;
}

.sleeve-free {
    fill: #FFFFFF !important;
    stroke: #0F0F0F !important;
}

.sleeve-mericano {
    fill: #7C3AED !important;
    stroke: none !important;
}

.sleeve-latte {
    fill: #C4B5FD !important;
    stroke: #7C3AED !important;
}

.sleeve-mocha {
    fill: #0F0F0F !important;
    stroke: none !important;
}

/* Shop / default / mobile CSS 계열의 구형 회색·종이색 보정 */
.tbl_head01,
.tbl_head02,
.tbl_wrap,
.form_01,
.btn_confirm,
#sct,
#sit,
#sod_bsk,
#sod_frm,
#sod_fin,
#smb_my,
#smb_private,
#ssch,
#ssch_frm,
#sch_res_detail,
.shop-content,
.shop-card,
.shop-panel {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0F0F0F !important;
}

.tbl_head01 th,
.tbl_head02 th,
.shop-title,
.shop-card-title,
#sit_title,
#sct_title {
    color: #0F0F0F !important;
    background: #FFFFFF !important;
}

.tbl_head01 td,
.tbl_head02 td,
.shop-meta,
.shop-desc,
#sit_inf_basic,
#sit_tot_price {
    color: #6B6B6B !important;
}

/* 형광펜 UX 색상 선반영 */
.guel-hl-positive,
[data-highlight="positive"] {
    background: rgba(196, 181, 253, 0.42) !important;
}

.guel-hl-negative,
[data-highlight="negative"] {
    background: rgba(252, 165, 165, 0.42) !important;
}