/* 추천인 코드 안내 — 바탕 캔버스 + 흰 카드 + 한 가지 강조색
   구조: :root 는 중립 테마(세이지 바탕 + 라임). 브랜드 페이지는 body 의 brand-<slug> 가 색 세트와
   버튼 효과를, layout-<변형> 이 배치를 고른다(lib/layout.js). 세 브랜드가 같은 틀의 복제로 보이지 않게 한다.
   깊이는 그림자가 아니라 지면 대비(바탕 ↔ 흰 카드)로 만든다.

   색 규칙 — 새 색이 필요하면 리터럴을 박지 말고 토큰을 추가한다. 브랜드 색은 관리자 저장값이 아니라
   여기 슬러그별로 고정한다(흰 글씨 대비를 검증한 값만 쓰기 위해서다).
   대비 규칙 — 작은 글자의 보조색은 --mute(#5f625d) 이하로 옅게 하지 않는다.
   흰 바탕 6.19:1 / 세이지 5.15:1 / 세 브랜드 바탕 톤 5.1:1 이상. #868685 는 흰 바탕 3.64:1 로 AA 미달이다. */

:root{
  --bg:#e8ebe6;          /* 세이지 캔버스 */
  --bg-hover:#dfe3dc;
  --card:#ffffff;
  --ink:#0e0f0c;         /* 흰 19.2:1 / 세이지 16.0:1 */
  --ink-2:#454745;       /* 본문. 흰 9.37:1 / 세이지 7.79:1 */
  --mute:#5f625d;        /* 보조. 흰 6.19:1 / 세이지 5.15:1 */
  --line:#e8ebe6;        /* 흰 카드 안의 구분선(장식) */
  --line-2:#d3d7cf;      /* 바탕 위의 구분선(장식) */
  --primary:#9fe870;     /* 강조(이동 버튼). 위의 --on-primary 글자 13.05:1 */
  --on-primary:#0e0f0c;
  --primary-hover:#cdffad;
  --primary-edge:#8bd65c;
  --primary-pale:#e2f6d5;
  --ink-deep:#163300;    /* 복사 성공 알약. 위의 --on-deep 글자 9.45:1 */
  --on-deep:#9fe870;
  --halo:rgba(159,232,112,.4);
  --neg:#a72027;         /* 흰 7.29:1 / --neg-bg 6.39:1 */
  --neg-bg:#fdecec;
  --note-bg:#fff4c2;
  --note-ink:#4a3b1c;
  --foot-ink:#c8cbc5;    /* --ink 위 11.72:1 */
  --foot-link:#9fe870;   /* --ink 위 13.05:1 */
  --radius-xl:24px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-pill:9999px;
  --quickbar-h:76px;
}

/* ── 브랜드 색 세트 ─────────────────────── */
/* 버튼 글자는 흰색. 흰 글자 대비 — 사쿠라허브 #c8233a 5.59:1 / 라무몰 #1646a8 8.48:1 / 델리샵 #0f7a42 5.41:1.
   델리샵의 예전 초록 #17924f 는 흰 글자 3.99:1 로 AA 미달이라 같은 계열에서 한 단계 짙게 잡았다.
   같은 색을 흰 카드 위 글자(단계 번호 등)로 써도 5.4:1 이상이다.
   푸터 링크는 잉크 바탕 위에 놓이므로 브랜드 색 대신 옅은 톤(--foot-link)을 쓴다. */
