/* SavorIP Kids Maker Play R3.2 — one-tap choices, visible results, safe canvas arrival */
.family-memory[data-play-r3-installed="true"]{
  --fm3-ink:#083c35;
  --fm3-night:#082c43;
  --fm3-sun:#ffd264;
  --fm3-mint:#bdebd9;
  --fm3-sky:#bfe5ff;
  --fm3-coral:#ffc5b7;
  --fm3-lilac:#dcd5ff;
}

.family-memory[data-play-r3-installed="true"] .family-canvas-priority{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-maker-launchpad{
  order:4;
  overflow:visible;
  margin:0;
  padding:11px;
  border-color:rgba(255,210,100,.38);
  border-radius:22px;
  background:rgba(255,255,255,.08);
  box-shadow:none;
}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-maker-launchpad:after{display:none}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-maker-launchpad>header[hidden]{display:none!important}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers button{
  min-height:66px;
  padding:9px 11px;
  border-width:2px;
  border-color:rgba(255,255,255,.2);
  border-radius:18px;
  box-shadow:0 8px 18px rgba(0,20,26,.14);
}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers button:nth-child(1){background:linear-gradient(145deg,#ffe490,#fff3c9)}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers button:nth-child(2){background:linear-gradient(145deg,#b7ecd8,#e5faf2)}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers button:nth-child(3){background:linear-gradient(145deg,#d5cfff,#f0edff)}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers button:nth-child(4){background:linear-gradient(145deg,#bce4ff,#e8f6ff)}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers button:nth-child(5){background:linear-gradient(145deg,#ffc3b4,#fff0ec)}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers i{
  float:left;
  width:31px;
  height:31px;
  margin:0 8px 0 0;
  border-radius:10px;
  font-size:15px;
}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers strong{font-size:14px;line-height:1.25}
.family-memory[data-play-r3-installed="true"] .family-maker-launchers span{display:none}
.family-memory[data-play-r3-installed="true"] .family-selection-status{
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:8px;
}
.family-memory[data-play-r3-installed="true"] .family-selection-status p{
  padding:8px 11px;
  background:rgba(255,255,255,.88);
}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-canvas-wrap{order:1}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-canvas-tools{order:2}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-canvas-result{order:3}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-backgrounds{order:5}
.family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-story-fields{order:6}
.family-memory[data-play-r3-installed="true"] #familyCanvasStep{scroll-margin-top:238px}

.family-canvas-result{
  display:grid;
  grid-template-columns:106px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:11px 13px;
  border:1px solid rgba(255,210,100,.5);
  border-radius:20px;
  background:linear-gradient(110deg,rgba(255,250,232,.98),rgba(219,245,237,.96));
  color:var(--fm3-ink);
  box-shadow:0 11px 27px rgba(0,20,25,.15);
}
.family-canvas-result-visual{
  position:relative;
  width:106px;
  height:74px;
  overflow:hidden;
  border:3px solid #fff;
  border-radius:15px;
  background:linear-gradient(145deg,#dff3ed,#fff0ce);
  box-shadow:0 5px 13px rgba(20,66,55,.15);
}
.family-canvas-result-visual img:first-child{width:100%;height:100%;object-fit:cover}
.family-canvas-result-visual img:last-child{
  position:absolute;
  left:50%;top:50%;
  width:38%;height:48%;
  transform:translate(-50%,-48%);
  object-fit:contain;
  border:2px solid #fff;
  border-radius:11px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.family-canvas-result:not(.has-product).has-picture .family-canvas-result-visual img:last-child{
  width:82%;height:82%;transform:translate(-50%,-50%);border:0;border-radius:10px;box-shadow:none;
}
.family-canvas-result.is-empty .family-canvas-result-visual:after{
  content:"✦";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#0a5d4d;
  font-size:28px;
}
.family-canvas-result.is-exact .family-canvas-result-visual img:first-child{object-fit:contain;background:#fff}
.family-canvas-result>div:nth-child(2){min-width:0}
.family-canvas-result>div:nth-child(2)>span,
.family-canvas-result>div:nth-child(2)>strong,
.family-canvas-result>div:nth-child(2)>small{display:block}
.family-canvas-result>div:nth-child(2)>span{color:#aa6e0f;font-size:10px;font-weight:950;letter-spacing:.08em}
.family-canvas-result>div:nth-child(2)>strong{overflow:hidden;margin-top:3px;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.family-canvas-result>div:nth-child(2)>small{margin-top:4px;color:#557069;font-size:10px}
.family-canvas-result>button{
  min-height:45px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  background:#075144;
  color:#fff;
  font-weight:950;
  cursor:pointer;
}

.family-memory[data-play-r3-installed="true"] .family-choice-shell{
  grid-template-rows:auto auto minmax(0,1fr);
}
.family-memory[data-play-r3-installed="true"] .family-choice-header{
  padding:15px 22px;
}
.family-memory[data-play-r3-installed="true"] .family-choice-header h2{
  margin-top:3px!important;
  font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:clamp(24px,2.35vw,34px)!important;
}
.family-memory[data-play-r3-installed="true"] .family-choice-header p{font-size:11px}
.family-memory[data-play-r3-installed="true"] .family-choice-body{padding:14px 20px 22px}
.family-memory[data-play-r3-installed="true"] .family-choice-screen>.family-source-card,
.family-memory[data-play-r3-installed="true"] .family-choice-screen>.family-product-card{padding:16px!important}
.family-memory[data-play-r3-installed="true"] .family-choice-screen>.family-source-card>header,
.family-memory[data-play-r3-installed="true"] .family-choice-screen>.family-product-card>header{display:none}
.family-live-result{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:13px;
  min-height:136px;
  padding:10px 20px;
  border-bottom:1px solid rgba(7,63,53,.15);
  background:
    radial-gradient(circle at 94% 12%,rgba(255,210,100,.36),transparent 30%),
    linear-gradient(115deg,#fff7df 0%,#e3f5ef 54%,#ddebfb 100%);
  color:var(--fm3-ink);
}
.family-live-copy{align-self:center;min-width:0}
.family-live-copy>span{color:#a86d0e;font-size:10px;font-weight:950;letter-spacing:.13em}
.family-live-copy h3{margin:3px 0 4px;font-size:clamp(17px,1.7vw,23px);line-height:1.1;letter-spacing:-.035em}
.family-live-copy>p{margin:0;color:#55706a;font-size:12px;line-height:1.55}
.family-live-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 0}
.family-live-copy dl div{min-width:0;padding:5px 8px;border-radius:10px;background:rgba(255,255,255,.72)}
.family-live-copy dt{color:#7d8d88;font-size:9px;font-weight:900}
.family-live-copy dd{overflow:hidden;margin:2px 0 0;color:#71817c;font-size:11px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.family-live-copy dd.has-choice{color:#075144}
.family-live-actions{display:flex;gap:7px;margin-top:7px}
.family-live-actions button{
  min-height:34px;
  padding:0 11px;
  border:1px solid #0a5648;
  border-radius:13px;
  background:#fffaf0;
  color:#0a5044;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
}
.family-live-actions button:first-child{border:0;background:linear-gradient(110deg,#ffd264,#efb538);box-shadow:0 7px 15px rgba(157,101,8,.18)}
.family-live-visual{
  position:relative;
  align-self:center;
  min-height:116px;
  padding:23px 9px 16px;
  overflow:hidden;
  border:4px solid rgba(7,75,63,.9);
  border-radius:18px;
  background:linear-gradient(145deg,#e5f6f0,#fff0cf);
  box-shadow:0 13px 30px rgba(9,58,49,.17);
}
.family-live-visual>[data-family-result-badge]{
  position:absolute;
  z-index:4;
  top:10px;left:11px;
  padding:5px 9px;
  border-radius:999px;
  background:#075144;
  color:#fff;
  font-size:9px;
  font-weight:950;
}
.family-live-visual>small{
  position:absolute;
  z-index:4;
  left:10px;right:10px;bottom:4px;
  overflow:hidden;
  color:#537069;
  font-size:8px;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.family-live-product,.family-live-character,.family-live-source,.family-live-empty{position:relative;width:100%;height:84px}
.family-live-product>img:first-child,
.family-live-character>img:first-child{display:block;width:100%;height:100%;object-fit:contain}
.family-live-product{overflow:hidden;border-radius:13px;background:rgba(255,255,255,.42)}
.family-live-product>img:first-child{transform:scale(1.28);transform-origin:center}
.family-live-product>[data-family-result-art]{
  position:absolute;
  left:50%;top:52%;
  width:58px;height:58px;
  transform:translate(-50%,-50%) rotate(-2deg);
  object-fit:contain;
  border:4px solid #fff;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 22px rgba(1,22,27,.3);
}
.family-live-product>b{
  position:absolute;
  left:50%;top:52%;
  display:grid;
  width:58px;height:58px;
  place-items:center;
  transform:translate(-50%,-50%);
  border:2px dashed #0a5d4d;
  border-radius:50%;
  background:rgba(255,255,255,.84);
  color:#0a5d4d;
  font-size:30px;
}
.family-live-product.has-picture>b{display:none}
.family-live-product.is-exact>img:first-child{object-fit:contain;transform:none}
.family-live-character>[data-family-result-character-art]{
  position:absolute;
  left:10px;bottom:2px;
  width:72px;height:72px;
  object-fit:contain;
  border:4px solid #fff;
  border-radius:50%;
  background:#fff;
  box-shadow:0 7px 18px rgba(1,22,27,.28);
}
.family-live-source{display:grid;place-items:center;background-position:center;background-repeat:no-repeat;background-size:contain}
.family-live-source[hidden],.family-live-empty[hidden]{display:none!important}
.family-live-source img[data-family-result-source]{position:relative;z-index:1;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;border-radius:12px;opacity:1!important;visibility:visible!important}
.family-live-source b{position:absolute;z-index:2;right:4px;bottom:2px;display:grid;width:28px;height:28px;place-items:center;border:3px solid #fff;border-radius:50%;background:#ffd264;color:#075144;font-size:16px}
.family-live-empty{display:grid;place-items:center;align-content:center;gap:5px;color:#0a5d4d;text-align:center}
.family-live-empty i{display:grid;width:42px;height:42px;place-items:center;border-radius:15px;background:#fff;color:#bb7a12;font-size:22px;font-style:normal;box-shadow:0 7px 16px rgba(9,58,49,.12)}
.family-live-empty strong{font-size:11px}
.family-live-result.is-empty-result .family-live-copy dl{display:none}
.family-live-result.is-empty-result .family-live-visual{border-style:dashed;box-shadow:none}

.family-character-screen>.family-production-card{
  width:100%;
  margin:0;
  padding:25px;
  border:1px solid rgba(7,63,53,.18);
  border-radius:26px;
  box-shadow:none;
}
.family-character-picker{
  margin:0 0 14px;
  padding:16px;
  border:1px solid rgba(7,63,53,.18);
  border-radius:22px;
  background:linear-gradient(120deg,#fff8e8,#e5f7f1);
}
.family-character-picker>header{margin-bottom:11px}
.family-character-picker>header span{color:#aa6e0f;font-size:9px;font-weight:950;letter-spacing:.1em}
.family-character-picker>header h3{margin:3px 0 2px;font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-size:20px}
.family-character-picker>header p{margin:0;color:#597169;font-size:10px}
.family-character-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.family-character-options button{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;align-items:center;min-height:86px;padding:7px;border:3px solid transparent;border-radius:18px;background:#fff;color:#0b443a;cursor:pointer;text-align:left;box-shadow:0 8px 18px rgba(20,68,56,.09)}
.family-character-options button:hover,.family-character-options button:focus-visible{border-color:#75c9b2;outline:none;transform:translateY(-2px)}
.family-character-options button.is-active{border-color:#ffd264;box-shadow:0 0 0 3px #0b5144}
.family-character-options figure{position:relative;grid-row:1/3;width:76px;height:68px;margin:0;overflow:hidden;border-radius:13px;background:#e1f4ee}
.family-character-options img{width:100%;height:100%;object-fit:cover}
.family-character-options figure i{position:absolute;right:4px;bottom:4px;display:grid;width:22px;height:22px;place-items:center;border-radius:8px;background:#ffd264;color:#075144;font-size:12px;font-style:normal}
.family-character-options strong{align-self:end;font-size:13px}
.family-character-options span{align-self:start;color:#668078;font-size:9px}
.family-character-screen .family-turnaround-board{position:relative}
.family-character-screen:not(.has-generated-character) .family-turnaround-board figure{opacity:.12;filter:grayscale(1)}
.family-character-board-gate{position:absolute;z-index:5;inset:0;display:grid;place-items:center;align-content:center;gap:7px;padding:20px;border:2px dashed rgba(7,81,68,.35);border-radius:20px;background:rgba(237,248,243,.9);color:#0b5144;text-align:center}
.family-character-board-gate i{display:grid;width:48px;height:48px;place-items:center;border-radius:16px;background:#ffd264;font-size:24px;font-style:normal}
.family-character-board-gate strong{font-size:16px}
.family-character-board-gate span{max-width:310px;color:#5c746c;font-size:10px;line-height:1.5}
.family-character-screen.has-generated-character .family-character-board-gate{display:none}
.family-character-screen .family-production-layout{gap:18px}
.family-character-screen .family-turnaround-board{min-width:0}
.family-character-screen .family-production-actions{min-width:260px}

.family-world-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.family-world-grid button{
  display:grid;
  min-height:255px;
  place-items:center;
  align-content:center;
  gap:10px;
  padding:18px;
  border:4px solid transparent;
  border-radius:28px;
  color:#0b443a;
  cursor:pointer;
  box-shadow:0 13px 28px rgba(20,68,56,.13);
  transition:transform .18s ease,border-color .18s ease;
}
.family-world-grid button:nth-child(1){background:linear-gradient(145deg,#09253e,#184d6c);color:#fff}
.family-world-grid button:nth-child(2){background:linear-gradient(145deg,#fff0b9,#f6c45d)}
.family-world-grid button:nth-child(3){background:linear-gradient(145deg,#d9f2ff,#8ed0f2)}
.family-world-grid button:nth-child(4){background:linear-gradient(145deg,#d7f5df,#87d1ac)}
.family-world-grid button:hover,.family-world-grid button:focus-visible{transform:translateY(-4px);outline:none}
.family-world-grid button.is-active{border-color:#ffd264;box-shadow:0 0 0 4px #0b5144,0 17px 33px rgba(20,68,56,.22)}
.family-world-grid i{display:grid;width:70px;height:70px;place-items:center;border-radius:24px;background:rgba(255,255,255,.2);font-size:35px;font-style:normal}
.family-world-grid strong{font-size:20px}
.family-world-grid span{font-size:11px;opacity:.76}

@media(max-width:900px){
  .family-memory[data-play-r3-installed="true"] .family-maker-launchers{grid-template-columns:repeat(3,1fr)}
  .family-live-result{grid-template-columns:minmax(0,1fr) 230px}
  .family-world-grid{grid-template-columns:1fr 1fr}
  .family-world-grid button{min-height:190px}
}

@media(max-width:760px){
  .family-memory[data-play-r3-installed="true"] .family-canvas-priority{gap:10px}
  .family-memory[data-play-r3-installed="true"] .family-canvas-priority>.family-maker-launchpad{padding:8px;border-radius:16px}
  .family-memory[data-play-r3-installed="true"] .family-maker-launchers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    overflow:visible;
    padding:0;
  }
  .family-memory[data-play-r3-installed="true"] .family-maker-launchers button{
    min-width:0;
    min-height:62px;
    padding:10px;
  }
  .family-memory[data-play-r3-installed="true"] .family-maker-launchers button:nth-child(5){grid-column:1/-1;min-height:56px}
  .family-memory[data-play-r3-installed="true"] .family-maker-launchers i{width:27px;height:27px;margin-right:7px;font-size:13px}
  .family-memory[data-play-r3-installed="true"] .family-maker-launchers strong{font-size:12px}
  .family-memory[data-play-r3-installed="true"] .family-maker-launchers span{padding-top:5px;font-size:9px}
  .family-memory[data-play-r3-installed="true"] .family-selection-status{display:none}

  .family-canvas-result{grid-template-columns:74px minmax(0,1fr) auto;gap:8px;padding:8px;border-radius:15px}
  .family-canvas-result-visual{width:74px;height:60px;border-radius:11px}
  .family-canvas-result>div:nth-child(2)>strong{font-size:11px}
  .family-canvas-result>div:nth-child(2)>small{font-size:8px}
  .family-canvas-result>button{min-height:38px;padding:0 10px;font-size:10px}

  .family-memory[data-play-r3-installed="true"] .family-choice-header{padding:12px 14px}
  .family-memory[data-play-r3-installed="true"] .family-choice-header h2{margin-top:3px!important;font-size:23px!important}
  .family-memory[data-play-r3-installed="true"] .family-choice-header p{max-width:calc(100vw - 85px);font-size:9px}
  .family-memory[data-play-r3-installed="true"] .family-choice-close{width:40px;height:40px}
  .family-live-result{
    grid-template-columns:minmax(0,1fr) 128px;
    gap:8px;
    min-height:122px;
    padding:8px 10px;
  }
  .family-live-copy h3{font-size:16px}
  .family-live-copy>p{font-size:9px}
  .family-live-copy dl{display:none}
  .family-live-actions{gap:5px;margin-top:8px}
  .family-live-actions button{min-height:36px;padding:0 8px;font-size:9px}
  .family-live-visual{min-height:103px;padding:23px 5px 13px;border-width:3px;border-radius:16px}
  .family-live-product,.family-live-character,.family-live-source,.family-live-empty{height:68px}
  .family-live-product>img:first-child{transform:scale(1.18)}
  .family-live-product>[data-family-result-art]{width:44px;height:44px;border-width:2px;border-radius:9px}
  .family-live-character>[data-family-result-character-art]{width:43px;height:43px;border-width:2px}
  .family-live-visual>small{display:none}
  .family-character-screen>.family-production-card{padding:14px;border-radius:20px}
  .family-character-picker{padding:11px;border-radius:17px}
  .family-character-picker>header h3{font-size:17px}
  .family-character-options{grid-template-columns:1fr;gap:7px}
  .family-character-options button{grid-template-columns:66px minmax(0,1fr);min-height:74px}
  .family-character-options figure{width:66px;height:58px}
  .family-character-screen .family-production-layout{grid-template-columns:1fr}
  .family-character-screen .family-production-actions{min-width:0}
  .family-world-grid{gap:8px}
  .family-world-grid button{min-height:145px;padding:12px;border-radius:20px}
  .family-world-grid i{width:49px;height:49px;border-radius:16px;font-size:25px}
  .family-world-grid strong{font-size:15px}
}

@media(max-width:410px){
  .family-live-result{grid-template-columns:minmax(0,1fr) 112px}
  .family-live-copy>span{font-size:8px}
  .family-live-copy h3{font-size:14px}
  .family-live-actions button:nth-child(2){display:none}
  .family-canvas-result{grid-template-columns:62px minmax(0,1fr) auto}
  .family-canvas-result-visual{width:62px;height:54px}
}

@media(prefers-reduced-motion:reduce){
  .family-world-grid button,.family-memory[data-play-r3-installed="true"] .family-maker-launchers button{transition:none}
}