/* ============================================================
   RainPaws — 자사몰 디자인 시스템 v2
   컨셉: "빛의 기록 보관소" · 종이 질감 위의 공예 에디토리얼
   사진(크림 리넨 · 오크 · 자연광 · 블루 바이알)에서 추출한 팔레트
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap");

:root{
  /* 종이 */
  --paper:#FAF7F1;
  --paper-2:#F3EEE4;
  --paper-3:#EAE3D5;
  --paper-4:#FFFDF9;

  /* 잉크 */
  --ink:#1C1915;
  --ink-2:#5E574C;
  --ink-3:#958D7E;
  --ink-4:#B8B0A1;

  /* 선 */
  --line:#D8D0BF;
  --line-2:#E6DFD1;

  /* 유일한 악센트 — 바이알 블루 */
  --blue:#1B46C2;
  --blue-deep:#102A79;
  --blue-wash:#EDF0FB;
  --oak:#B0834D;

  --fd:'Hahmlet',serif;              /* 디스플레이 */
  --fb:'Pretendard',-apple-system,sans-serif; /* 본문 */
  --fl:'EB Garamond',serif;               /* 라틴 라벨 */

  --max:1320px;
  --gut:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
::selection{background:var(--blue);color:#fff;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--fb);
  background:var(--paper);
  color:var(--ink);
  font-weight:350;
  line-height:1.7;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 한글 줄바꿈 — 어절 단위로만 끊고, 긴 영문/URL만 예외적으로 쪼갠다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 본문 줄바꿈을 의미 단위로 잡되, 좁은 화면에서는 자연스럽게 흐르게 둔다 */
br.d{display:none;}
@media(min-width:900px){ br.d{display:inline;} }

/* 제목은 줄 길이를 고르게, 본문은 외톨이 단어를 막는다 (지원 브라우저 한정) */
h1,h2,h3,h4,.d1,.d2,.d3,.open h1,.frow h4,.tier .tn h4{text-wrap:balance;}
p,.body-l,.body-m,.body-s,.lead{text-wrap:pretty;}

/* 종이 그레인 — 전체를 덮는 아주 옅은 노이즈 */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:inherit;}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink);}
table{border-collapse:collapse;}

/* ---------- 레이아웃 ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.wrap-n{max-width:720px;margin:0 auto;padding:0 var(--gut);}
.bleed{width:100%;}
section{position:relative;}

/* ---------- 타이포 ---------- */
.d1{font-family:var(--fd);font-weight:400;font-size:clamp(34px,5.2vw,68px);line-height:1.28;letter-spacing:-.035em;}
.d2{font-family:var(--fd);font-weight:400;font-size:clamp(26px,3.3vw,42px);line-height:1.38;letter-spacing:-.03em;}
.d3{font-family:var(--fd);font-weight:400;font-size:clamp(20px,2.1vw,27px);line-height:1.5;letter-spacing:-.025em;}
.d1 em,.d2 em,.d3 em{font-style:normal;color:var(--blue);}

.lat{font-family:var(--fl);font-style:italic;font-size:15px;color:var(--ink-3);letter-spacing:.01em;}
.idx{font-family:var(--fl);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);font-style:normal;}

.body-l{font-size:16.5px;line-height:2.1;color:var(--ink-2);font-weight:300;letter-spacing:-.012em;max-width:34em;}
.body-m{font-size:15px;line-height:1.95;color:var(--ink-2);font-weight:300;max-width:36em;}
.body-s{font-size:13px;line-height:1.85;color:var(--ink-3);font-weight:300;}
.body-l b,.body-m b{color:var(--ink);font-weight:600;}

.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

/* 섹션 머리 — 번호 + 하어라인 */
.sec-label{display:flex;align-items:baseline;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:52px;}
.sec-label .n{font-family:var(--fl);font-size:13px;color:var(--blue);letter-spacing:.1em;}
.sec-label .t{font-family:var(--fl);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);}
.sec-label .ko{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-weight:300;letter-spacing:.02em;}

