/* SavorIP Kids Maker Focus R2 — canvas first, one choice modal, child-friendly surfaces */
.family-memory[data-focus-r2-installed="true"]{
  --fm2-night:#061f2f;
  --fm2-forest:#073f35;
  --fm2-mint:#bfeedd;
  --fm2-sky:#cfeeff;
  --fm2-sun:#ffd56f;
  --fm2-coral:#ff927b;
  --fm2-lilac:#ded7ff;
  --fm2-paper:#fff8e8;
  position:relative;
  overflow:clip;
  background:
    radial-gradient(circle at 6% 18%,rgba(255,213,111,.28),transparent 25%),
    radial-gradient(circle at 93% 35%,rgba(117,207,226,.28),transparent 24%),
    radial-gradient(circle at 12% 73%,rgba(255,146,123,.18),transparent 27%),
    linear-gradient(180deg,#e9f4e9 0%,#f8efd9 45%,#e6f4ef 100%);
}
.family-memory[data-focus-r2-installed="true"]:before{
  content:"";
  position:absolute;
  inset:640px 0 auto;
  height:850px;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 12% 20%,#fff 0 4px,transparent 5px),
    radial-gradient(circle at 78% 12%,#ffd56f 0 5px,transparent 6px),
    radial-gradient(circle at 65% 72%,#fff 0 3px,transparent 4px),
    radial-gradient(circle at 28% 82%,#94d9ca 0 6px,transparent 7px);
  background-size:210px 190px,270px 240px,180px 210px,320px 260px;
}

.family-memory[data-focus-r2-installed="true"] .family-step-rail{
  position:sticky;
  top:82px;
  z-index:28;
  border-color:rgba(255,213,111,.52);
  background:linear-gradient(110deg,#073b32,#092d3c 58%,#16334d);
  box-shadow:0 18px 42px rgba(3,31,27,.24);
}
.family-memory[data-focus-r2-installed="true"] .family-step-rail a{
  border-color:rgba(255,255,255,.12);
  color:#eef9f4;
}
.family-memory[data-focus-r2-installed="true"] .family-step-rail a:hover,
.family-memory[data-focus-r2-installed="true"] .family-step-rail a:focus-visible{
  background:rgba(255,213,111,.13);
  outline:none;
}
.family-memory[data-focus-r2-installed="true"] .family-step-rail b{
  background:var(--fm2-sun);
  color:#103b33;
  box-shadow:0 0 0 4px rgba(255,213,111,.12);
}

.family-memory[data-focus-r2-installed="true"] .family-memory-layout{
  position:relative;
  z-index:2;
  grid-template-columns:minmax(0,1fr)!important;
  gap:18px;
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority{
  width:100%;
  scroll-margin-top:188px;
  border-color:rgba(255,213,111,.58);
  background:
    radial-gradient(circle at 92% 10%,rgba(80,174,180,.22),transparent 32%),
    linear-gradient(145deg,#083d35,#061f31 72%);
  box-shadow:0 24px 70px rgba(4,46,39,.24);
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority>header{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:13px;
  align-items:center;
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority>header>span{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:20px;
  background:var(--fm2-sun);
  color:#133f35;
  letter-spacing:0;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority>header h2{
  margin:0;
  color:#fff9ea;
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority>header p{
  color:#bfe4d9;
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-canvas-wrap{
  width:min(100%,calc((100vh - 270px) * 1.5789));
  min-width:0;
  margin-inline:auto;
  aspect-ratio:1200/760;
  border-color:#f4ca65;
  box-shadow:inset 0 0 0 3px #16483e,0 25px 55px rgba(0,0,0,.26);
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-canvas-wrap canvas{
  width:100%;
  height:100%;
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-canvas-tools button{
  border-color:rgba(255,255,255,.18);
  background:#fff8e8;
  box-shadow:0 7px 0 rgba(0,0,0,.12);
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-canvas-tools button:nth-child(2n){background:#dff6ee}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-backgrounds{
  border-color:rgba(255,255,255,.18);
  color:#fff8e8;
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-story-fields{
  padding:14px;
  border-radius:20px;
  background:rgba(255,248,232,.1);
}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-story-fields label{color:#e8f7f1}
.family-memory[data-focus-r2-installed="true"] .family-canvas-priority.is-canvas-arrival{
  animation:familyCanvasArrival 1.45s ease both;
}
@keyframes familyCanvasArrival{
  0%,100%{box-shadow:0 24px 70px rgba(4,46,39,.24)}
  35%{box-shadow:0 0 0 8px rgba(255,213,111,.35),0 28px 80px rgba(4,46,39,.34);transform:translateY(-3px)}
}

.family-maker-launchpad{
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(7,63,53,.16);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,248,232,.96),rgba(229,247,241,.97));
  box-shadow:0 18px 55px rgba(29,53,43,.1);
}
.family-maker-launchpad:after{
  content:"";
  position:absolute;
  right:-55px;
  top:-55px;
  width:190px;
  height:190px;
  border:34px solid rgba(255,213,111,.3);
  border-radius:50%;
  pointer-events:none;
}
.family-maker-launchpad>header{position:relative;z-index:1;margin-bottom:18px}
.family-maker-launchpad>header span{color:#ab6e0e!important}
.family-maker-launchpad>header h2{margin:5px 0 7px!important;font-size:clamp(27px,3vw,39px)!important}
.family-maker-launchers{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.family-maker-launchers button{
  min-height:126px;
  padding:18px;
  border:1px solid rgba(13,74,62,.16);
  border-radius:23px;
  color:#123d35;
  cursor:pointer;
  text-align:left;
  box-shadow:0 10px 24px rgba(28,70,57,.09);
  transition:transform .18s ease,box-shadow .18s ease;
}
.family-maker-launchers button:nth-child(1){background:linear-gradient(145deg,#ffe59b,#fff5d3)}
.family-maker-launchers button:nth-child(2){background:linear-gradient(145deg,#bceedd,#e6fbf3)}
.family-maker-launchers button:nth-child(3){background:linear-gradient(145deg,#bfe7ff,#e9f7ff)}
.family-maker-launchers button:nth-child(4){background:linear-gradient(145deg,#ffd0c5,#fff0eb)}
.family-maker-launchers button:hover,.family-maker-launchers button:focus-visible{transform:translateY(-4px);box-shadow:0 16px 30px rgba(28,70,57,.17);outline:3px solid rgba(7,63,53,.18);outline-offset:2px}
.family-maker-launchers i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:11px;border-radius:13px;background:#073f35;color:#ffd56f;font-size:19px;font-style:normal}
.family-maker-launchers strong,.family-maker-launchers span{display:block}
.family-maker-launchers strong{font-size:17px}
.family-maker-launchers span{margin-top:5px;color:#5d7069;font-size:11px;line-height:1.45}
.family-selection-status{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.family-selection-status p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0;padding:11px 14px;border-radius:15px;background:rgba(255,255,255,.68)}
.family-selection-status span{color:#7b8a84;font-size:11px;font-weight:900}
.family-selection-status strong{overflow:hidden;color:#6f7b76;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.family-selection-status strong.has-choice{color:#075346}

.family-memory[data-focus-r2-installed="true"] .family-production-card{
  position:relative;
  z-index:2;
  border-color:#b8d7d0;
  background:linear-gradient(135deg,#dff5ee 0%,#e6f3ff 48%,#fff0d2 100%);
}
.family-memory[data-focus-r2-installed="true"] .family-parent-card{
  position:relative;
  z-index:2;
  border-color:#e6bd67;
  background:linear-gradient(135deg,#fff0cc,#fffae9 48%,#e3f4ec);
}

.family-choice-dialog{
  width:min(1180px,calc(100vw - 42px));
  max-width:none;
  height:min(850px,calc(100dvh - 38px));
  max-height:none;
  margin:auto;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,213,111,.62);
  border-radius:34px;
  background:#f8f3e5;
  color:#12332d;
  box-shadow:0 35px 110px rgba(0,18,25,.55);
}
.family-choice-dialog:not([open]){display:none}
.family-choice-dialog::backdrop{background:rgba(1,20,24,.76);backdrop-filter:blur(10px)}
.family-choice-shell{display:grid;height:100%;grid-template-rows:auto minmax(0,1fr)}
.family-choice-header{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:23px 28px;
  border-bottom:1px solid rgba(255,213,111,.34);
  background:
    radial-gradient(circle at 82% 0,rgba(76,169,177,.24),transparent 28%),
    linear-gradient(120deg,#073f35,#082c3d);
  color:#fff;
}
.family-choice-header>div{min-width:0}
.family-choice-header span{color:#ffd56f;font-size:11px;font-weight:950;letter-spacing:.16em}
.family-choice-header h2{margin:5px 0 3px!important;color:#fffaf0;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(27px,3vw,42px)!important;letter-spacing:-.035em}
.family-choice-header p{max-width:760px;margin:0;color:#bfe1d8;font-size:12px;line-height:1.5}
.family-choice-close{display:grid;flex:0 0 auto;place-items:center;width:50px;height:50px;border:1px solid rgba(255,213,111,.48);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
.family-choice-close span{color:inherit;font:300 38px/1 Arial;letter-spacing:0;transform:translateY(-2px)}
.family-choice-close:hover,.family-choice-close:focus-visible{background:#ffd56f;color:#0b4036;outline:none}
.family-choice-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px;background:
  radial-gradient(circle at 0 0,rgba(255,213,111,.22),transparent 28%),
  radial-gradient(circle at 100% 100%,rgba(126,208,217,.22),transparent 25%),
  #f8f3e5}
.family-choice-screen[hidden]{display:none!important}
.family-choice-screen>.family-source-card,
.family-choice-screen>.family-product-card{
  width:100%!important;
  margin:0!important;
  border-color:rgba(7,63,53,.18);
  background:rgba(255,250,238,.92);
  box-shadow:none;
}
.family-choice-screen>.family-source-card{display:block!important;padding:26px!important}
.family-choice-screen>.family-source-card[hidden]{display:none!important}
.family-choice-screen>.family-product-card{padding:26px!important}
.family-choice-screen .family-product-grid{grid-template-columns:repeat(5,minmax(150px,1fr));overflow:visible}
.family-choice-screen .family-product-item{background:#fff8e8;box-shadow:0 10px 24px rgba(34,71,58,.08)}
.family-choice-screen .family-product-item:nth-child(3n+2){background:#eaf8f3}
.family-choice-screen .family-product-item:nth-child(3n){background:#eef7ff}
.family-choice-screen .family-product-item:hover,.family-choice-screen .family-product-item:focus-visible{border-color:#0c6a58;transform:translateY(-3px);outline:none}

.family-choice-detail{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:24px;padding:6px}
.family-choice-detail[hidden]{display:none!important}
.family-detail-back{grid-column:1/-1;justify-self:start;min-height:42px;padding:0 16px;border:1px solid #c8b995;border-radius:999px;background:#fff9ec;color:#174a40;font-weight:900;cursor:pointer}
.family-detail-visual{display:grid;min-height:480px;place-items:center;overflow:hidden;border:6px solid #0c5144;border-radius:28px;background:linear-gradient(145deg,#dff4ed,#fff0c9)}
.family-detail-visual img{display:block;width:100%;height:100%;max-height:620px;object-fit:contain}
.family-detail-copy{align-self:center;padding:16px}
.family-detail-copy small{color:#ad7013;font-weight:950;letter-spacing:.12em}
.family-detail-copy h3{margin:10px 0 12px;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(34px,5vw,62px);line-height:1.03}
.family-detail-copy p{color:#5d7069;line-height:1.75}
.family-detail-primary,.family-use-product{
  width:100%;
  min-height:58px;
  margin-top:15px;
  border:0;
  border-radius:18px;
  background:linear-gradient(110deg,#ffd56f,#f0b83b)!important;
  color:#123d35!important;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 13px 28px rgba(143,94,12,.2)!important;
}
.family-product-back{display:none}
.family-choice-screen[data-family-choice-screen="product"] .family-preview-layout{display:none}
.family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-product-card>header,
.family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-product-grid{display:none}
.family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-product-back{display:inline-flex;margin-bottom:15px}
.family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-layout{display:grid;margin:0;padding:0;border:0}
.family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-stage{min-height:510px;border:6px solid #0c5144;background:linear-gradient(145deg,#e3f3ed,#fff0ce)}
.family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-copy{padding:12px}
.family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-copy h3{font-size:clamp(36px,5vw,64px)}
.family-choice-screen[data-family-choice-screen="product"].is-detail-view #familyBuildPreview{background:#073f35;color:#fff}

@media(max-width:900px){
  .family-maker-launchers{grid-template-columns:1fr 1fr}
  .family-choice-screen .family-product-grid{grid-template-columns:repeat(3,1fr)}
  .family-choice-detail{grid-template-columns:1fr}
  .family-detail-visual{min-height:360px}
}

@media(max-width:760px){
  .family-memory[data-focus-r2-installed="true"] .family-step-rail{top:72px}
  .family-memory[data-focus-r2-installed="true"] .family-canvas-priority{scroll-margin-top:158px;padding:14px!important}
  .family-memory[data-focus-r2-installed="true"] .family-canvas-priority>header{grid-template-columns:auto 1fr;column-gap:9px}
  .family-memory[data-focus-r2-installed="true"] .family-canvas-priority>header>span{width:48px;height:48px;border-radius:15px;font-size:10px}
  .family-memory[data-focus-r2-installed="true"] .family-canvas-priority>header h2{font-size:26px!important}
  .family-memory[data-focus-r2-installed="true"] .family-canvas-priority .family-canvas-wrap{width:100%;max-height:none}
  .family-maker-launchpad{padding:18px;border-radius:22px}
  .family-maker-launchers{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory}
  .family-maker-launchers button{flex:0 0 min(74vw,260px);min-height:112px;scroll-snap-align:start}
  .family-selection-status{grid-template-columns:1fr}
  .family-choice-dialog{width:100vw;height:100dvh;border:0;border-radius:0}
  .family-choice-header{padding:17px 16px}
  .family-choice-header p{font-size:11px}
  .family-choice-close{width:44px;height:44px}
  .family-choice-body{padding:12px}
  .family-choice-screen>.family-source-card,.family-choice-screen>.family-product-card{padding:16px!important;border-radius:22px}
  .family-choice-screen .family-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:visible}
  .family-choice-screen .family-product-item{min-width:0}
  .family-choice-screen .family-product-item img{height:auto;aspect-ratio:1.08;object-fit:cover}
  .family-choice-detail{display:block;padding:0}
  .family-detail-back{margin-bottom:12px}
  .family-detail-visual{min-height:0;aspect-ratio:1/1;border-width:4px;border-radius:22px}
  .family-detail-copy{padding:17px 4px 4px}
  .family-detail-copy h3{font-size:34px}
  .family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-layout{grid-template-columns:1fr}
  .family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-stage{min-height:0;aspect-ratio:1/1;border-width:4px}
  .family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-copy{padding:17px 2px}
  .family-choice-screen[data-family-choice-screen="product"].is-detail-view .family-preview-copy h3{font-size:36px}
}

@media(max-width:410px){
  .family-choice-header h2{font-size:25px!important}
  .family-choice-header p{display:none}
  .family-choice-screen .family-product-grid{grid-template-columns:1fr 1fr}
  .family-maker-launchers button{flex-basis:78vw}
}

@media(prefers-reduced-motion:reduce){
  .family-memory[data-focus-r2-installed="true"] .family-canvas-priority.is-canvas-arrival{animation:none}
}
