:root {
  --cln-blue: #ee4916;     
  --cln-blue-d: #cf3d10;   
  --cln-ink: #16181d;     
  --cln-gray: #71757d;    
  --cln-line: #e7e8ec;
  --cln-line2: #edeef1;
  --cln-soft: #f5f6f8;   
}


.cln-page.com_sub_wrap { padding: 0 !important; background: #f4f5f7; }
.wrap { overflow: visible !important; }
@media screen and (max-width: 760px) {
  .cln-page.com_sub_wrap { padding-top: 158px !important; }
}


@media screen and (max-width: 780px) {
  .font-history { display: none !important; }
}


.cln-page * { box-sizing: border-box; }
.cln-page .inner {
  width: 100%; max-width: 1250px; margin: 0 auto; padding: 0 24px;
}
.cln-page img { max-width: 100%; }

/* ── 히어로 ─────────────────────────────────── */
.cln-hero {
  padding: 7em 0 5em 0;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(900px 460px at 50% -30%, rgba(238, 73, 22, .16), transparent 62%),
    #14161b;
}
.cln-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #e6cabf;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: 22px;
}
.cln-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cln-blue);
  box-shadow: 0 0 10px 1px rgba(238, 73, 22, .9);
}
.cln-hero-title {
  margin: 0; font-weight: 800; line-height: 1.12;
  letter-spacing: -.035em;
  font-size: clamp(28px, 4vw, 48px);
}
.cln-hero-title .cln-grad {
  color: #fff;
}
.cln-hero-desc {
  margin: 20px auto 0; max-width: 700px;
  font-size: clamp(14px, 1.5vw, 16px); line-height: 1.9;
  color: rgba(255,255,255,.66); word-break: keep-all;
}

/* ── 스티키 탭 네비 ─────────────────────────── */

.cln-nav {
  position: sticky; top: var(--cln-header-h, 60px); z-index: 30;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--cln-line2);
}

@media screen and (max-width: 1080px) {
  .cln-nav {
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s,
                top .4s cubic-bezier(.4,0,.2,1);
  }
  .cln-nav.hide {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
  }
}
.cln-nav-inner {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.cln-nav-inner::-webkit-scrollbar { display: none; }
.cln-nav-link {
  position: relative; flex: 0 0 auto;
  padding: 20px 22px; font-size: 16px; font-weight: 600;
  color: #8a8d94; text-decoration: none; white-space: nowrap;
  transition: color .15s;
}
.cln-nav-link:hover { color: var(--cln-ink); }
.cln-nav-link.active { color: var(--cln-ink); }
.cln-nav-link.active::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--cln-blue);
}

/* ── 섹션 공통 ──────────────────────────────── */
.cln-section { padding: 64px 0; }
.cln-section--yoon {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(238, 73, 22, .06), transparent 60%),
    #f4f5f7;
}
.cln-sec-head { text-align: center; margin-bottom: 44px; }
.cln-sec-tag {
  display: inline-block; font-size: 12px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cln-blue); margin-bottom: 12px;
}
.cln-sec-title {
  margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800;
  letter-spacing: -.03em; color: var(--cln-ink);
}
.cln-sec-sub {
  margin: 14px auto 0; max-width: 720px;
  font-size: 15px; line-height: 1.75; color: var(--cln-gray); word-break: keep-all;
}

@media (max-width: 760px) {
  .cln-sec-sub .cln-mo-break { display: block; }
}

/* ── 윤 콜렉션 배너 ─────────────────────────── */
.cln-banner { margin: 0 0 40px; border-radius: 16px; overflow: hidden; line-height: 0;
  box-shadow: 0 12px 40px rgba(20, 22, 27, .12); }
.cln-banner img { width: 100%; display: block; }
.cln-banner .cln-banner-mo { display: none; }
@media (max-width: 760px) {
  .cln-banner .cln-banner-pc { display: none; }
  .cln-banner .cln-banner-mo { display: block; }
}


.cln-plan {
  position: relative;
  background: #fff; border: 1px solid var(--cln-line2); border-radius: 18px;
  padding: 32px 32px 34px; margin-bottom: 26px;
  box-shadow: 0 4px 18px rgba(20, 22, 27, .05);
}

.cln-plan--best {
  border: 1.5px solid rgba(238, 73, 22, .38); padding: 30.5px 30.5px 32.5px;
  box-shadow: 0 14px 40px rgba(20, 22, 27, .08);
}
.cln-plan--best .cln-plan-inner {
  background: transparent; border-radius: 0; padding: 0;
}