/* ---------- 버튼 ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px;font-size:14px;font-weight:500;letter-spacing:.01em;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  overflow:hidden;transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;
}
.btn>*{position:relative;z-index:1;}
.btn span{position:relative;z-index:1;}
.btn:hover{color:var(--paper);}
.btn:hover::before{transform:translateY(0);}
.btn-fill{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn-fill::before{background:var(--blue);}
.btn-fill:hover{color:#fff;border-color:var(--blue);}
.btn-blue{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn-blue::before{background:var(--blue-deep);}
.btn-blue:hover{color:#fff;border-color:var(--blue-deep);}
.btn-block{width:100%;}
.btn-sm{padding:12px 22px;font-size:13px;}
.btn[disabled]{opacity:.35;pointer-events:none;}

/* 밑줄 링크 */
.ulink{position:relative;display:inline-block;font-size:13.5px;letter-spacing:.02em;padding-bottom:3px;}
.ulink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform-origin:right;transform:scaleX(1);transition:transform .4s var(--ease);}
.ulink:hover::after{transform-origin:left;animation:ul .6s var(--ease);}
@keyframes ul{0%{transform:scaleX(1);transform-origin:right;}49%{transform:scaleX(0);transform-origin:right;}
  50%{transform:scaleX(0);transform-origin:left;}100%{transform:scaleX(1);transform-origin:left;}}

/* ---------- 헤더 ---------- */
.topbar{background:var(--ink);color:var(--paper);text-align:center;font-size:11.5px;
  letter-spacing:.06em;padding:9px 20px;font-weight:300;}
.topbar b{color:#fff;font-weight:500;}

header{position:sticky;top:0;z-index:500;isolation:isolate;background:rgba(250,247,241,.88);
  backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line-2);}
.nav{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:78px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.nav .brand img{height:30px;width:auto;}
.nav menu{display:flex;gap:40px;list-style:none;justify-self:center;}
.nav menu a{font-size:13.5px;font-weight:400;letter-spacing:.02em;color:var(--ink-2);
  position:relative;padding:4px 0;transition:color .3s;}
.nav menu a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
.nav menu a:hover{color:var(--ink);}
.nav menu a:hover::after,.nav menu a.on::after{transform:scaleX(1);transform-origin:left;}
.nav menu a.on{color:var(--ink);}
.nav .util{display:flex;align-items:center;gap:22px;justify-self:end;}
.nav .util a{font-size:13px;color:var(--ink-2);letter-spacing:.02em;transition:color .3s;}
.nav .util a:hover{color:var(--ink);}
.cart-link{display:inline-flex;align-items:baseline;gap:6px;}
.cart-link .cnt{font-family:var(--fl);font-size:12px;color:var(--blue);}
.burger{display:none;width:26px;height:14px;position:relative;}
.burger i{position:absolute;left:0;width:100%;height:1px;background:var(--ink);transition:.35s var(--ease);}
.burger i:first-child{top:0;} .burger i:last-child{bottom:0;}
.burger.x i:first-child{top:6px;transform:rotate(45deg);}
.burger.x i:last-child{bottom:7px;transform:rotate(-45deg);}

/* ---------- 리빌 애니메이션 ---------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
[data-rv].rv-on{opacity:1;transform:none;}
[data-rv-l]{overflow:hidden;}
[data-rv-l] > *{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease);}
[data-rv-l].rv-on > *{transform:none;}

/* ---------- 이미지 ---------- */
.ph{position:relative;overflow:hidden;background:var(--paper-3);}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease);}
.ph.zoom:hover img{transform:scale(1.045);}
.ph .cap{position:absolute;left:16px;bottom:14px;font-family:var(--fl);font-style:italic;
  font-size:12.5px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4);}

/* ---------- 상품 인덱스(카드 아님) ---------- */
.plist{border-top:1px solid var(--line);}
.prow{
  display:grid;grid-template-columns:92px 1.25fr 2fr auto;gap:36px;align-items:center;
  padding:26px 8px;border-bottom:1px solid var(--line-2);
  transition:background .45s var(--ease),padding-left .45s var(--ease);
}
.prow:hover{background:var(--paper-4);padding-left:20px;}
.prow .pim{width:92px;height:112px;overflow:hidden;background:var(--paper-3);}
.prow .pim img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.prow:hover .pim img{transform:scale(1.07);}
.prow .pn{font-family:var(--fd);font-size:20px;letter-spacing:-.03em;line-height:1.4;}
.prow .pc{font-family:var(--fl);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;}
.prow .pd{font-size:13.5px;color:var(--ink-2);font-weight:300;line-height:1.8;}
.prow .pp{font-family:var(--fd);font-size:20px;letter-spacing:-.02em;white-space:nowrap;}
.prow .pp .w{font-size:13px;font-family:var(--fb);font-weight:300;margin-left:2px;}
.prow .pp.soon{font-family:var(--fb);font-size:12.5px;color:var(--ink-3);letter-spacing:.08em;font-weight:300;}
.prow .flag{display:inline-block;font-family:var(--fl);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:1px;margin-bottom:9px;}