.brand-sakuraherb{
  --bg:#fbeeee;--bg-hover:#f5e1e3;--line-2:#efd3d6;
  --primary:#c8233a;--on-primary:#ffffff;--primary-hover:#a81f2e;--primary-edge:#a81f2e;
  --primary-pale:#fde3e6;--ink-deep:#6e1320;--on-deep:#ffffff;
  --halo:rgba(200,35,58,.22);--foot-link:#fde3e6;
}
.brand-ramumall{
  --bg:#e6edf8;--bg-hover:#dbe4f3;--line-2:#cfdaee;
  --primary:#1646a8;--on-primary:#ffffff;--primary-hover:#0f3278;--primary-edge:#0f3278;
  --primary-pale:#dfe8f8;--ink-deep:#0b2458;--on-deep:#ffffff;
  --halo:rgba(22,70,168,.24);--foot-link:#dfe8f8;
}
.brand-delishop{
  --bg:#e9f6ee;--bg-hover:#dcefe3;--line-2:#cde3d5;
  --primary:#0f7a42;--on-primary:#ffffff;--primary-hover:#0b5c31;--primary-edge:#0b5c31;
  --primary-pale:#d6efe0;--ink-deep:#083d21;--on-deep:#ffffff;
  --halo:rgba(15,122,66,.24);--foot-link:#d6efe0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* 헤더가 고정이 아니므로 #code 로 이동할 때 카드 위에 약간의 숨을 준다 */
#code{scroll-margin-top:16px}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font:400 16px/1.7 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
       "Apple SD Gothic Neo","Malgun Gothic",system-ui,"Segoe UI",sans-serif;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  /* 본문이 짧은 페이지(홈 등)에서도 푸터가 화면 바닥까지 내려가 아래에 바탕색 띠가 남지 않게 한다 */
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:3px}
.wrap{width:100%;max-width:680px;margin:0 auto;padding:0 16px}
/* position:fixed 라 페이지가 스크롤된 상태에서 포커스를 받아도 화면 안에 나타난다. */
.skip{position:fixed;left:-9999px;top:8px;z-index:60}
.skip:focus{left:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--radius-pill)}
/* 사이트의 모든 조작 요소가 이 규칙 하나로 덮인다. 잉크는 흰·바탕 톤·강조색 어디서나 3:1 을 넘는다. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
main[tabindex]:focus:not(:focus-visible){outline:none}

/* 스크린리더 전용 텍스트. display:none / visibility:hidden 은 접근성 트리에서 빠지므로 쓰지 않는다. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ── 헤더 ───────────────────────────── */
/* 다른 브랜드로 가는 메뉴는 두지 않는다(lib/layout.js 참조). 오른쪽은 코드 복사 버튼 하나(PC 전용). */
.site-head{background:var(--card)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;letter-spacing:-.03em}

/* 헤더 코드 버튼 — 코드 ↔ '복사하기' 가 세로로 굴러간다. 1초 뒤 시작해 세 번 구르고 코드에서 멈춘다.
   끝없이 반복하지 않는다(WCAG 2.2.2 — 5초 넘게 스스로 움직이는 것은 멈출 수단이 필요하다).
   마우스를 올리거나 키보드 포커스가 오면 그동안만 다시 구른다(사용자가 시작한 움직임이다).
   복사하면 두 번째 칸('복사됨')에서 멈춘다. 모바일은 하단 바가 같은 일을 하므로 숨긴다. */
.head-copy{display:none}
.roll{display:block;height:20px;line-height:20px;overflow:hidden}
.roll-track{display:block;animation:head-roll 3.2s ease-in-out 1s 3 both}
.roll-item{display:block;height:20px;text-align:center;white-space:nowrap}
.roll-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:.01em}
.head-copy:hover .roll-track,.head-copy:focus-visible .roll-track{animation:head-roll-again 2.4s ease-in-out infinite}
.head-copy.copied .roll-track,.head-copy.copyfail .roll-track{animation:none;transform:translateY(-20px)}
@keyframes head-roll{0%,35%{transform:translateY(0)}45%,80%{transform:translateY(-20px)}90%,100%{transform:translateY(0)}}
@keyframes head-roll-again{0%,35%{transform:translateY(0)}45%,80%{transform:translateY(-20px)}90%,100%{transform:translateY(0)}}
@media (min-width:768px){
  .head-copy{
    display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:0;cursor:pointer;
    border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);
    font-family:inherit;font-size:14px;font-weight:700;transition:background .14s;
  }
  .head-copy:hover{background:var(--primary-hover)}
  .head-copy.copied{background:var(--ink-deep);color:var(--on-deep)}
  .head-copy.copyfail{background:var(--neg-bg);color:var(--neg);box-shadow:inset 0 0 0 1px var(--neg)}
}

