:root{--oh-orange:#ff6217;--oh-orange2:#ff8e20;--oh-navy:#142231;--oh-navy2:#0e1925;--oh-text:#1c2833;--oh-muted:#7e8a95;--oh-bg:#f5f9fc;--oh-line:#dfe6ec}
*{box-sizing:border-box}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.vector-home-body{margin:0;min-width:1100px;background:var(--oh-bg);color:var(--oh-text);font-family:Pretendard,"Noto Sans KR","Malgun Gothic","Segoe UI",sans-serif;letter-spacing:-.02em}.home-shell{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr);background:linear-gradient(110deg,#f9fcff,#f4f8fb)}
.home-sidebar{position:sticky;top:0;height:100vh;padding:19px 16px 14px;background:linear-gradient(160deg,#142536 0%,#101b28 68%,#172635 100%);color:#ecf3f9;display:flex;flex-direction:column;z-index:20;box-shadow:4px 0 18px rgba(22,42,58,.08)}.brand{display:flex;align-items:center;gap:10px;padding:0 8px 17px}.brand-mark{width:62px;height:58px;flex:0 0 auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}.brand-word strong{display:block;font-size:28px;line-height:1;font-weight:950;letter-spacing:-.07em;color:#fff}.brand-word strong span{color:#ff9b24}.brand-word small{display:block;margin-top:8px;font-size:11px;color:#d7e0e7;font-weight:700;white-space:nowrap}.side-nav{display:grid;gap:5px}.side-link{height:47px;border-radius:10px;padding:0 13px;display:flex;align-items:center;gap:14px;color:#d7e0e7;font-size:14px;font-weight:800;transition:.18s ease}.side-link svg{width:23px;height:23px;flex:0 0 auto}.side-link:hover{background:rgba(255,255,255,.07);color:#fff}.side-link.active{background:linear-gradient(135deg,#ff7a16,#ff5615);color:#fff;box-shadow:0 8px 20px rgba(255,87,21,.22)}.plan-box{margin-top:auto;border:1px solid rgba(220,232,241,.15);border-radius:13px;padding:14px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.02));color:#eef4f8}.plan-title{display:flex;align-items:center;gap:8px}.plan-title span{color:#ffc02e;font-size:20px}.plan-title b{font-size:15px}.plan-meter{height:7px;border-radius:999px;background:#415261;margin:10px 0 5px;overflow:hidden}.plan-meter i{display:block;width:80%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffad28,#ffe5a6)}.plan-box small{display:block;text-align:center;color:#c9d4dd;font-size:11px}.plan-box small b{color:#fff}.plan-upgrade{display:block;margin-top:10px;border-radius:8px;background:linear-gradient(135deg,#ff7718,#ff5415);padding:9px;text-align:center;color:#fff;font-size:12px;font-weight:900}.side-footer{display:grid;gap:1px;margin-top:12px;color:#778999;font-size:9.5px}.side-footer b{color:#91a1af}.side-footer em{color:#ff624e;font-style:normal}
.home-main{min-width:0}.home-topbar{height:80px;padding:0 28px;display:flex;align-items:center;gap:24px;background:rgba(248,251,253,.96);border-bottom:1px solid rgba(216,226,234,.65);position:sticky;top:0;z-index:15;backdrop-filter:blur(12px)}.search-box{width:min(690px,52vw);height:43px;border:1px solid #dce4ea;border-radius:999px;background:#f2f6f9;display:flex;align-items:center;padding:0 15px;gap:11px;box-shadow:inset 0 1px 2px rgba(40,62,80,.02)}.search-box svg{width:21px;height:21px;color:#34414c}.search-box input{width:100%;border:0;outline:0;background:transparent;color:#2f3b46;font-size:13px;font-weight:650}.search-box input::placeholder{color:#9aa5ae}.top-actions{margin-left:auto;display:flex;align-items:center;gap:18px}.credit-pill{height:44px;border:1px solid #dce4e9;border-radius:999px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px 0 12px;color:#26323c;box-shadow:0 3px 12px rgba(42,61,77,.03)}.coin{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffb313;color:#fff;font-size:16px;font-weight:950}.credit-pill b{font-size:13px;white-space:nowrap}.credit-pill strong{font-weight:950}.charge{padding:7px 12px;border-radius:999px;background:linear-gradient(135deg,#ff7616,#ff5414);color:#fff;font-size:11px;font-weight:900}.bell{position:relative;color:#101921}.bell svg{width:25px;height:25px}.bell i{position:absolute;right:-1px;top:-3px;width:9px;height:9px;border-radius:50%;background:#ff4d14;border:2px solid #f8fbfd}.profile{display:flex;align-items:center;gap:10px;min-width:185px;color:#17222b}.profile img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(35,52,67,.12)}.profile span{display:grid;line-height:1.25}.profile b{font-size:12px}.profile small{margin-top:4px;color:#8a959f;font-size:10.5px}.profile>svg{width:20px;height:20px;margin-left:auto}
.home-content{padding:0 28px 18px;max-width:1680px;margin:0 auto}.hero-card{position:relative;height:326px;border:1px solid #f0dfcc;border-radius:16px;overflow:hidden;background:linear-gradient(100deg,#fff3e4 0%,#fff5e9 58%,#f0c08a 100%);display:grid;grid-template-columns:41% 25% 34%;box-shadow:0 8px 24px rgba(94,61,35,.04)}.hero-copy{padding:31px 0 22px 37px;z-index:4;align-self:center}.hero-copy>small{font-size:13px;font-weight:700;color:#46545f}.hero-copy h1{margin:9px 0 11px;font-size:clamp(34px,3vw,49px);line-height:1.12;letter-spacing:-.065em;font-weight:950;color:#14212c}.hero-copy h1 em{font-style:normal;color:#f25416}.hero-copy p{margin:0;color:#495762;font-size:16px;font-weight:650;line-height:1.5}.hero-cta{margin-top:17px;display:inline-flex;align-items:center;justify-content:center;gap:11px;height:56px;padding:0 27px;border-radius:12px;background:linear-gradient(135deg,#ff7317,#ff4e14);color:#fff;font-size:15px;font-weight:950;box-shadow:0 10px 22px rgba(255,83,20,.2)}.hero-cta svg{width:22px;height:22px}.hero-note{align-self:center;z-index:5;padding-left:5px}.hero-note strong{display:block;color:#ff5f18;font-size:26px;line-height:1.55;font-weight:900;letter-spacing:-.055em;transform:rotate(-4deg)}.hero-note ul{list-style:none;padding:0;margin:24px 0 0;color:#394750;font-size:13px;font-weight:750}.hero-note li{margin:8px 0}.hero-note li::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:#ff6519;color:#fff;font-size:12px}.hero-photo{position:relative;overflow:hidden}.hero-photo::before{content:"";position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,#fff4e7,rgba(255,244,231,0));z-index:2}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}.hero-cheer{position:absolute;right:28px;top:63px;z-index:3;color:#fff;font-size:20px;line-height:1.55;font-weight:850;text-align:center;text-shadow:0 2px 8px rgba(52,32,19,.28);transform:rotate(6deg)}.hero-cheer span{display:block;font-size:32px;font-weight:400}.hero-dots{position:absolute;bottom:19px;left:47%;display:flex;gap:8px;z-index:7}.hero-dots i{width:11px;height:11px;border-radius:50%;background:#d9d1c9}.hero-dots i.on{background:#ff6819}
.quick-section{padding-top:17px}.section-title,.template-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:10px}.section-title>div,.template-head>div:first-child{display:flex;align-items:baseline;gap:14px}.section-title h2,.template-head h2{margin:0;font-size:22px;letter-spacing:-.055em;color:#17242e}.section-title p,.template-head p{margin:0;color:#8d98a2;font-size:11px}.section-title>a{display:flex;align-items:center;gap:4px;height:35px;padding:0 13px;border:1px solid #dce3e8;border-radius:999px;background:#fff;color:#38454f;font-size:11px;font-weight:900}.section-title>a svg{width:16px;height:16px}.quick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.quick-card{position:relative;min-height:143px;border-radius:14px;padding:17px 18px;border:1px solid rgba(0,0,0,.02);overflow:hidden;transition:.18s ease}.quick-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(51,64,75,.08)}.quick-icon{width:42px;height:42px;margin-bottom:8px}.quick-card b{display:block;color:#1e2933;font-size:15px}.quick-card small{color:#76838e;font-size:11px}.quick-arrow{position:absolute;right:15px;bottom:24px;width:19px;height:19px}.quick-card.pink{background:linear-gradient(135deg,#fff0f2,#ffe7ec);color:#ff4b66}.quick-card.yellow{background:linear-gradient(135deg,#fff8e9,#fff0cc);color:#f3a511}.quick-card.purple{background:linear-gradient(135deg,#f8f1ff,#ece2ff);color:#8b5cf6}.quick-card.green{background:linear-gradient(135deg,#effced,#def7e1);color:#1fac4c}.quick-card.blue{background:linear-gradient(135deg,#edf8ff,#def1ff);color:#1687df}.quick-card.rose{background:linear-gradient(135deg,#fff1f5,#ffe4ec);color:#ed4770}
.template-section{padding-top:18px}.template-head{align-items:center}.template-head>div:first-child{display:block}.template-head p{margin-top:1px}.filters{display:flex;gap:7px;overflow:auto;max-width:75%}.filters button{white-space:nowrap;height:35px;padding:0 13px;border:1px solid #dce4e9;border-radius:999px;background:#fff;color:#5e6a74;font-size:10.5px;font-weight:850}.filters button.active{background:#ff6618;border-color:#ff6618;color:#fff}.template-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.template-card{border:1px solid #dfe5ea;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 4px 12px rgba(41,55,67,.04);transition:.18s ease}.template-card:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(41,55,67,.08)}.template-card>b{display:block;height:34px;padding:8px 10px 0;color:#27343e;font-size:11px}.template-photo{position:relative;height:146px;overflow:hidden;background:#ccc}.template-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}.template-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,24,.78) 0%,rgba(12,18,24,.45) 42%,rgba(12,18,24,.04) 70%)}.beauty .template-photo::after{background:linear-gradient(90deg,rgba(247,243,239,.92),rgba(247,243,239,.56) 45%,rgba(247,243,239,.03) 72%)}.flower .template-photo::after{background:linear-gradient(90deg,rgba(255,252,247,.94),rgba(255,252,247,.55) 48%,rgba(255,252,247,.03) 74%)}.template-photo span,.template-photo small{position:relative;z-index:3;display:block}.template-photo span{padding:14px 13px 0;color:#fff;font-size:16px;line-height:1.35;font-weight:950;letter-spacing:-.045em;text-shadow:0 2px 5px rgba(0,0,0,.15)}.template-photo small{padding:7px 13px 0;color:rgba(255,255,255,.85);font-size:8.5px;line-height:1.45;font-weight:700}.beauty .template-photo span,.beauty .template-photo small,.flower .template-photo span{color:#27323a;text-shadow:none}.beauty .template-photo img{object-position:65% center}.fitness .template-photo img{object-position:70% center}.travel .template-photo img{object-position:70% center}.flower .template-photo img{object-position:72% center}.food .template-photo img{object-position:75% center}.cafe .template-photo img{object-position:70% center}
@media(max-width:1420px){.home-shell{grid-template-columns:218px minmax(0,1fr)}.brand-word strong{font-size:25px}.brand-mark{width:56px}.home-content{padding-left:20px;padding-right:20px}.home-topbar{padding-left:20px;padding-right:20px}.hero-card{grid-template-columns:43% 23% 34%}.hero-copy{padding-left:28px}.hero-copy h1{font-size:39px}.hero-note strong{font-size:22px}.quick-grid,.template-grid{gap:8px}.quick-card{padding:15px 14px}.filters{max-width:72%}}
@media(max-width:1180px){.home-shell{grid-template-columns:88px minmax(0,1fr)}.brand{justify-content:center;padding:0 0 16px}.brand-word,.side-link b,.plan-box,.side-footer{display:none}.brand-mark{width:59px;height:59px}.side-link{justify-content:center;padding:0}.side-link svg{width:25px;height:25px}.hero-card{grid-template-columns:58% 42%;height:310px}.hero-note{display:none}.quick-grid,.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.template-grid{row-gap:12px}.top-actions{gap:10px}.profile{min-width:0}.profile span,.profile>svg{display:none}.filters{max-width:68%}}

/* =========================================================
   v7 - template images: source-ratio-safe reference assets
   The JPEG assets already contain the intended card artwork.
   Never stretch them to an arbitrary width/height ratio.
   ========================================================= */
.template-photo {
  position: relative;
  height: auto;
  aspect-ratio: 224 / 141;
  overflow: hidden;
  background: #eef1f3;
}
.template-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center !important;
  image-rendering: auto;
}
/* The new v7 image assets already include their template artwork. */
.template-photo::after { display: none !important; }
.template-photo > span,
.template-photo > small { display: none !important; }

/* Hero photo also always preserves its native proportions. */
.hero-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
}

/* Avatar must stay circular without any stretching. */
.profile img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   v8 - final visual alignment fixes
   1) credit balance fully enclosed in one bordered pill
   2) hero image keeps its native 6:5 ratio (no stretching)
   3) template artwork stays inside its own card only
   ========================================================= */

/* Header credit: label, number and charge button are all inside one outline. */
.top-actions {
  gap: 14px;
}
.credit-pill {
  min-width: 246px;
  height: 52px;
  padding: 0 8px 0 13px;
  gap: 8px;
  border: 1.5px solid #d9e1e7;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 47, 61, .055);
  white-space: nowrap;
  overflow: hidden;
}
.credit-pill .coin {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
}
.credit-pill .credit-label {
  color: #27343e;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}
.credit-pill > strong {
  color: #17222c;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.03em;
}
.credit-pill .charge {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

/* Hero: preserve the 1200x1000 source ratio. The unused left area blends into the banner. */
.hero-photo {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(90deg, #f8dcbf 0%, #dca66f 100%);
}
.hero-photo::before {
  width: 26%;
  background: linear-gradient(90deg, #fff4e7 0%, rgba(255,244,231,.72) 32%, rgba(255,244,231,0) 100%);
  pointer-events: none;
}
.hero-photo img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  transform: none !important;
}

/* Every template card owns exactly one clipping context. */
.template-grid {
  isolation: isolate;
  align-items: stretch;
}
.template-card {
  position: relative;
  min-width: 0;
  overflow: hidden !important;
  isolation: isolate;
  contain: paint;
}
.template-photo {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-radius: 9px 9px 0 0;
  background: #eef1f3;
  isolation: isolate;
}
.template-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  clip-path: inset(0);
}
.template-card > b {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
}

/* Keep responsive header from crushing the credit pill. */
@media (max-width: 1420px) {
  .credit-pill { min-width: 226px; }
  .credit-pill .credit-label { font-size: 11px; }
  .credit-pill > strong { font-size: 20px; }
  .credit-pill .charge { padding: 0 10px; }
}
@media (max-width: 1180px) {
  .credit-pill { min-width: 205px; height: 48px; }
  .credit-pill .credit-label { display: none; }
}