/* 피처 카드(홈 상단 3종) */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-2);}
.fcell{background:var(--paper);padding:0 0 34px;transition:background .5s var(--ease);}
.fcell:hover{background:var(--paper-4);}
.fcell .ph{aspect-ratio:3/3.7;margin-bottom:26px;}
.fcell .in{padding:0 28px;}
.fcell .pc{font-family:var(--fl);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;}
.fcell .pn{font-family:var(--fd);font-size:23px;letter-spacing:-.03em;margin-bottom:10px;}
.fcell .pd{font-size:13.5px;color:var(--ink-2);font-weight:300;line-height:1.85;min-height:50px;margin-bottom:18px;}
.fcell .pp{font-family:var(--fd);font-size:19px;display:flex;align-items:baseline;justify-content:space-between;
  padding-top:16px;border-top:1px solid var(--line-2);}
.fcell .pp .arrow{font-family:var(--fb);font-size:13px;color:var(--ink-3);transition:transform .4s var(--ease),color .4s;}
.fcell:hover .pp .arrow{transform:translateX(5px);color:var(--blue);}

/* ---------- 노트/주의 ---------- */
.note{border:1px solid var(--line);padding:26px 28px;background:var(--paper-4);}
.note.blue{border-color:#C6D0F0;background:var(--blue-wash);}
.note h4{font-family:var(--fd);font-size:16px;margin-bottom:9px;letter-spacing:-.02em;}
.note p{font-size:13.5px;line-height:1.95;color:var(--ink-2);font-weight:300;}
.note .pin{font-family:var(--fl);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:10px;}

/* ---------- 푸터 ---------- */
footer{background:var(--paper-3);border-top:1px solid var(--line);padding:84px 0 40px;}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px;border-bottom:1px solid var(--line);}
.fgrid .fb img{height:34px;margin-bottom:20px;}
.fgrid h5{font-family:var(--fl);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.fgrid ul a{font-size:13.5px;color:var(--ink-2);font-weight:300;transition:color .3s;}
.fgrid ul a:hover{color:var(--blue);}
.fbtm{padding-top:28px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-3);line-height:2;font-weight:300;}
.fbtm .biz{max-width:640px;}
.fbtm .mark{font-family:var(--fl);font-style:italic;font-size:13px;}

/* ---------- 유틸 ---------- */
.hr{height:1px;background:var(--line);border:0;}
.center{text-align:center;}
.mb0{margin-bottom:0;}

/* ---------- 반응형 ---------- */
@media(max-width:1080px){
  :root{--gut:32px;}
  .feat{grid-template-columns:1fr 1fr;}
  .feat .fcell:last-child{grid-column:1/-1;}
  .feat .fcell:last-child .ph{aspect-ratio:16/8;}
  .fgrid{grid-template-columns:1fr 1fr;gap:38px;}
}
@media(max-width:760px){
  :root{--gut:22px;}
  .nav{height:64px;grid-template-columns:auto 1fr auto;}
  .nav .brand img{height:25px;}
  .nav menu{position:absolute;top:100%;left:0;right:0;width:100%;justify-self:stretch;background:var(--paper);
    flex-direction:column;gap:0;padding:6px var(--gut) 24px;
    border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(60,48,30,.22);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .42s var(--ease),opacity .32s var(--ease),visibility 0s linear .42s;z-index:400;}
  .nav menu.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;
    transition:transform .42s var(--ease),opacity .32s var(--ease),visibility 0s;}
  .nav menu a{display:block;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:15px;}
  .nav menu a::after{display:none;}
  .burger{display:block;}
  .nav .util a:not(.cart-link){display:none;}
  .feat{grid-template-columns:1fr;}
  .feat .fcell:last-child .ph{aspect-ratio:3/3.7;}
  .prow{grid-template-columns:72px 1fr;gap:18px;row-gap:12px;padding:22px 0;}
  .prow .pim{width:72px;height:88px;}
  .prow .pd{display:none;}
  .prow .pp{grid-column:2;justify-self:start;}
  .prow:hover{padding-left:0;}
  .fgrid{grid-template-columns:1fr;gap:34px;}
  .sec-label{margin-bottom:34px;}
  .sec-label .ko{display:none;}
}