/* ── 본문 골격 ───────────────────────── */
main.wrap{padding-top:32px;padding-bottom:48px}  /* .wrap 의 좌우 여백을 덮어쓰지 않도록 위아래만 지정한다 */
.page-head{margin:0 0 24px}
/* 무거운 제목(900)이 이 디자인의 목소리다. 한글은 행간을 너무 조이면 받침이 겹치므로 1.12. */
h1{
  font-size:clamp(34px,9vw,54px);line-height:1.12;margin:0;
  letter-spacing:-.04em;color:var(--ink);font-weight:900;
}
.lede{color:var(--ink-2);font-size:16px;margin:14px 0 0;line-height:1.7}

.card{background:var(--card);border-radius:var(--radius-xl);padding:24px 20px;margin:0 0 16px}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
h2{font-size:21px;line-height:1.4;margin:0 0 14px;letter-spacing:-.03em;color:var(--ink);font-weight:800}
h3{font-size:16px;margin:22px 0 6px;color:var(--ink);font-weight:700;letter-spacing:-.02em}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
code{background:var(--bg);padding:1px 6px;border-radius:6px;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
ul{margin:0 0 12px;padding-left:20px}
li{margin:5px 0}
strong{color:var(--ink);font-weight:700}

/* ── 추천인 코드 카드 ─────────────────── */
.refcard{background:var(--card);border-radius:var(--radius-xl);margin:0 0 16px}
.refcard-inner{padding:24px 20px}
.refcard-label{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 10px}
/* 정적 안내문. 항상 보이고, 크롤러도 읽고, 키보드로도 도달할 수 있다. */
.refcard-hint{font-size:13.5px;line-height:1.65;color:var(--mute);margin:12px 0 0}

/* 코드 행 전체가 복사 버튼이다. 조작 요소이므로 경계는 잉크 1px —
   바탕 톤 채움만으로는 흰 카드와 1.2:1 이라 '누를 수 있다'는 신호가 없다.
   transition 은 '상태에서 빠져나올 때'의 값이다(느리게 잦아든다). */
.codebox-value{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  flex-wrap:wrap;background:var(--bg);border:1px solid var(--ink);border-radius:var(--radius-lg);
  padding:16px 14px 16px 18px;cursor:pointer;text-align:left;
  font-family:inherit;transition:background .28s ease,border-color .28s ease;
}
.codebox-value:hover{background:var(--bg-hover)}
/* font 단축 속성 안에 clamp() 를 넣으면 파싱에 실패하는 브라우저가 있어 풀어서 쓴다.
   min-width:0 과 위의 flex-wrap 은 좁은 폭의 안전판 — 코드를 자르는 대신 알약이 아랫줄로 내려간다. */
.codebox-value .code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:800;font-size:clamp(23px,7vw,32px);line-height:1.2;
  letter-spacing:.01em;color:var(--ink);min-width:0;overflow-wrap:anywhere;
}
/* 프로그래밍 복사가 막히는 환경(카카오 인앱 등)에서 코드를 손으로 선택할 수 있어야 한다. */
.codebox-value .code,[data-ref-code],.spec td .mono{
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
}
/* '복사' ↔ '복사됨' ↔ '복사 실패' 로 글자 수가 바뀌어도 폭을 고정해 좌우로 튀지 않게 한다. */
.codebox-value .copy{
  flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:84px;
  font-size:14px;font-weight:700;color:#fff;background:var(--ink);
  border:1px solid var(--ink);border-radius:var(--radius-pill);padding:8px 16px;
  transition:background .28s ease,border-color .28s ease,color .28s ease;
}

/* 상태 진입은 빠르게(120ms), 복귀는 기본값(280ms)으로 느리게. */
.codebox-value.copied,.codebox-value.copied .copy,
.codebox-value.copyfail,.codebox-value.copyfail .copy{
  transition-duration:.12s;transition-timing-function:ease-out;
}
.codebox-value.copied{background:var(--primary-pale);border-color:var(--ink-deep)}
.codebox-value.copied .copy{color:var(--on-deep);background:var(--ink-deep);border-color:var(--ink-deep)}
.codebox-value.copyfail{background:var(--neg-bg);border-color:var(--neg)}
.codebox-value.copyfail .copy{color:var(--neg);background:var(--card);border-color:var(--neg)}