.cln-plan-ribbon {
  position: absolute; top: 0; left: 26px; transform: translateY(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #fff;
  padding: 7px 14px; border-radius: 999px;
  background: var(--cln-blue);
  box-shadow: 0 6px 16px rgba(238, 73, 22, .35);
}

.cln-plan-head { margin-bottom: 28px; }
.cln-plan-head-main {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.cln-plan-name {
  margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.35; color: var(--cln-ink);
}
.cln-plan-type {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; color: #5a5e66;
  background: #f0f1f4; padding: 5px 12px; border-radius: 999px;
}
.cln-plan-keyword {
  margin: 16px 0 0; font-size: 16px; font-weight: 700; line-height: 1.6;
  color: #2a2d34;
}
.cln-plan-desc {
  margin: 10px 0 0; font-size: 14px; line-height: 1.85; color: var(--cln-gray);
  word-break: keep-all;
}

/* ── 카드 행 ────────────────────────────────── */
.cln-card-row {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ── 윤 콜렉션 가격 카드 ─────────────────────── */
.cln-card {
  border: 1px solid var(--cln-line2); border-radius: 18px; background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.cln-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(20, 22, 27, .14);
  border-color: transparent;
}
.cln-card-link {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
}
/* 상단 헤더 — 개인용/기업용을 아이콘과 함께 크게 강조 */
.cln-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; color: #fff;
}
.cln-card-head--personal { background: var(--cln-blue); }
.cln-card-head--business { background: #2f3540; }
.cln-card-head--both     { background: var(--cln-ink); }
.cln-card-head::before {
  content: ""; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px; background: rgba(255,255,255,.16);
  background-repeat: no-repeat; background-position: center; background-size: 17px;
}
/* 개인용 = 사람 아이콘 */
.cln-card-head--personal::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* 기업용 = 빌딩 아이콘 */
.cln-card-head--business::before,
.cln-card-head--both::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1.5'/%3E%3Cpath d='M9 8h0M15 8h0M9 12h0M15 12h0M9 16h6'/%3E%3C/svg%3E");
}
.cln-card-type {
  display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.25;
}
.cln-card-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 20px 20px 20px;
}

/* 스펙 정의 리스트 (컴팩트) */
.cln-spec { margin: 0 0 16px; }
.cln-spec > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--cln-line2);
}
.cln-spec > div:first-child { padding-top: 0; }
.cln-spec dt { margin: 0; font-size: 12.5px; color: #8b8e95; flex: 0 0 auto; line-height: 1.5; }
.cln-spec dd {
  margin: 0; font-size: 13px; font-weight: 400; color: #2e3038;
  text-align: right; line-height: 1.5; word-break: keep-all;
}


.cln-price {
  margin-top: auto;
  background: var(--cln-soft);
  border-radius: 13px;
  padding: 14px 16px;
}
.cln-price-main { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.cln-price-num {
  font-size: 29px; font-weight: 800; letter-spacing: -.03em; color: var(--cln-ink);
  line-height: 1;
}
.cln-price-per { font-size: 13px; font-weight: 600; color: var(--cln-gray); }
.cln-price-per b { font-weight: 800; color: #3a3d45; }
.cln-price-from { font-size: 12px; color: var(--cln-gray); margin-left: 3px; }
.cln-price-sub {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed #dfe0e4;
  font-size: 12px; color: var(--cln-gray);
}
.cln-price-sub del { color: #b1b3ba; margin-left: 4px; }
.cln-price-sticker {
  display: inline-block; font-size: 11px; font-weight: 800; color: #fff;
  background: #cf3a52; padding: 2px 7px; border-radius: 5px; margin-right: 5px;
}

.cln-card-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px; padding: 11px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; color: var(--cln-ink);
  background: #fff; border: 1.5px solid var(--cln-line);
  transition: background .15s, border-color .15s, color .15s;
}
.cln-card:hover .cln-card-cta {
  background: var(--cln-ink); border-color: var(--cln-ink); color: #fff;
}
.cln-card-cta i { font-style: normal; transition: transform .15s; }
.cln-card:hover .cln-card-cta i { transform: translateX(4px); }


.cln-tabbar {
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; margin-bottom: 34px; padding-bottom: 2px;
  cursor: grab; -webkit-overflow-scrolling: touch;
}
.cln-tabbar::-webkit-scrollbar { display: none; }
.cln-tabbar.dragging { cursor: grabbing; user-select: none; }
.cln-tab {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--cln-gray);
  background: #fff; border: 1px solid #e1e2e8; border-radius: 999px;
  padding: 10px 20px; transition: all .15s;
}
.cln-tab:hover { border-color: var(--cln-blue); color: var(--cln-blue); }
.cln-tab.active {
  color: #fff; border-color: var(--cln-ink);
  background: var(--cln-ink);
}


.cln-bgrid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cln-bcard {
  border: 1px solid var(--cln-line2); border-radius: 14px; background: #fff;
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.cln-bcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(20, 22, 27, .12);
}
.cln-bcard-link {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
}
.cln-bcard-thumb {
  background: #fff; line-height: 0;
}
.cln-bcard-thumb img {
  display: block; width: 100%; height: auto;
}
.cln-bcard-body { padding: 18px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.cln-bcard-name {
  margin: 0 0 12px; font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  color: var(--cln-ink); line-height: 1.35;
}
.cln-price--brand { padding: 10px 12px; }
.cln-price--brand .cln-price-num { font-size: 21px; }

.cln-empty {
  grid-column: 1 / -1; text-align: center; color: #9a9da4;
  padding: 60px 0; font-size: 15px;
}


@media (max-width: 760px) {
  .cln-hero { padding: 48px 0 42px; }
  .cln-section { padding: 48px 0; }
  .cln-plan { padding: 24px 18px 26px; }
  .cln-plan--best { padding: 22px 16px 24px; }
  .cln-plan-ribbon { left: 16px; }
  .cln-plan-name { font-size: 21px; }
  .cln-plan-keyword { font-size: 14px; }
  .cln-plan-desc { font-size: 12px; }
  .cln-nav-link { padding: 16px 16px; font-size: 15px; }
  .cln-nav-link.active::after { left: 16px; right: 16px; }
}