/* 업로드 홈 레퍼런스 정본 — 순백 바탕, 손그림 선, 파스텔 2열 카드. */
body.lucky-city-home{min-height:100dvh;background:#fff}
.lucky-city-home .shell{overflow:hidden;border:0;background:#fff;box-shadow:none}
.lucky-city-home .top{min-height:76px;padding:11px 20px;background:#fff;border-bottom:1px solid var(--faint);backdrop-filter:none}
.lucky-city-home .top-burger,.lucky-city-home .top-home-login{border:0;border-radius:0;background:transparent;color:var(--ink);box-shadow:none}
.lucky-city-home .relationship-home.classic-home{padding-top:24px;background:#fff}
.home-hero{position:relative;min-height:232px;margin:0 -2px 18px;overflow:hidden}
.home-hero-copy{position:relative;z-index:2;width:66%;padding-top:20px}
.lucky-city-home .lucky-kicker{position:relative;z-index:3;width:max-content;max-width:100%;margin:0;padding:7px 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--lavender);color:var(--ink);font:700 12px/1.2 var(--font-character);letter-spacing:-.02em}
.lucky-city-home .classic-home .greeting{margin:0;font-size:clamp(31px,8.4vw,43px);font-weight:400;line-height:1.14;letter-spacing:-.035em}
.lucky-city-home .classic-home .greeting>span{display:block;max-width:245px}
.lucky-city-home .classic-home .greeting b{color:var(--coral);text-shadow:none}
.lucky-city-home .classic-home .greeting-sub{max-width:245px;margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.home-hero-uni{position:absolute;z-index:1;right:-43px;bottom:-2px;width:55%;max-width:260px;height:auto;aspect-ratio:380/300;display:block;background:url("/assets/reference-home/hero-uni.png?v=1") calc(50% + var(--card-offset-x,0px)) calc(50% + var(--card-offset-y,0px))/contain no-repeat;mix-blend-mode:multiply}
.home-hero-spark{position:absolute;z-index:2;color:#f4b91f;pointer-events:none}.home-hero-spark.spark-one{right:43%;top:60px;width:28px;height:28px}.home-hero-spark.spark-two{right:2%;top:105px;width:22px;height:22px}.home-hero-spark.spark-three{right:38%;bottom:24px;width:15px;height:15px;color:#ef879a}
.lucky-city-home .launch-free-banner{position:relative;grid-template-columns:42px minmax(0,1fr) 28px;grid-template-rows:auto auto;column-gap:12px;margin:0 0 22px;padding:17px 18px;border:1.5px solid var(--ink);border-radius:18px;background:#fffbea;color:var(--ink);box-shadow:none}
.lucky-city-home .launch-free-banner .launch-free-icon{grid-row:1/3;align-self:center;width:36px;height:36px;color:#e98b35}.lucky-city-home .launch-free-banner b{grid-column:2}.lucky-city-home .launch-free-banner span{grid-column:2}.lucky-city-home .launch-free-banner .launch-free-heart{grid-column:3;grid-row:1/3;align-self:center;width:26px;height:26px;color:var(--coral)}
.lucky-city-home .launch-free-banner b{font-size:16px;line-height:1.45}.lucky-city-home .launch-free-banner span{color:var(--muted);font-size:13px;line-height:1.55}
.lucky-city-home .classic-home-grid{gap:12px;margin:0;border:0;background:#fff}
.lucky-city-home .classic-home-grid>.card{--card-wash:#fff3ee;--card-accent:#e85e69;position:relative;overflow:hidden;display:grid!important;grid-template-rows:138px auto;align-content:stretch;border:1.5px solid var(--ink)!important;border-radius:18px!important;background:var(--card-wash);box-shadow:none;transition:transform .14s ease}
.lucky-city-home .classic-home-grid>.card:nth-child(2){--card-wash:#fffbea;--card-accent:#287fc4}
.lucky-city-home .classic-home-grid>.card:nth-child(3){--card-wash:#f8f0ff;--card-accent:#8052c8}
.lucky-city-home .classic-home-grid>.card:nth-child(4){--card-wash:#eef8ff;--card-accent:#2678bc}
.lucky-city-home .classic-home-grid>.card:nth-child(5){--card-wash:#f5f9e7;--card-accent:#5f8f42}
.lucky-city-home .classic-home-grid>.card:active{opacity:1;transform:scale(.985)}
.lucky-city-home .classic-home-grid>.card .card-text{display:contents!important}
.lucky-city-home .classic-home-grid>.card .card-title{position:absolute;z-index:2;top:13px;left:11px;right:9px;display:flex;align-items:flex-start;gap:6px;min-height:56px;color:var(--ink);font-size:22px;font-weight:400;line-height:1.18;letter-spacing:-.04em;word-break:keep-all;pointer-events:none}
.lucky-city-home .classic-home-grid>.card .card-title>.woori-icon{flex:none;width:24px;height:24px;margin-top:1px;color:var(--card-accent)}
.lucky-city-home .classic-home-grid>.card .card-desc{position:absolute;z-index:2;top:47px;left:11px;right:9px;max-width:92%;margin:0;color:#313741;font-family:var(--font-character);font-size:13px;line-height:1.42;letter-spacing:-.025em;pointer-events:none}
.lucky-city-home .classic-home-grid>.card .card-art{grid-row:1;order:1;width:100%;min-height:138px;aspect-ratio:auto;border:0;border-bottom:1.5px solid var(--ink);background-color:var(--card-wash);background-position:right -12px bottom -12px;background-size:80% auto;background-repeat:no-repeat;background-blend-mode:multiply}
.lucky-city-home .classic-home-grid>.card .card-foot{grid-row:2;order:2;display:grid;justify-items:center;gap:2px;width:100%;margin:0;padding:7px 7px 8px;background:color-mix(in srgb,var(--card-wash) 62%,var(--card-accent));color:var(--card-accent);text-align:center}
.lucky-city-home .classic-home-grid>.card .card-price{color:#59606a;font-size:11px;line-height:1.35;text-align:center}
.lucky-city-home .classic-home-grid>.card .home-reading-cost{color:#e64f78;font-family:var(--font-character);font-size:11px;font-weight:400;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card .home-reading-cost{font-size:10px}}
.lucky-city-home .classic-home-grid>.card .card-cta{margin:0;color:var(--card-accent);font-size:15px;font-weight:700;line-height:1.35}
.lucky-city-home .classic-home-grid>.card .home-free-ribbon{top:10px;right:-27px;width:92px;padding:6px 0 5px;background:#c3df62;color:var(--ink);box-shadow:none;font-size:11px;font-weight:900}
.lucky-city-home .home-answer{margin-top:38px;padding:22px 19px;border:1.5px solid var(--ink);border-radius:18px;background:#f3f8ff;box-shadow:none}
.lucky-city-home .home-answer h2{font-size:22px;font-weight:400}.lucky-city-home .home-answer p{color:var(--muted);font-size:13px}.lucky-city-home .home-answer strong{color:var(--ink)}
.lucky-city-home .home-answer a{color:var(--action);text-decoration-color:color-mix(in srgb,var(--action) 45%,transparent)}
.lucky-city-home .site-foot{color:var(--muted);border-color:var(--faint);background:#fff}.lucky-city-home .site-foot .foot-brand{color:var(--ink);font-weight:800}
.lucky-city-home .bottom-nav{background:#fff;border-color:var(--ink);box-shadow:0 -2px 12px rgba(23,26,32,.06);backdrop-filter:none}
.lucky-city-home .bottom-nav a{color:var(--muted)}.lucky-city-home .bottom-nav a[aria-current="page"]{color:var(--coral)}
.lucky-city-home .bottom-record-keeper>span{border-color:var(--ink);background:#fff0ed;box-shadow:none}
@media(max-width:374px){
  .home-hero{min-height:225px}.home-hero-copy{width:68%;padding-top:16px}.home-hero-uni{right:-48px;width:57%}
  .lucky-city-home .classic-home .greeting{font-size:29px}.lucky-city-home .classic-home .greeting-sub{font-size:13px}
  .lucky-city-home .classic-home-grid{gap:9px}.lucky-city-home .classic-home-grid>.card{grid-template-rows:126px auto;border-radius:15px!important}
  .lucky-city-home .classic-home-grid>.card .card-title{top:11px;left:8px;right:7px;min-height:53px;font-size:20px}.lucky-city-home .classic-home-grid>.card .card-title>.woori-icon{width:22px;height:22px}.lucky-city-home .classic-home-grid>.card .card-desc{top:43px;left:9px;right:7px;font-size:12px}.lucky-city-home .classic-home-grid>.card .card-art{min-height:126px;background-position:right -10px bottom -10px;background-size:82% auto}.lucky-city-home .classic-home-grid>.card .card-foot{padding:7px 6px}.lucky-city-home .classic-home-grid>.card .card-cta{font-size:13px}.lucky-city-home .classic-home-grid>.card .card-price{font-size:11px}
}
@media(max-width:340px){.home-hero{min-height:220px}.home-hero-uni{right:-58px;width:58%}.lucky-city-home .classic-home .greeting{font-size:29px}.lucky-city-home .classic-home .greeting>span{max-width:220px}.home-hero-spark.spark-one{right:39%}}

/* REFERENCE EXACT — 업로드 원본의 선·형광펜 채색·구도·간격을 해석 없이 그대로 쓴다. */
body.lucky-city-home{background:#fff}
.lucky-city-home .shell{width:min(100%,430px);max-width:430px;padding-bottom:calc(96px + env(safe-area-inset-bottom));background:#fff}
.lucky-city-home .top{min-height:67px;padding:8px 19px 7px 15px;background:#fff;border-bottom:1px solid #cfd0d0}
.lucky-city-home .top-ticket-balance{font-family:var(--font-character);font-size:16px;font-weight:400;color:var(--ink)}
.lucky-city-home .top-burger{width:34px;height:34px}
.lucky-city-home .relationship-home.classic-home{padding:18px 15px 0;background:#fff}
.home-hero{min-height:202px;margin:0 0 14px;overflow:hidden}
.home-hero-copy{width:65%;padding-top:12px}
.lucky-city-home .lucky-kicker{padding:5px 11px;border:1.5px solid var(--ink);background:#bda0eb;font-size:12px;font-weight:400;line-height:1.1}
.lucky-city-home .classic-home .greeting{font-size:29px;line-height:1.34;letter-spacing:-.035em}
.lucky-city-home .classic-home .greeting>span{max-width:220px}
.lucky-city-home .classic-home .greeting b{color:var(--action-text)}
.lucky-city-home .classic-home .greeting-sub{max-width:235px;margin-top:9px;color:var(--muted);font-size:13px;line-height:1.55}
.home-hero-uni{right:-2px;top:42px;bottom:auto;width:47%;max-width:none;mix-blend-mode:multiply}
.home-hero-spark{display:none}
.lucky-city-home .launch-free-banner{display:grid;grid-template-columns:54px minmax(0,1fr) 38px;grid-template-rows:auto auto;align-items:center;column-gap:9px;min-height:91px;margin:0 0 14px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:17px;background:repeating-linear-gradient(176deg,rgba(255,250,211,.68) 0 10px,rgba(255,253,232,.82) 11px 20px);box-shadow:none}
.lucky-city-home .launch-free-banner .launch-free-icon{grid-column:1;grid-row:1/3;width:42px;height:42px;justify-self:center;color:#e98b35}
.lucky-city-home .launch-free-banner b{grid-column:2;grid-row:1;align-self:end;font-family:var(--font-character);font-size:15px;font-weight:400;line-height:1.28;letter-spacing:-.035em}
.lucky-city-home .launch-free-banner span{grid-column:2;grid-row:2;align-self:start;margin-top:3px;color:#3f4650;font-family:var(--font-character);font-size:10.5px;line-height:1.45;letter-spacing:-.025em}
.lucky-city-home .launch-free-banner .launch-free-heart{grid-column:3;grid-row:1/3;width:30px;height:30px;justify-self:center;color:#ef7187}
.lucky-city-home .classic-home-grid{gap:9px;margin:0;background:#fff}
.lucky-city-home .classic-home-grid>.card{position:relative;display:grid!important;grid-template-rows:126px 30px;min-width:0;min-height:156px;padding:0;overflow:hidden;border:1.5px solid var(--ink)!important;border-radius:16px!important;background:radial-gradient(ellipse at 38% 18%,rgba(255,255,255,.72),transparent 58%),repeating-linear-gradient(177deg,var(--card-wash) 0 11px,color-mix(in srgb,var(--card-wash) 82%,#fff) 12px 22px);box-shadow:none}
/* 09-18 19금 카드 숨김: 위 display:grid!important 가 [hidden] 을 덮어 손님에게 계속 보였다(Codex 검수 P1) */
.lucky-city-home .classic-home-grid>.card[hidden]{display:none!important}
.lucky-city-home .classic-home-grid>.card:nth-child(1){--card-wash:#fff0ec;--card-accent:#ef5965}
.lucky-city-home .classic-home-grid>.card:nth-child(2){--card-wash:#fff9dc;--card-accent:#176fc0}
.lucky-city-home .classic-home-grid>.card:nth-child(3){--card-wash:#fbf0ff;--card-accent:#8152c8}
.lucky-city-home .classic-home-grid>.card:nth-child(4){--card-wash:#eaf6ff;--card-accent:#1768b4}
.lucky-city-home .classic-home-grid>.card:nth-child(5){--card-wash:#f5f8dd;--card-accent:#4f913c}
.lucky-city-home .classic-home-grid>.card:nth-child(6){--card-wash:#f2f0ff;--card-accent:#7662bf}
.lucky-city-home .classic-home-grid>.card .home-free-ribbon,.lucky-city-home .classic-home-grid>.card .card-price{display:none!important}
.lucky-city-home .classic-home-grid>.card .card-art{--card-anchor-x:100%;--card-anchor-y:100%;--card-base-x:-5px;--card-base-y:-9px;grid-row:1;width:100%;min-height:126px;border:0;border-bottom:1.5px solid var(--ink);background-color:transparent;background-position:calc(var(--card-anchor-x) + var(--card-base-x) + var(--card-offset-x,0px)) calc(var(--card-anchor-y) + var(--card-base-y) + var(--card-offset-y,0px));background-size:88% auto;background-repeat:no-repeat;background-blend-mode:normal;pointer-events:none}
.lucky-city-home .classic-home-grid .card-art[data-card="saju"]{background-image:url("/assets/marker-dog/saju.png")}
.lucky-city-home .classic-home-grid .card-art[data-card="today"]{background-image:url("/assets/marker-dog/today.png")}
.lucky-city-home .classic-home-grid .card-art[data-card="match"]{--card-anchor-x:50%;--card-base-x:0px;--card-base-y:-7px;background-image:url("/assets/marker-dog/match.png");background-size:96% auto}
.lucky-city-home .classic-home-grid .card-art[data-card="luck"]{background-image:url("/assets/marker-dog/luck.png")}
.lucky-city-home .classic-home-grid .card-art[data-card="yearly"]{background-image:url("/assets/marker-dog/yearly.png")}
.lucky-city-home .classic-home-grid>.home-feedback-card .card-title{padding-right:8px!important}
.lucky-city-home .classic-home-grid>.home-feedback-card .home-feedback-art{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,#fff 0 31%,transparent 32%),repeating-linear-gradient(177deg,#f2f0ff 0 11px,#faf9ff 12px 22px)}
.lucky-city-home .classic-home-grid>.home-feedback-card .home-feedback-art::before,.lucky-city-home .classic-home-grid>.home-feedback-card .home-feedback-art::after{content:"";position:absolute;border:1.5px solid #7662bf;border-radius:50%}
.lucky-city-home .classic-home-grid>.home-feedback-card .home-feedback-art::before{width:68px;height:68px;transform:rotate(-6deg)}
.lucky-city-home .classic-home-grid>.home-feedback-card .home-feedback-art::after{width:76px;height:61px;transform:rotate(7deg)}
.lucky-city-home .classic-home-grid>.home-feedback-card .home-feedback-art .woori-icon{position:relative;z-index:1;width:46px;height:46px;color:#7662bf}
.lucky-city-home .classic-home-grid>.card .card-text{display:contents!important}
.lucky-city-home .classic-home-grid>.card .card-title{position:absolute;z-index:2;top:10px;left:12px;right:8px;display:flex;min-height:0;align-items:center;gap:5px;color:var(--ink);font-family:var(--font-character);font-size:18px;font-weight:400;line-height:1.15;letter-spacing:-.035em;pointer-events:none}
.lucky-city-home .classic-home-grid>.card .card-title>.woori-icon{width:20px;height:20px;margin:0;color:var(--card-accent)}
.lucky-city-home .classic-home-grid>.card .card-desc{position:absolute;z-index:2;top:36px;left:12px;right:8px;max-width:86%;margin:0;color:var(--muted);font-family:var(--font-character);font-size:11.5px;line-height:1.36;letter-spacing:-.025em;pointer-events:none}
.lucky-city-home .classic-home-grid>.card .card-foot{grid-row:2;position:relative;z-index:2;display:grid;place-items:center end;width:100%;margin:0;padding:0 11px;background:repeating-linear-gradient(177deg,color-mix(in srgb,var(--card-wash) 68%,#fff) 0 8px,var(--card-wash) 9px 17px);color:var(--card-accent);text-align:right}
.lucky-city-home .classic-home-grid>.card .card-cta{margin:0;color:var(--card-accent);font-family:var(--font-character);font-size:14px;font-weight:400;line-height:1.1;letter-spacing:-.02em}
.lucky-city-home .classic-home-grid>.home-coming-card{cursor:default}
.lucky-city-home .home-coming-space{grid-row:1;display:block;min-height:126px;border-bottom:1.5px solid var(--ink)}
.lucky-city-home .home-coming-card .card-title{justify-content:center;top:17px}
.lucky-city-home .home-coming-card .card-desc{top:47px;max-width:none;text-align:center}
.lucky-city-home .home-coming-card .card-foot{place-items:center;padding:0;text-align:center}
.card-position-panel{margin:16px 0 24px;padding:16px;border:1.5px dashed #7662bf;border-radius:16px;background:#faf9ff;font-family:var(--font-ui)}
.card-position-panel h2{margin:0;font:400 22px/1.2 var(--font-character)}.card-position-panel>p{margin:5px 0 12px;color:#5d596b;font-size:13px}.card-position-panel>div{display:grid;gap:9px}.card-position-panel fieldset{margin:0;padding:10px;border:1px solid #d8d1f1;border-radius:12px;background:#fff}.card-position-panel legend{padding:0 5px;font-weight:700}.card-position-panel fieldset>span{display:block;margin-bottom:7px;color:#5d596b;font-size:12px}.card-position-panel fieldset>div{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.card-position-panel button{min-height:34px;padding:5px 2px;border:1px solid var(--ink);border-radius:9px;background:#f2efff;color:var(--ink);font:600 12px/1 var(--font-ui)}.card-position-panel button:disabled{opacity:.45}.card-position-panel [role="status"]{min-height:20px;margin:10px 0 0;color:#6550b4;font-weight:700}
.lucky-city-home .bottom-nav{width:min(100%,430px);height:calc(76px + env(safe-area-inset-bottom));padding:7px 12px calc(8px + env(safe-area-inset-bottom));overflow:visible;border:1.5px solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -3px 12px rgba(23,26,32,.08)}
.lucky-city-home .bottom-nav a{min-height:59px;margin:0;padding:0;color:var(--ink);gap:2px;overflow:visible}
.lucky-city-home .bottom-nav a>.woori-icon{width:26px;height:26px;opacity:1}.lucky-city-home .bottom-nav a>b{font-family:var(--font-character);font-size:14px;font-weight:400;opacity:1}
.lucky-city-home .bottom-nav a[aria-current="page"]{color:#e54f66}
.lucky-city-home .bottom-nav .bottom-record-keeper{z-index:2;min-height:79px;margin-top:-28px;color:var(--ink);overflow:visible}
.lucky-city-home .bottom-record-keeper>span{position:relative;isolation:isolate;width:64px;height:64px;overflow:hidden;border:2px solid var(--coral);background:#fff0ed;box-shadow:none}
.lucky-city-home .bottom-record-keeper img{position:relative;z-index:1;display:block;opacity:1;transform:scale(1.01);object-position:center 42%;mix-blend-mode:normal}
@media(max-width:374px){
  .lucky-city-home .relationship-home.classic-home{padding-inline:13px}.home-hero{min-height:196px}.home-hero-copy{padding-top:11px}
  .lucky-city-home .classic-home .greeting{font-size:27px}.lucky-city-home .classic-home .greeting-sub{font-size:12px}
  .home-hero-uni{right:-3px;top:43px;width:48%}.lucky-city-home .classic-home-grid{gap:8px}
  .lucky-city-home .classic-home-grid>.card{grid-template-rows:121px 29px;min-height:150px;border-radius:15px!important}.lucky-city-home .classic-home-grid>.card .card-art{min-height:121px}.lucky-city-home .classic-home-grid>.card .card-title{top:9px;left:9px;font-size:17px}.lucky-city-home .classic-home-grid>.card .card-desc{top:34px;left:9px;font-size:11px}.lucky-city-home .classic-home-grid>.card .card-cta{font-size:13px}
}

/* 카드 글·그림 겹침 수정(alpha.683) — 설명 문장이 그림 칸 안에 절대 배치돼 캐릭터(우하단)와
   겹치던 것을, 제목만 그림 위에 남기고 설명은 그림 아래 띠로 내린다. 제목 한 줄은 좌상단,
   캐릭터는 우하단이라 구조적으로 겹치지 않는다. 마크업은 그대로(card-text 는 display:contents). */
.lucky-city-home .classic-home-grid>.card{grid-template-rows:118px minmax(0,auto) 30px;min-height:0}
.lucky-city-home .classic-home-grid>.card .card-art{min-height:118px;--card-base-x:-4px;--card-base-y:-6px;background-size:calc(78% * var(--card-scale,1)) auto}
.lucky-city-home .classic-home-grid .card-art[data-card="match"]{background-size:calc(88% * var(--card-scale,1)) auto}
.lucky-city-home .classic-home-grid>.card .card-desc{position:static;grid-row:2;top:auto;left:auto;right:auto;max-width:none;min-height:calc(2 * 1.36em + 8px);padding:8px 11px 0;color:var(--muted)}
.lucky-city-home .classic-home-grid>.card .card-foot{grid-row:3;padding:0 11px 4px;background:none}
.lucky-city-home .home-coming-space{min-height:118px}
.lucky-city-home .home-coming-card .card-desc{top:auto;text-align:center}
@media(max-width:374px){
  .lucky-city-home .classic-home-grid>.card{grid-template-rows:112px minmax(0,auto) 28px;min-height:0}
  .lucky-city-home .classic-home-grid>.card .card-art{min-height:112px}
  .lucky-city-home .classic-home-grid>.card .card-desc{top:auto;left:auto;padding:7px 9px 0}
  .lucky-city-home .home-coming-space{min-height:112px}
}

/* 카드 행동 문구 제거(alpha.684, 사장님 결정) — 카드 전체가 버튼이라 "내 리포트 보기 ›" 여섯 변주는
   같은 뜻의 반복이었다. 띠째 걷어내고 설명이 카드 바닥까지 쓴다(189→169px). 마크업은 남겨 두어
   가격 표기가 필요해지면 이 띠를 되살릴 수 있다. */
.lucky-city-home .classic-home-grid>.card{grid-template-rows:118px minmax(0,auto)}
.lucky-city-home .classic-home-grid>.card .card-foot{display:none!important}
.lucky-city-home .classic-home-grid>.card .card-desc{min-height:calc(2 * 1.36em);padding:8px 11px 10px}
@media(max-width:374px){
  .lucky-city-home .classic-home-grid>.card{grid-template-rows:112px minmax(0,auto)}
  .lucky-city-home .classic-home-grid>.card .card-desc{padding:7px 9px 9px}
}

/* 흰 바탕 층(alpha.685) — 홈도 면은 흰색. 카드 wash·줄무늬·칩·배너·답변 상자 전부 흰색으로,
   상품 구분은 아이콘·제목 색(--card-accent)과 그림이 맡는다. */
.lucky-city-home .classic-home-grid>.card{--card-wash:#ffffff;background:#fff}
.lucky-city-home .classic-home-grid>.card .card-art{background-color:#fff}
.lucky-city-home .lucky-kicker,.lucky-city-home .launch-free-banner,.lucky-city-home .home-answer,.lucky-city-home .bottom-record-keeper>span,.card-position-panel{background:#fff}

/* 톤 정리 층(alpha.689) — 홈 이름은 글자용 코랄. 업로드 그림이 안 왔을 때(폴백 스케치)는 제목과 겹치지 않게 작게 우하단. */
.lucky-city-home .classic-home .greeting b{color:var(--action-text)}
.lucky-city-home .classic-home-grid .card-art:not([style*="background-image"]){background-size:calc(60% * var(--card-scale,1)) auto;--card-base-x:-8px;--card-base-y:-8px}
/* 이미지 크기 조절(alpha.689): 관리자 패널의 배율(--card-scale, 50~160%)을 홈 인사 운이에도 적용. 패널 둘째 줄은 3칸. */
.home-hero-uni{background-size:calc(100% * var(--card-scale,1)) auto}
.card-position-panel fieldset>div+div{grid-template-columns:repeat(3,1fr);margin-top:5px}

/* 홈 숨통(alpha.693, 사장님 "모바일 크롬에서 너무 꽉 차 보인다") — 안쪽 화면은 좌우 28px 인데 홈은 13~15px 였고
   인사말 오른쪽 운이가 "운을" 글자를 덮었다. 좌우 20px(≤374: 18px), 카드 간격 10px, 운이는 40%(≤374: 39%)로 글 옆에. */
.lucky-city-home .relationship-home.classic-home{padding-inline:20px}
.lucky-city-home .classic-home-grid{gap:10px}
.home-hero{min-height:0;margin-bottom:16px}
.home-hero-copy{width:64%;padding-top:10px}
.home-hero-uni{right:-4px;top:40px;width:40%;max-width:170px}
@media(max-width:374px){.lucky-city-home .relationship-home.classic-home{padding-inline:18px}.lucky-city-home .classic-home .greeting{font-size:25px}.home-hero-copy{width:66%}.home-hero-uni{right:-6px;top:44px;width:39%}}
/* 좌우 숨통 한 번 더(alpha.694, 사장님 "약간 좌우가 남도록") — 안쪽 화면과 똑같이 셸 양옆 8px 를 비워 가장자리에서 28px. */
.lucky-city-home .shell{width:min(calc(100% - 16px),430px);margin-inline:auto}
/* 바텀 내비도 양옆 8px(alpha.695, 사장님 "바텀 메뉴도") — 셸과 같은 폭으로, 둥근 모서리가 화면 끝에 붙지 않게. */
.lucky-city-home .bottom-nav{width:min(calc(100% - 16px),430px)}
.lucky-city-home .bottom-nav{width:min(calc(100% - 32px),430px)} /* alpha.696: 양옆 16px */

/* 카드 그림 칸을 폭에 비례(alpha.701, 사장님 "카드 폭이 줄면 그림이 내려온다") — 그림은 폭 기준 78%로 커지는데
   칸은 118px 고정 + 아래 앵커라 좁으면 위가 비고 넓으면 잘렸다. 칸도 175:118 비율로 따라가게. */
.lucky-city-home .classic-home-grid>.card{grid-template-rows:auto minmax(0,auto)}
.lucky-city-home .classic-home-grid>.card .card-art{min-height:0;aspect-ratio:175/118}
.lucky-city-home .home-coming-space{min-height:0;aspect-ratio:175/118}
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card{grid-template-rows:auto minmax(0,auto)}.lucky-city-home .classic-home-grid>.card .card-art{min-height:0}.lucky-city-home .home-coming-space{min-height:0}}

/* 카드 구조: 제목 줄 → 그림 칸(alpha.702, 사장님 "아직도 상품 이미지가 약간 내려온다") — 그림 원본이 정사각형이라 폭 78%로 맞추면
   칸(가로형)보다 커져 50px 씩 아래로 밀어 두었고, 좁은 폰에선 그만큼 더 잘렸다. 제목을 그림 위에 겹치지 않게 흐름에 두고
   그림은 칸 높이에 맞춘다(폭이 아니라). 저장된 상하 오프셋은 0 으로 되돌림, 크기(scale)는 유지. */
.lucky-city-home .classic-home-grid>.card{grid-template-rows:auto auto minmax(0,auto)}
.lucky-city-home .classic-home-grid>.card .card-title{position:static;grid-row:1;top:auto;left:auto;right:auto;min-height:0;padding:10px 12px 2px}
.lucky-city-home .classic-home-grid>.card .card-art{grid-row:2;aspect-ratio:175/104;min-height:0;--card-base-y:0px;background-size:auto calc(100% * var(--card-scale,1))}
.lucky-city-home .classic-home-grid .card-art[data-card="match"]{background-size:auto calc(100% * var(--card-scale,1))}
.lucky-city-home .classic-home-grid>.card .card-desc{grid-row:3}
.lucky-city-home .home-coming-space{grid-row:2;aspect-ratio:175/104;min-height:0}
.lucky-city-home .home-coming-card .card-title{grid-row:1}
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card{grid-template-rows:auto auto minmax(0,auto)}.lucky-city-home .classic-home-grid>.card .card-title{top:auto;left:auto}.lucky-city-home .classic-home-grid>.card .card-desc{top:auto;left:auto}}
/* 그림 발을 선에 붙임(alpha.703) — 원본 아래쪽 투명 여백(~6%)만큼 내려 y=0 이 "선 위에 앉은" 상태가 되게. 패널 오프셋은 여기서 ±10px 미세조정용. */
.lucky-city-home .classic-home-grid>.card .card-art{--card-base-y:6px}

/* 오프셋을 카드 폭에 비례(alpha.704, 사장님 "오프셋 다시 잡았는데 모바일에선 위치가 하나도 안 맞는다") —
   px 절대값은 데스크톱(카드 ~182px)과 폰(~150px)에서 구도가 달라진다. 값을 '카드 폭 175 기준 px' 로 보고
   JS 가 심는 카드 실제 폭(--card-w)으로 환산한다(<button> 은 cqw 가 안 잡힘). 크기(scale)는 이미 비례. */
.lucky-city-home .classic-home-grid>.card .card-art{background-position:calc(var(--card-anchor-x) + var(--card-base-x) + var(--card-ox,0px)) calc(var(--card-anchor-y) + var(--card-base-y) + var(--card-oy,0px))}

/* 스크롤 중 썸네일 흔들림(alpha.708) — 오프셋은 JS 가 정수 px(--card-ox/oy)로 확정해 심고, 카드 :active 축소(scale)는
   손가락이 닿은 카드의 그림을 스크롤 시작 때 움직이게 하므로 뺀다(누름 표시는 살짝 흐리게). 그림 칸은 자체 레이어로. */
.lucky-city-home .classic-home-grid>.card:active{transform:none;opacity:.92}
.lucky-city-home .classic-home-grid>.card .card-art{backface-visibility:hidden;transform:translateZ(0)}
/* "우리팔자는 어떤 서비스인가요?" 상자의 테두리 제거(alpha.712, 사장님) — 위에 가는 선 하나로 카드 격자와 구분. */
.lucky-city-home .home-answer{border:0;border-top:1px solid var(--faint);border-radius:0;padding:26px 4px 8px;background:#fff}
/* 모바일 좌우 여백 한 번 더(alpha.713, 사장님) — 홈 본문 안쪽 여백 20→26px(≤374px: 18→22px). 셸 8px 과 합쳐 가장자리에서 34px. */
.lucky-city-home .relationship-home.classic-home{padding-inline:26px}
@media(max-width:374px){.lucky-city-home .relationship-home.classic-home{padding-inline:22px}}
.lucky-city-home .bottom-nav{width:min(calc(100% - 48px),430px)} /* alpha.714: 양옆 24px */
/* 설명 칸은 늘 정확히 2줄 높이(alpha.747, 사장님 재확인) — min-height는 긴 문구에서 칸이 늘어날 수 있으므로
   고정 높이와 두 줄 말줄임으로 다섯 상품의 카드 높이를 같게 유지한다. */
.lucky-city-home .classic-home-grid>.card{align-content:start}
.lucky-city-home .classic-home-grid>.card .card-desc{height:calc(2 * 1.36em + 18px);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* 인사말 글자 조금 작게(alpha.716, 사장님 "오른쪽 운이랑 너무 붙어 있음") — 32→28px(≤374px: 25→23px), 글 폭 64→62%. */
.lucky-city-home .classic-home .greeting{font-size:28px;line-height:1.3}
.home-hero-copy{width:62%}
@media(max-width:374px){.lucky-city-home .classic-home .greeting{font-size:23px}.home-hero-copy{width:64%}}

/* 인사말 3줄 유지 + 운이와 간격(alpha.717) — 716 의 글 폭 62%는 4줄로 꺾였다. 글 70%·운이 36%. */
.home-hero-copy{width:70%}
.lucky-city-home .classic-home .greeting{font-size:28px;line-height:1.3}
.lucky-city-home .classic-home .greeting-sub{max-width:none}
.home-hero-uni{width:36%;right:-6px;top:48px}
@media(max-width:374px){.home-hero-copy{width:70%}.lucky-city-home .classic-home .greeting{font-size:24px}.home-hero-uni{width:36%;right:-8px;top:50px}}

/* 풀이 비용 표식(alpha.746, 사장님) — 질문 줄에서 떼어 카드 우상단에 두고 Orbit으로 표시한다. */
.lucky-city-home .classic-home-grid>.card .home-reading-cost{position:absolute;z-index:4;top:10px;right:10px;font-family:var(--font-character);font-synthesis:none;pointer-events:none}
.lucky-city-home .classic-home-grid>.card .card-title{padding-right:58px}

/* "풀이 1" 배지(alpha.746)가 제목 줄 오른쪽을 차지해 "오늘의 운세"·"연도별 운세"가 두 줄로 꺾이고, 같은 줄의 이웃 카드가 늘어나 설명 아래가 비어 보였다(2026-09-02 사장님).
   배지를 그림 칸 오른쪽 위(캐릭터가 없는 빈 자리)로 내리고 제목은 한 줄로 고정한다. */
.lucky-city-home .classic-home-grid>.card .home-reading-cost{top:auto;bottom:auto;right:8px;transform:none}
.lucky-city-home .classic-home-grid>.card .card-title{white-space:nowrap;padding-right:12px}
.lucky-city-home .classic-home-grid>.card{--badge-top:46px}
.lucky-city-home .classic-home-grid>.card .home-reading-cost{top:var(--badge-top)}

/* 손그림 카드 외곽선(alpha.752, 사장님) — 반듯한 CSS 테두리를 숨기고 흔들린 단일 SVG 경로만 표시한다. */
.lucky-city-home .classic-home-grid>.card{--outline-flip-x:1;--outline-flip-y:1;border-color:transparent!important}
.lucky-city-home .classic-home-grid>.card::after{content:"";position:absolute;z-index:6;inset:0;display:block;background:url("/assets/hand-drawn-card-outline.svg?v=1") center/100% 100% no-repeat;transform:scaleX(var(--outline-flip-x)) scaleY(var(--outline-flip-y));pointer-events:none}
.lucky-city-home .classic-home-grid>.card:nth-child(2),.lucky-city-home .classic-home-grid>.card:nth-child(5){--outline-flip-x:-1}
.lucky-city-home .classic-home-grid>.card:nth-child(3),.lucky-city-home .classic-home-grid>.card:nth-child(4){--outline-flip-y:-1}
/* "풀이 1" 배지는 우상단(사장님 09-02 "풀이1은 우상단에"). 제목 앞 아이콘이 빠져(alpha.752) 폭이 생겼으니 배지 자리만 남기고 제목은 한 줄 고정,
   폰 폭에서는 제목 글자를 조금 줄인다(390px 카드 156px: 12 + "연도별 운세" + 배지 46 이 한 줄에 들어가야 한다). */
.lucky-city-home .classic-home-grid>.card .home-reading-cost{top:11px;right:10px;bottom:auto;transform:none}
.lucky-city-home .classic-home-grid>.card .card-title{white-space:nowrap;padding-right:46px}
@media(max-width:420px){.lucky-city-home .classic-home-grid>.card .card-title{font-size:17px}}
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card .card-title{font-size:15px;padding-right:42px}}
/* 홈 상자들도 손그림 테두리(2026-09-02). 인사 상자·무료 안내 띠·바텀 내비. 알약 모양 키커와 운이 동그라미는 그대로. */
.lucky-city-home .home-answer{border:12px solid transparent;border-image:url("/assets/hand-drawn-frame.svg?v=1") 48 / 12px stretch;border-radius:0;padding:12px 9px}
.lucky-city-home .launch-free-banner{border:10px solid transparent;border-image:url("/assets/hand-drawn-frame.svg?v=1") 48 / 12px stretch;border-radius:0;padding:9px 10px}
.lucky-city-home .bottom-nav{border:9px solid transparent;border-image:url("/assets/hand-drawn-frame.svg?v=1") 48 / 9px stretch;border-radius:0;padding:2px 6px calc(3px + env(safe-area-inset-bottom))}
/* 상품 카드 선을 다른 손그림 선과 통일(2026-09-02 사장님 "이것만 유독 굵고 라운드 렉트"). 754 의 큰 굴곡 외곽선(::after)은 끄고 9조각 손그림 테두리·직각. 그림 칸 밑선도 같은 자산의 아래 변만 써서 흔들린 선으로. */
.lucky-city-home .classic-home-grid>.card::after{display:none!important}
.lucky-city-home .classic-home-grid>.card{border:6px solid transparent!important;border-image:url("/assets/hand-drawn-frame.svg?v=1") 48 / 6px stretch!important;border-radius:0!important}
.lucky-city-home .classic-home-grid>.card .card-art{border:0!important;border-bottom:6px solid transparent!important;border-image:url("/assets/hand-drawn-frame.svg?v=1") 48 / 0 0 6px 0 stretch!important}
/* 테두리가 안쪽 폭을 먹으므로 제목·배지·설명 여백을 줄인다 */
.lucky-city-home .classic-home-grid>.card .card-title{padding:6px 40px 2px 8px!important;font-size:16px}
.lucky-city-home .classic-home-grid>.card .home-reading-cost{top:8px;right:6px}
.lucky-city-home .classic-home-grid>.card .card-desc{padding-left:8px!important;padding-right:6px!important}
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card .card-title{font-size:14px;padding-right:38px!important}}


/* 홈 소개 상자는 712 결정대로 무테(위 가는 선만) — 웹툰 층이 1.5px 잉크 테두리·18px 라운드로 되돌려 둔 것을 다시 걷는다(UI 검수 1차, alpha.773) */
.home-answer{border:0;border-top:1px solid var(--faint);border-radius:0;padding-left:0;padding-right:0}

/* 홈 좌우 여백을 다른 화면과 같게(alpha.782, 사장님 "홈도 다른 화면들처럼 동일하게") — 셸 8px + 안쪽 20px = 가장자리 28px(713 의 26px→20px, ≤374px 도 20px) */
.lucky-city-home .relationship-home.classic-home{padding-inline:20px}
@media(max-width:374px){.lucky-city-home .relationship-home.classic-home{padding-inline:20px}}

/* 홈 너비를 다른 화면과 같게(alpha.783, 사장님) — 셸·바텀 내비 상한 430px → 공용 --w(520px). 폰(≤446px)에선 이미 같았고 태블릿·데스크톱에서 달랐다 */
.lucky-city-home .shell{width:min(calc(100% - 16px),var(--w));max-width:var(--w)}
.lucky-city-home .bottom-nav{width:min(calc(100% - 48px),var(--w))}

/* 홈도 공용 바텀 내비 값 그대로(alpha.785) — 홈 전용 차이(운이 버튼 살구 면 등)를 지운다 */
.lucky-city-home .bottom-record-keeper>span{background:#fff;border-color:var(--coral)}

.lucky-city-home .bottom-nav{width:min(calc(100% - 32px),var(--w))} /* alpha.786: 공용과 같이 양옆 16px */

.lucky-city-home .bottom-nav{width:min(calc(100% - 16px),var(--w))} /* alpha.787: 본체와 같은 폭 */
/* 2026-09-06 12시 사장님 "운이가 잘리네": 부제를 빼자 hero 높이가 119px 로 줄어 그림(top 48 + 95)이 아래·오른쪽에서 잘렸다. 그림은 바닥에 붙이고 hero 는 그림이 다 들어갈 만큼만 높인다. */
.home-hero{min-height:152px}
.home-hero-uni{top:auto;bottom:0;right:0}
/* 2026-09-06 12시 사장님 "모바일에서 인사말이 너무 크다": 부제가 빠져 혼자 남은 인사말을 29px → 23px 로. 이름 줄도 같이 줄고, 그림 크기는 그대로. */
.lucky-city-home .classic-home .greeting{font-size:23px;line-height:1.36}
.lucky-city-home .classic-home .greeting>span{max-width:230px}
.home-hero-copy{padding-top:14px}
/* 2026-09-06 12시 사장님 "운이 캐릭터 영역을 좀 더 넉넉하게": 36% → 50%, hero 높이도 그만큼(그림이 잘리지 않게 바닥 고정 유지). 인사말 칸은 58% 로. */
.home-hero{min-height:186px}
.home-hero-copy{width:58%}
.home-hero-uni{width:50%;max-width:200px;right:-4px}
/* 2026-09-06 12시 사장님 "인사말 아래가 너무 남는다": 그림을 절대배치에서 빼 인사말과 나란히(플렉스, 바닥 정렬). hero 높이 = 그림 높이(≈95px)라 빈 칸이 없다. */
.home-hero{display:flex;align-items:flex-end;gap:6px;min-height:0;overflow:visible}
.home-hero-copy{flex:1;width:auto;padding-top:6px;padding-bottom:4px}
.home-hero-uni{position:static;flex:0 0 36%;width:36%;top:auto;bottom:auto;right:auto}
/* 2026-09-06 13시 사장님 "상품명은 Pretendard 볼드로": 홈 카드 제목만 Orbit → Pretendard 700. 인사말·본문은 그대로. */
.lucky-city-home .classic-home-grid>.card .card-title{font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
/* 2026-09-06 13시 사장님 "좀 더 크게": 카드 제목 20px → 24px(작은 폭 22px). */
/* 09-18: 카드 제목 손글씨(1MB)는 swap 이면 기본 글꼴로 그렸다가 느린 4G 에서 16~25초 뒤 바뀌는 게 크게 보였다(27px). block 도 3초 뒤엔 똑같이 바뀐다.
   optional — 거의 바로 준비되면 손글씨, 아니면 그 화면에선 Orbit 그대로(바뀌지 않음). 받은 파일은 1년 캐시라 다음 화면·재방문부터 손글씨.
   미리 받기(preload)도 뺀다 — 본문 Orbit 과 대역폭을 나눠 Orbit 까지 늦췄다.
   ⚠️ 이 파일은 (주)보이저엑스 사전 허가 없이 수정(서브셋 포함) 금지 — 글꼴 안 저작권 문구. 줄이지 말 것. */
@font-face{font-family:"Ownglyph ParkDaHyun";src:url("/assets/fonts/Ownglyph_ParkDaHyun.woff2") format("woff2");font-weight:400;font-display:optional}
/* 2026-09-06 13시 사장님 "온글잎 폰트로 아주 크게": 카드 제목 = 온글잎 박다현체 32px(작은 폭 29px). 손글씨는 굵기가 하나라 700 대신 크기로 세운다. */
/* Codex 09-18 P2: 손글씨 대신 Orbit 이 그대로 남으면 27px Orbit 이 손글씨보다 넓어 "연도별 운세"가 배지와 겹치고 "피드백 보내기"가 잘렸다.
   제목 전용 Orbit 얼굴을 따로 두고 size-adjust 67%(실측: 손글씨와 같은 폭, 390·360px 에서 배지와 안 겹침)로 줄인다 — 같은 파일 주소라 새로 받지 않는다. 손글씨가 있을 땐 이 얼굴은 쓰이지 않는다. */
@font-face{font-family:"Orbit Card Title";src:url("/assets/fonts/Orbit-Regular.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:67%}
.lucky-city-home .classic-home-grid>.card .card-title{font-family:"Ownglyph ParkDaHyun","Orbit Card Title",var(--font-character);font-weight:400;font-size:27px;letter-spacing:0;padding-right:46px;line-height:1.05}
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card .card-title{font-size:25px}}
/* 2026-09-11 홈이 11MB 였던 원인 하나: 서버가 박은 style 속성은 CSP 가 버려서, 그동안 위의 기본 그림(marker-dog 5장·hero-uni)을
   먼저 받고 진짜 그림을 또 받았다. 서버가 그림을 정해 준 자리는 기본 그림을 끈다 — frame.js 가 CSSOM 으로 심는 인라인 값이 이긴다. */
.lucky-city-home .classic-home-grid .card-art[data-card][style*="background-image"],.home-hero-uni[style*="background-image"]{background-image:none}
/* 2026-09-12 사장님 "우리궁합, 내팔자, 대운, 연도별, 오늘의 운세 순으로": 홈 카드 순서를 바꿔도 상품마다 원래 색이 따라가게 — 위치(nth-child) 대신 카드 자체에 묶는다(같은 구체성, 파일 끝이라 이긴다) */
.lucky-city-home .classic-home-grid>.card[data-compatibility-start]{--card-wash:#fbf0ff;--card-accent:#8152c8}
.lucky-city-home .classic-home-grid>.card[data-open="saju"]{--card-wash:#fff0ec;--card-accent:#ef5965}
.lucky-city-home .classic-home-grid>.card[data-open="luck"]{--card-wash:#eaf6ff;--card-accent:#1768b4}
.lucky-city-home .classic-home-grid>.card[data-open="yearly"]{--card-wash:#f5f8dd;--card-accent:#4f913c}
.lucky-city-home .classic-home-grid>.card[data-open="daily"]{--card-wash:#fff9dc;--card-accent:#176fc0}
.lucky-city-home .classic-home-grid>.card[data-feedback-start]{--card-wash:#f2f0ff;--card-accent:#7662bf}
/* 09-14 사장님: 유료 네 상품 카드에 "5000자 이상의 상세 풀이" 한 줄(오늘의 운세 카드는 없음) */
.lucky-city-home .classic-home-grid>.card .card-detail{position:absolute;z-index:2;top:38px;right:10px;margin:0;color:#7a4fd6;font-family:var(--font-character);font-size:10.5px;line-height:1.3;letter-spacing:-.02em;white-space:nowrap;text-align:right;pointer-events:none} /* 비용 표식 아래, 그림 위 */
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card .card-detail{top:36px;font-size:9.5px}}

/* "5000자 이상의 상세 풀이" 를 우상단 배지 밑에서 설명 문장 밑으로(2026-09-14 사장님 "풀이 1 과 붙이자 → 아니면 설명 쪽에 쓸까").
   우상단은 제목 글자 아래선(40px)까지 4px 여유뿐이라 붙이면 제목과 겹친다(헤드리스 실측). 설명 칸 4행에 정적으로 두고 설명 아래 여백만 줄여 붙인다.
   오늘의 운세·피드백 카드엔 이 줄이 없고 같은 줄의 짝끼리라 카드 높이 차이는 안 생긴다. */
.lucky-city-home .classic-home-grid>.card .card-detail{position:static;grid-row:4;top:auto;right:auto;z-index:auto;padding:0 8px 9px;text-align:left;white-space:normal;font-size:10.5px;line-height:1.3}
.lucky-city-home .classic-home-grid>.card .card-desc{height:calc(2 * 1.36em + 12px);padding-bottom:4px!important}
@media(max-width:374px){.lucky-city-home .classic-home-grid>.card .card-detail{padding:0 8px 8px;font-size:10px}}

/* Narrow cards reserve a separate row for the ticket badge so large titles stay readable. */
@media(max-width:374px){
  .lucky-city-home .classic-home-grid>.card .card-title{min-width:0;padding:6px 8px 20px!important}
  .lucky-city-home .classic-home-grid>.card .home-reading-cost{top:36px}
}