/* 코드 갱신일 */
.verified{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mute);margin:10px 0 0}
.verified svg{flex:none;width:15px;height:15px}
.page-head .verified{margin:14px 0 0}
.page-head .verified + .lede{margin-top:10px}

/* 이동 버튼 — 강조색(--primary)을 쓰는 자리. 이동만 한다(복사는 하지 않는다).
   색과 테두리는 아래 '버튼 효과' 의 --qb-* 토큰이 정한다. */
.cta{
  display:flex;align-items:center;justify-content:center;
  margin-top:16px;min-height:56px;padding:12px 24px;border-radius:var(--radius-pill);
  font-weight:700;font-size:17px;text-decoration:none;
}
.cta-main{display:flex;align-items:center;gap:8px}
.cta:active{transform:translateY(1px)}
.cta svg{flex:none;width:16px;height:16px}

/* ── 가입 단계 ─────────────────────────── */
/* <ol> 이 순서를 전하므로 숫자 배지는 장식(aria-hidden)이다. 모양은 layout-* 가 바꾼다.
   기본(쿠폰형 등): 강조색으로 채운 동그란 번호 배지 + 오른쪽 설명. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin:0}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--primary);color:var(--on-primary);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;
}
.step-title{display:block;color:var(--ink);font-size:16px;font-weight:700;line-height:1.5;padding-top:6px}
.step-body p{margin:2px 0 0;font-size:15px}

/* ── 추천 이유 ─────────────────────────── */
.benefits{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.benefits li{margin:0;display:grid;gap:2px;padding-left:22px;position:relative}
/* 체크 표시는 장식이다 — 항목의 뜻은 글자가 전부 담고 있다 */
.benefits li::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;
  background:var(--primary);
}
.benefits strong{color:var(--ink);font-size:16px;font-weight:700;line-height:1.5}
.benefits span{font-size:15px;color:var(--ink-2)}
.benefits-note{font-size:13px;color:var(--mute);margin-top:16px}

/* ── 정보 요약표 ───────────────────────── */
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{width:112px;font-weight:600;color:var(--mute);font-size:14px;padding-right:12px}
.spec td{color:var(--ink)}
.spec td .mono{font-family:ui-monospace,Menlo,monospace;font-weight:800;color:var(--ink)}

/* ── 토스트 ───────────────────────────── */
/* 짧은 알림 전용. 클릭을 가로채지 않는다. 하단 안전영역을 더해 iOS 제스처 바 위로 띄운다. */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  transform:translate(-50%,12px);max-width:calc(100% - 32px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .16s,transform .16s;z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── 게시물 목록 ───────────────────────── */
.postlist{list-style:none;margin:0;padding:0}
.postlist li{margin:0}
.postlist li+li{border-top:1px solid var(--line)}
.postlist a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 0;text-decoration:none;color:var(--ink)}
.postlist li:first-child a{padding-top:0}
.postlist li:last-child a{padding-bottom:0}
.postlist a:hover .t{text-decoration:underline}
.postlist .t{font-weight:600;font-size:16px;line-height:1.55;color:var(--ink)}
.postlist .d{font-size:13px;color:var(--mute);flex:none;font-variant-numeric:tabular-nums}
.more{display:inline-block;margin-top:16px;font-size:15px;font-weight:700;color:var(--ink)}

