/* YEOKJU · My Sanctuary 2026-10-30 / Mobile-first premium private library.
 * Scoped to #mypageView, never alters Google/Kakao auth modal or payment views. */
@media screen{
 body:has(#mypageView.active){background:#070d16!important}
 body:has(#mypageView.active) #resultStage{
  display:block!important;position:relative!important;
  box-sizing:border-box!important;width:100%!important;max-width:none!important;
  padding:0!important;margin:0!important;min-height:100dvh!important;
  background:#070d16!important;border:0!important;
 }
 body:has(#mypageView.active) #resultStage>.result-head,
 body:has(#mypageView.active) #resultStage>#nativeReadingStatus,
 body:has(#mypageView.active) #nativeEngineHost>.topbar,
 body:has(#mypageView.active) #nativeEngineHost>header,
 body:has(#mypageView.active) #nativeEngineHost>footer,
 body:has(#mypageView.active) #nativeEngineHost>main>footer{
  display:none!important;
 }
 body:has(#mypageView.active) #nativeEngineHost{
  display:block!important;box-sizing:border-box!important;
  width:100%!important;max-width:none!important;margin:0!important;
  padding:0!important;background:#070d16!important;overflow:visible!important;
 }
 body:has(#mypageView.active) #nativeEngineHost>main{
  display:block!important;box-sizing:border-box!important;
  width:100%!important;max-width:none!important;
  padding:0!important;margin:0!important;background:#070d16!important;
 }
 #mypageView.ym-profile-view.active{
  display:block!important;box-sizing:border-box!important;
  padding:0!important;margin:0!important;width:100%!important;max-width:none!important;
  min-height:100dvh!important;overflow:visible!important;
  background:#070d16!important;color:#fff3df!important;
 }
 #mypageView .ym-page{
  box-sizing:border-box;max-width:610px;width:100%;margin:0 auto;
  padding:0 0 calc(60px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#111323,#0a111e 40%,#080c18 100%);
  border-inline:1px solid #c3a37830;
  box-shadow:0 25px 90px #0009;
 }
 #mypageView .ym-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(420px,85svh,650px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(20px + env(safe-area-inset-top,0px)) clamp(18px,5.6vw,36px) 30px;
  background:
   linear-gradient(180deg,#070b17a8 0%,#09101d38 23%,#090d17a3 57%,#0b1020f5 87%,#0b1020 100%),
   url('sanctuary-temple-atlas.webp') center 33%/cover no-repeat;
  color:#f9eddb!important;
 }
 #mypageView .ym-hero:after{
  content:'';position:absolute;inset:10px;pointer-events:none;z-index:-1;
  border:1px solid #d9ba8b35;box-shadow:inset 0 0 0 6px #050c1b22;
 }
 #mypageView .ym-topline{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:18px;right:18px;
  z-index:2;
 }
 #mypageView .ym-home{
  min-height:39px!important;max-width:55%;
  padding:8px 14px!important;margin:0!important;
  border:1px solid #e2c59d85!important;border-radius:7px!important;
  background:#07101cc4!important;color:#f6e4c9!important;
  font:700 12px/1.4 'Noto Sans KR',sans-serif!important;
  backdrop-filter:blur(8px);cursor:pointer;
 }
 #mypageView .ym-top-mark{
  font:600 10px/1.5 'Noto Serif KR',serif!important;letter-spacing:.16em;
  color:#f5daac!important;text-shadow:0 2px 7px #000;
 }
 #mypageView .ym-seal{
  display:grid;place-items:center;
  width:64px;height:64px;margin:0 0 24px;
  border:1px solid #e9c58b9c;border-radius:50%;
  background:radial-gradient(circle,#2b202ccc,#080e1cc2);
  color:#ffdfa8!important;font:600 38px/1 'Noto Serif KR',serif;
  box-shadow:0 0 0 10px #c8a16c1c,0 0 36px #b4865d5a;
 }
 #mypageView .ym-eyebrow{
  display:block;margin:0 0 10px;
  font:700 11px/1.6 'Noto Sans KR',sans-serif!important;
  letter-spacing:.15em;color:#ebc18a!important;
 }
 #mypageView .ym-hero-title{
  margin:0 0 18px!important;color:#fff4dc!important;
  font:700 clamp(33px,8.4vw,48px)/1.35 'Noto Serif KR',serif!important;
  letter-spacing:-.07em;word-break:keep-all;
  text-shadow:0 4px 28px #000;
 }
 #mypageView .ym-hero-lead{
  margin:0 0 27px!important;
  font:500 clamp(14px,4vw,17px)/1.86 'Noto Sans KR',sans-serif!important;
  color:#f1e0ca!important;word-break:keep-all;
  text-shadow:0 2px 13px #000;
 }
 #mypageView .ym-account{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:19px 0 0;
  border-top:1px solid #e0bd885a;
 }
 #mypageView .ym-identity{min-width:0;flex:1}
 #mypageView #accountName{
  margin:0 0 3px!important;
  font:700 clamp(17px,4.8vw,22px)/1.4 'Noto Serif KR',serif!important;
  color:#fff6e6!important;word-break:break-word;
 }
 #mypageView #accountEmail{
  margin:0!important;color:#ddc8ae!important;
  font:500 12px/1.6 'Noto Sans KR',sans-serif!important;
  overflow-wrap:anywhere;
 }
 #mypageView #mypageLogin{
  flex:none;min-height:41px;padding:9px 13px!important;
  border:1px solid #e9c692!important;border-radius:8px!important;
  background:linear-gradient(135deg,#efd5ab,#d0a16b)!important;
  color:#271b13!important;font:800 12px 'Noto Sans KR',sans-serif!important;
  cursor:pointer;box-shadow:0 7px 20px #0007!important;
 }
 #mypageView .ym-library{padding:29px clamp(16px,5vw,29px) 20px}
 #mypageView .ym-section-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
 #mypageView .ym-section-line h2{
  margin:0!important;font:700 clamp(22px,5.5vw,28px)/1.5 'Noto Serif KR',serif!important;
  color:#fff0d6!important;letter-spacing:-.05em;
 }
 #mypageView .ym-section-line>span{font:600 11px/1.7 'Noto Sans KR',sans-serif!important;color:#e6ba84!important}
 #mypageView .ym-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0 0 28px}
 #mypageView .ym-stat{
  display:flex;flex-direction:column;gap:3px;
  padding:17px 17px 15px;border:1px solid #ba956e6b;border-radius:10px;
  background:radial-gradient(ellipse at 100% 0%,#9a735339,transparent 77%),linear-gradient(140deg,#211d27,#111723);
 }
 #mypageView .ym-stat small{color:#dac3a3!important;font:600 12px/1.5 'Noto Sans KR',sans-serif!important}
 #mypageView .ym-stat strong{color:#ffe1ae!important;font:700 clamp(28px,7vw,34px)/1.25 'Noto Serif KR',serif!important}
 #mypageView .ym-status{min-height:16px;margin:0 0 19px!important;color:#d7c4ad!important;font:500 12px/1.6 'Noto Sans KR',sans-serif!important}
 #mypageView .ym-empty{
  position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;
  min-height:340px;padding:35px 20px 33px;
  text-align:center;
  border:1px solid #c5a27678;border-radius:14px;
  background:
   radial-gradient(ellipse at 50% 5%,#d2a4741f,transparent 60%),
   linear-gradient(140deg,#181b29,#0b1220);
  overflow:hidden;
 }
 #mypageView .ym-empty:after{
  content:'';pointer-events:none;position:absolute;inset:10px;
  border:1px solid #caa1702c;border-radius:9px;
 }
 #mypageView .ym-empty-orb{
  display:grid;place-items:center;width:85px;height:85px;margin:0 0 24px;
  border:1px solid #e2b984b9;border-radius:50%;
  color:#f6d4a1;font:400 48px/1 'Noto Serif KR',serif;
  box-shadow:0 0 0 11px #d1ac7232,0 0 37px #ddb07938;
 }
 #mypageView .ym-empty h3{margin:0 0 11px!important;color:#fff1d9!important;font:700 clamp(21px,5.8vw,26px)/1.45 'Noto Serif KR',serif!important;word-break:keep-all}
 #mypageView .ym-empty p{max-width:29em;margin:0!important;color:#d9c8b5!important;font:500 14px/1.85 'Noto Sans KR',sans-serif!important;word-break:keep-all}
 #mypageView .ym-empty-action{
  min-height:47px;max-width:100%;margin:24px 0 0!important;padding:11px 18px!important;
  border:1px solid #f5d8ac!important;border-radius:8px!important;
  background:linear-gradient(125deg,#ffddb0,#d6a671)!important;
  color:#261c16!important;font:800 14px/1.5 'Noto Sans KR',sans-serif!important;
  cursor:pointer;z-index:2;
 }
 #mypageView .ym-owned-grid{display:grid;grid-template-columns:1fr;gap:19px}
 #mypageView .ym-owned-card{
  --ym-accent:#e4bf85;
  overflow:hidden;border:1px solid color-mix(in srgb,var(--ym-accent) 65%,transparent);
  border-radius:13px;background:linear-gradient(135deg,#1b2130,#0c131e);
  box-shadow:0 13px 34px #0009;
 }
 #mypageView .ym-card-art{position:relative;height:clamp(230px,57vw,330px);overflow:hidden;background:#0c1420}
 #mypageView .ym-card-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:contrast(1.05) saturate(1.05)}
 #mypageView .ym-card-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#04091625 3%,transparent 23%,#06111a30 40%,#06101be0 88%,#06101bf7 100%)}
 #mypageView .ym-card-index{position:absolute;top:17px;left:17px;z-index:2;color:#ffe5c5;border:1px solid #f7deba8f;background:#081421aa;border-radius:4px;padding:6px 10px;font:700 11px/1.3 'Noto Sans KR',sans-serif;letter-spacing:.08em}
 #mypageView .ym-card-overlay{position:absolute;bottom:19px;left:20px;right:20px;z-index:2}
 #mypageView .ym-card-guardian{display:block;margin:0 0 5px;color:var(--ym-accent)!important;font:700 12px/1.65 'Noto Sans KR',sans-serif!important;word-break:keep-all}
 #mypageView .ym-card-overlay h3{margin:0!important;color:#fff5e4!important;font:700 clamp(24px,6.5vw,30px)/1.4 'Noto Serif KR',serif!important;text-shadow:0 2px 12px #000;letter-spacing:-.05em}
 #mypageView .ym-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 13px;padding:17px 18px 19px}
 #mypageView .ym-card-availability{color:#ebd0a8!important;font:600 12px/1.7 'Noto Sans KR',sans-serif!important}
 #mypageView .ym-card-count{flex:1;text-align:right;white-space:nowrap;color:#ffdfaa!important;font:800 13px/1.5 'Noto Sans KR',sans-serif!important}
 #mypageView .ym-card-open{display:block;width:100%!important;min-height:46px;margin:9px 0 0!important;border:1px solid var(--ym-accent)!important;border-radius:8px!important;background:linear-gradient(120deg,#f7e3c5,var(--ym-accent))!important;color:#17151c!important;font:800 14px/1.4 'Noto Sans KR',sans-serif!important;cursor:pointer}
 #mypageView .ym-more-shrines{display:block;width:100%!important;min-height:48px;margin:23px 0 0!important;background:#111825!important;border:1px solid #d0ac7d!important;border-radius:8px!important;color:#f0d1a5!important;font:700 14px/1.5 'Noto Sans KR',sans-serif!important;cursor:pointer}
 #mypageView button:focus-visible{outline:3px solid #ffe1b3!important;outline-offset:3px}
}
@media screen and (min-width:760px){
 #mypageView .ym-owned-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #mypageView .ym-card-art{height:275px}
}
@media print{#mypageView.ym-profile-view{display:none!important}}


/* MyPage iPhone Safari layout correction. The legacy reader parent was
   constrained to height:100dvh with overflow:hidden, clipping the owned cards.
   Only active MyPage should become a normal scrollable document. */
@media screen {
 body:has(#mypageView.active) {
  height:auto!important;max-height:none!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  touch-action:pan-y!important;
 }
 body:has(#mypageView.active) #resultStage.result-stage{
  position:relative!important;display:block!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  overflow:visible!important;flex:none!important;padding:0!important;
 }
 body:has(#mypageView.active) #nativeEngineHost,
 body:has(#mypageView.active) #nativeEngineHost>main,
 body:has(#mypageView.active) #mypageView.ym-profile-view.active,
 body:has(#mypageView.active) #mypageView .ym-page{
  display:block!important;height:auto!important;min-height:0!important;
  max-height:none!important;overflow:visible!important;flex:none!important;
 }
 body:has(#mypageView.active) #resultStage>.result-head{display:none!important}
}
@media screen and (max-width:640px){
 #mypageView .ym-hero{
  height:auto!important;min-height:0!important;max-height:none!important;
  padding:84px 20px 23px!important;
  background-position:center,center 36%!important;
 }
 #mypageView .ym-topline{top:16px!important;left:16px!important;right:16px!important}
 #mypageView .ym-top-mark{font-size:9px!important;letter-spacing:.11em!important}
 #mypageView .ym-seal{width:52px!important;height:52px!important;margin:0 0 15px!important;font-size:30px!important}
 #mypageView .ym-eyebrow{margin-bottom:7px!important;font-size:10px!important}
 #mypageView .ym-hero-title{font-size:clamp(29px,8vw,36px)!important;line-height:1.36!important;margin:0 0 11px!important}
 #mypageView .ym-hero-lead{font-size:14px!important;line-height:1.7!important;margin:0 0 18px!important}
 #mypageView .ym-account{align-items:center!important;gap:9px!important;padding-top:14px!important}
 #mypageView #accountName{font-size:clamp(17px,4.7vw,20px)!important}
 #mypageView #accountEmail{font-size:11px!important;line-height:1.5!important}
 #mypageView #mypageLogin{min-height:39px!important;padding:8px 11px!important;font-size:12px!important}
 #mypageView .ym-library{padding:22px 16px 27px!important}
 #mypageView .ym-section-line{margin-bottom:12px!important}
 #mypageView .ym-section-line h2{font-size:23px!important}
 #mypageView .ym-stats{margin-bottom:19px!important;gap:9px!important}
 #mypageView .ym-stat{padding:13px 12px 12px!important}
 #mypageView .ym-empty{min-height:265px!important;padding:26px 19px!important}
}
@media screen and (max-width:359px){
 #mypageView .ym-hero{padding:81px 15px 22px!important}
 #mypageView .ym-home{padding:8px 9px!important}
 #mypageView .ym-top-mark{font-size:8px!important}
 #mypageView #accountEmail{font-size:10px!important}
 #mypageView .ym-library{padding-inline:13px!important}
}