/* ── 게시물 상세 ───────────────────────── */
.notice{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--note-bg);border-radius:var(--radius-lg);
  padding:13px 16px;font-size:14px;color:var(--note-ink);margin:0 0 18px;
}
.notice svg{flex:none;width:16px;height:16px;margin-top:3px}
.notice a{font-weight:700;color:var(--note-ink)}
.post-meta{font-size:14px;color:var(--mute);margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
/* 구분자를 content:"·" 로 두면 일부 스크린리더가 그 점까지 낭독한다. 테두리로 그린다. */
.post-meta span+span{border-left:1px solid var(--line-2);padding-left:8px}
.post-thumb{border-radius:var(--radius-xl);margin:0 0 20px}
/* 게시물 본문은 숏코드(코드박스·가입버튼)와 문단이 섞여 흐른다. 소제목과 버튼 위아래로 숨을 둔다. */
article.card h2{margin-top:32px}
article.card .cta{margin:20px 0}
article.card .verified + *{margin-top:28px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0;padding:0;list-style:none}
.tags li{font-size:13px;color:var(--ink-2);background:var(--bg);border-radius:var(--radius-pill);padding:5px 12px;margin:0}

/* ── 이용 안내 (/terms/) ───────────────── */
.terms{list-style:none;margin:0;padding:0}
.terms li{margin:0;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7}
.terms li:first-child{padding-top:0}
.terms li:last-child{padding-bottom:0;border-bottom:0;color:var(--mute);font-size:14px}
.terms strong{display:block;margin-bottom:2px}

/* ── 게재 원칙 ─────────────────────────── */
/* 카드와 달리 채움 없이 선만 둔다 — '본문이 아닌 메타'라는 신호. */
.trust{border:1px solid var(--line-2);border-radius:var(--radius-xl);padding:20px;margin:0 0 16px}
.trust h2{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:0}
.trust p{font-size:13.5px;color:var(--mute);line-height:1.7;margin:0 0 6px}
.trust p:last-child{margin-bottom:0}

/* ── 푸터 ─────────────────────────────── */
/* 면책 고지는 이 사이트의 법적 안전판이다. 잉크 위 --foot-ink 로 11.7:1 — 읽히라고 쓴 문장이다. */
.site-foot{background:var(--ink);padding:36px 0 44px}
.site-foot p{font-size:12.5px;line-height:1.75;color:var(--foot-ink);margin:0 0 4px}
.foot-links{margin:0 0 14px !important}
.foot-links a{color:var(--foot-link);font-weight:700;font-size:13.5px}

/* ── 모바일 하단 고정 바 ────────────────── */
/* 왼쪽 코드 복사(잉크), 오른쪽 추천인 링크 이동(강조색). 데스크톱에서는 숨긴다 —
   코드 카드의 복사 버튼과 이동 버튼이 같은 일을 한다. */
.quickbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  /* 바 자체는 투명 — 버튼 두 개만 떠 있다. 빈 틈의 탭은 뒤의 내용으로 통과시킨다. */
  background:transparent;pointer-events:none;
}
.quickbar > *{pointer-events:auto}
.quickbar-copy,.quickbar-go{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 12px;
  border-radius:var(--radius-pill);font-family:inherit;font-weight:700;font-size:16px;line-height:1.2;
  text-decoration:none;cursor:pointer;
  /* 흰 카드 위를 지나갈 때도 버튼 윤곽이 보이도록 옅은 그림자를 둔다 */
  box-shadow:0 4px 14px rgba(14,15,12,.18);
}
/* 바가 마지막 문단(푸터 면책 고지)을 가리지 않도록 푸터 안쪽을 그 높이만큼 늘린다.
   body 에 여백을 주면 푸터 아래로 바탕색 띠가 드러난다. 토스트도 바 위로 올린다. */
.has-quickbar .site-foot{padding-bottom:calc(44px + var(--quickbar-h) + env(safe-area-inset-bottom,0px))}
.has-quickbar .toast{bottom:calc(env(safe-area-inset-bottom,0px) + var(--quickbar-h) + 12px)}

/* ── 버튼 효과 (브랜드마다 다르게) ──────── */
/* 대상: 모바일 하단 바의 두 버튼, 그리고 PC 의 이동 버튼(.cta). 모바일에서 .cta 는 가만히 둔다 —
   하단 바와 동시에 움직이면 화면이 산만해진다.
   색은 --qb-* 토큰으로만 바꾼다. 상태(복사됨·실패)도 토큰만 바꾼다 — background 단축 속성을
   다시 쓰면 회전 효과의 테두리 그림이 지워진다.
     기본·사쿠라허브  회전: 테두리를 따라 빛 한 줄기가 5초에 한 바퀴 돈다
     라무몰           호흡: 버튼 둘레의 옅은 빛이 3.2초 주기로 번졌다 잦아든다
     델리샵           스침: 버튼 면 위로 빛이 3.6초마다 한 번 비스듬히 지나간다
   '동작 줄이기' 설정에서는 맨 아래 prefers-reduced-motion 규칙이 모두 멈춘다. */
.quickbar-copy{--qb-fill:var(--ink);--qb-edge:#2b2d28;--qb-glint:var(--primary);--qb-text:#fff}
.quickbar-copy.copied{--qb-fill:var(--ink-deep);--qb-edge:var(--ink-deep);--qb-glint:var(--on-deep);--qb-text:var(--on-deep)}
.quickbar-copy.copyfail{--qb-fill:var(--neg-bg);--qb-edge:var(--neg);--qb-glint:var(--neg);--qb-text:var(--neg)}
.quickbar-go,.cta{--qb-fill:var(--primary);--qb-edge:var(--primary-edge);--qb-glint:#ffffff;--qb-text:var(--on-primary)}
.quickbar-go:hover,.cta:hover{--qb-fill:var(--primary-hover)}
.quickbar-copy,.quickbar-go,.cta{
  background:var(--qb-fill);color:var(--qb-text);border:2px solid var(--qb-edge);
}

/* 회전 — 채움은 padding-box, 테두리는 border-box 에 따로 그려 테두리 2px 만 conic-gradient 로 칠한다.
   각도는 @property 로 등록해야 보간된다. 지원하지 않는 브라우저에서는 멈춘 테두리로 남는다. */
@property --qb-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes qb-orbit{to{--qb-angle:360deg}}
@keyframes qb-breathe{
  0%,100%{box-shadow:0 4px 14px rgba(14,15,12,.16),0 0 0 0 var(--halo)}
  50%{box-shadow:0 4px 14px rgba(14,15,12,.16),0 0 0 7px var(--halo)}
}
@keyframes qb-sweep{
  0%{transform:translateX(-140%) skewX(-20deg)}
  55%,100%{transform:translateX(360%) skewX(-20deg)}
}
.quickbar-copy,.quickbar-go{
  border-color:transparent;
  background:
    linear-gradient(var(--qb-fill),var(--qb-fill)) padding-box,
    conic-gradient(from var(--qb-angle),var(--qb-edge) 0 64%,var(--qb-glint) 80%,var(--qb-edge) 96%) border-box;
  animation:qb-orbit 5s linear infinite;
}
/* 두 버튼이 같은 박자로 움직이면 기계적으로 보이므로 반 박자 어긋나게 둔다 */
.quickbar-go{animation-delay:-2.5s}

.brand-ramumall .quickbar-copy,.brand-ramumall .quickbar-go{
  background:var(--qb-fill);border-color:var(--qb-edge);animation:qb-breathe 3.2s ease-in-out infinite;
}
.brand-ramumall .quickbar-go{animation-delay:-1.6s}

.brand-delishop .quickbar-copy,.brand-delishop .quickbar-go{
  background:var(--qb-fill);border-color:var(--qb-edge);animation:none;position:relative;overflow:hidden;
}
.brand-delishop .quickbar-copy::after,.brand-delishop .quickbar-go::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-140%) skewX(-20deg);animation:qb-sweep 3.6s ease-in-out infinite;
}
.brand-delishop .quickbar-go::after{animation-delay:-1.8s}

@media (min-width:768px){
  .cta{
    border-color:transparent;
    background:
      linear-gradient(var(--qb-fill),var(--qb-fill)) padding-box,
      conic-gradient(from var(--qb-angle),var(--qb-edge) 0 64%,var(--qb-glint) 80%,var(--qb-edge) 96%) border-box;
    animation:qb-orbit 5s linear infinite;
  }
  .brand-ramumall .cta{background:var(--qb-fill);border-color:var(--qb-edge);animation:qb-breathe 3.2s ease-in-out infinite}
  .brand-delishop .cta{background:var(--qb-fill);border-color:var(--qb-edge);animation:none;position:relative;overflow:hidden}
  .brand-delishop .cta::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
    transform:translateX(-140%) skewX(-20deg);animation:qb-sweep 3.6s ease-in-out infinite;
  }
}

/* ── 배치 ① 히어로 (사쿠라허브) ───────────── */
/* 코드 카드가 첫 화면의 주인공 — 코드를 크게, 여백을 넉넉히. 가입 단계는 세로 타임라인. */
.layout-hero .refcard-inner{padding:28px 22px}
.layout-hero .codebox-value{padding:20px 16px 20px 22px}
.layout-hero .codebox-value .code{font-size:clamp(26px,7.4vw,44px)}
.layout-hero .steps{gap:0}
.layout-hero .steps li{position:relative;padding-bottom:22px}
.layout-hero .steps li:last-child{padding-bottom:0}
/* 번호 사이를 잇는 선(장식) */
.layout-hero .steps li:not(:last-child)::before{
  content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--line-2);
}
.layout-hero .step-num{background:var(--card);color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}

/* ── 배치 ② 좌우 분할 (라무몰) ───────────── */
/* PC(900px 이상)에서는 넓은 판에 왼쪽 제목·단계 / 오른쪽 코드 카드(스크롤해도 따라온다).
   모바일에서는 제목 → 코드 카드 → 단계 순서로 쌓인다(마크업 순서 그대로).
   가입 단계는 가로 세 칸 — 큰 숫자가 번호 역할을 한다. */
.layout-split .wrap{max-width:1040px}
.split-top{display:flex;flex-direction:column}
/* 세 칸이 가장 긴 칸 높이로 늘어나도 번호와 제목 사이는 벌어지지 않게 위로 붙인다(align-content) */
.layout-split .steps li{background:var(--bg);border-radius:var(--radius-lg);padding:16px;align-content:start}
.layout-split .step-num{
  width:auto;height:auto;border-radius:0;background:none;color:var(--primary);
  font-size:30px;font-weight:900;line-height:1;justify-content:flex-start;
}
.layout-split .step-title{padding-top:0}
@media (min-width:560px){
  .layout-split .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .layout-split .steps li{grid-template-columns:1fr;gap:10px}
}
@media (min-width:900px){
  .split-top{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-areas:"head card" "steps card";column-gap:32px;align-items:start;margin-bottom:16px;
  }
  .split-head{grid-area:head}
  .split-top .refcard{grid-area:card;position:sticky;top:24px}
  .split-top .steps-card{grid-area:steps;margin-bottom:0}
  .layout-split h1{font-size:60px}
}

/* ── 배치 ③ 쿠폰형 (델리샵) ───────────────── */
/* 코드 카드를 쿠폰처럼 — 강조색 점선 테두리, 양옆에 뚫린 반원, 안내문 아래 절취선.
   반원은 바탕색 원을 테두리 위에 얹어 만든다(장식). 가입 단계는 기본 번호 배지. */
.layout-coupon .refcard{position:relative;border:2px dashed var(--primary)}
.layout-coupon .refcard::before,.layout-coupon .refcard::after{
  content:"";position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--bg);
}
.layout-coupon .refcard::before{left:-15px}
.layout-coupon .refcard::after{right:-15px}
.layout-coupon .refcard-label{color:var(--primary);letter-spacing:.06em}
.layout-coupon .refcard-hint{padding-bottom:18px;border-bottom:2px dashed var(--line-2)}
.layout-coupon .codebox-value{border-style:dashed;border-width:2px;border-color:var(--primary)}
.layout-coupon .codebox-value.copied{border-style:solid;border-color:var(--ink-deep)}
.layout-coupon .codebox-value.copyfail{border-style:solid;border-color:var(--neg)}

/* ── 반응형 ───────────────────────────── */
/* 320px(구형 iPhone SE / 폴드 커버 / 데스크톱 400% 확대)에서는 여백과 알약을 더 줄인다. */
@media (max-width:360px){
  .codebox-value{padding:13px 12px 13px 14px;gap:8px}
  .codebox-value .copy{min-width:60px;padding:7px 11px;font-size:13px}
  .quickbar-copy,.quickbar-go{font-size:15px;padding:0 8px}
}

@media (min-width:640px){
  .wrap{padding:0 24px}
  main.wrap{padding-top:44px;padding-bottom:56px}
  .card,.refcard-inner{padding:28px}
  .layout-hero .refcard-inner{padding:34px 32px}
  .trust{padding:22px 24px}
}
@media (min-width:768px){
  .quickbar{display:none}
  .has-quickbar .site-foot{padding-bottom:44px}
  .has-quickbar .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 20px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after{transition:none !important;animation:none !important}
}