@import url('https://cdn.jsdelivr.net/npm/pretendard@1.3.5/dist/web/static/pretendard.css');
@charset "euc-kr";
/* BIGFILE TCG - °°Àº ±×¸² ã±â(ÀÏÀÏ ¸Þ¸ð¸® ¸ÅÄ¡) Àü¿ë ½ºÅ¸ÀÏ
 * ±âÁØ µðÀÚÀÎ: µðÀÚÀÌ³Ê 0820 v2 memory.html
 * Ä«µå 30Àå = PC 6¿­ x 5Çà / ¸ð¹ÙÀÏ 5¿­ x 6Çà (µÑ ´Ù µü ¶³¾îÁ® ´õ¹Ì Ä­ ºÒÇÊ¿ä)
 * ·¹À̾ƿô ½ºÅ²°ú ¼¯ÀÌÁö ¾Êµµ·Ï ÀüºÎ .tcgmem-wrap ¾Æ·¡·Î ½ºÄÚÇÁ¸¦ °Ç´Ù.
 * »ó´Ü topbar/±Û·Î¹ú ³×ºñ´Â tcg-nav.js °¡ ÀÚ±â CSS ¸¦ µé°í ¿Â´Ù. ¿©±â¼­ ¼Õ´ëÁö ¾Ê´Â´Ù.
 */

.tcgmem-wrap {
  --mem-page: 1100px;
  --mem-bg: #ecebf9;
  --mem-panel: #ffffff;
  --mem-text: #16141f;
  --mem-muted: #6c6885;
  --mem-line: rgba(20, 18, 40, .14); 
  --mem-acid: #14c8e6;
  --mem-foil: #7a3df0;
  --mem-ink: #d4179a;  
  --mem-live: #0a9fbe;
  --mem-table: #eef1fb;
  --mem-mono: Pretendard, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  box-sizing: border-box;
  background: var(--mem-bg); 
  color: var(--mem-text);
  font-family: Pretendard, "Malgun Gothic", sans-serif;
  padding: 0 0 70px;
}
.tcgmem-wrap * { box-sizing: border-box; }
.tcgmem-wrap img { max-width: 100%; }

.tcg-page { width: min(calc(100% - 36px), var(--mem-page)); margin: 0 auto; padding-top: 28px; }
.tcgmem-section { margin-top: 26px; }
.tcgmem-panel { padding: 18px; border: 1px solid var(--mem-line); border-radius: 15px; background: var(--mem-panel); box-shadow: 0 8px 22px rgba(20, 18, 40, .06); }

.tcgmem-eyebrow { margin: 0 0 8px; color: var(--mem-muted); font: 800 11px var(--mem-mono); letter-spacing: .13em; }
.tcgmem-status { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid var(--mem-line); border-radius: 999px; background: #fff; color: var(--mem-muted); font-size: 12px; font-weight: 800; }
.tcgmem-button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--mem-acid), var(--mem-foil)); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; }
.tcgmem-button:disabled { background: #cfcbe2; cursor: default; }

/* ---------- È÷¾î·Î ---------- */
.tcgmem-hero { padding: 34px; border-color: rgba(20, 200, 230, .45); background: linear-gradient(135deg, rgba(20, 200, 230, .13), #fff); }
.tcgmem-hero h1 { margin: 0 0 12px; font-size: 38px; line-height: 1.2; letter-spacing: -.035em; }
.tcgmem-hero h1 em { color: var(--mem-live); font-style: normal; }
.tcgmem-hero p { margin: 0; color: var(--mem-muted); font-size: 14px; line-height: 1.75; }

/* ---------- ÁõÁ¤ »óÇ° ---------- */
.tcgmem-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.tcgmem-head h2 { margin: 0 0 5px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.tcgmem-head p { margin: 0; color: var(--mem-muted); font-size: 13px; line-height: 1.65; }
/* ¼±¹°Àº 1~5À§ ´Ù¼¸ °³´Ù. Ä­ ¼ö°¡ ¼±¹° ¼ö¿Í ´Ù¸£¸é ¸¶Áö¸· ÁÙÀÌ ºñ¶Ô¾îÁø´Ù. */
.tcgmem-prizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tcgmem-prize { display: grid; grid-template-columns: 1fr; gap: 11px; align-items: start; justify-items: center; padding: 12px; text-align: center; }
/* ³ôÀ̸¦ °íÁ¤ÇÏÁö ¾Ê´Â´Ù. Ä­ ÆøÀº È­¸é¡¤¼±¹° ¼ö¿¡ µû¶ó ´Þ¶óÁö´Âµ¥ ³ôÀ̸¸ ¹Ú¾Æ µÎ¸é
   Á¼Àº Ä­¿¡¼­ ±×¸²ÀÌ È¸»ö ¹ÙÅÁ °¡¿îµ¥ ºØ ¶á´Ù. */
.tcgmem-prize img { width: 100%; max-width: 200px; height: auto; aspect-ratio: 200 / 252; object-fit: contain; border-radius: 7px; background: #edf2ec; }
.tcgmem-prize > div { width: 100%; min-width: 0; }
.tcgmem-prize b { color: var(--mem-live); font: 900 20px var(--mem-mono); }
.tcgmem-prize strong { display: block; margin-top: 4px; font-size: 20px; line-height: 1.4; word-break: keep-all; }
.tcgmem-prize__grade { display: block; margin-top: 4px; color: var(--mem-muted); font: 800 13px var(--mem-mono); letter-spacing: .04em; }
.tcgmem-prize--empty { grid-column: 1 / -1; grid-template-columns: 1fr; text-align: center; }
 
/* ---------- °ÔÀÓÆÇ ---------- */
.tcgmem-stage { scroll-margin-top: 72px; position: relative; padding: 18px; overflow: hidden; background: var(--mem-table); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tcgmem-stage__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tcgmem-stage__head h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.tcgmem-metrics { display: flex; gap: 7px; }
.tcgmem-metric { min-width: 84px; padding: 8px 10px; border: 1px solid var(--mem-line); border-radius: 8px; background: #fff; }
.tcgmem-metric small { display: block; color: var(--mem-muted); font: 800 10px var(--mem-mono); letter-spacing: .1em; }
.tcgmem-metric strong { display: block; margin-top: 3px; font: 900 16px var(--mem-mono); }

/* 30Àå = 6¿­ x 5Çà.
   Ä«µåÆÇ Àüü°¡ ½ºÅ©·Ñ ¾øÀÌ ÇÑ È­¸é¿¡ µé¾î¿Í¾ß 5ÃÊ °ø°³°¡ Àǹ̰¡ ÀÖ´Ù.
   ±×·¡¼­ ÆøÀ» È­¸é ³ôÀÌ·Î ¿ª»êÇØ ¹­´Â´Ù.
     Ä«µå ³ôÀÌ h = (ÆdzôÀÌ - Çà°£°Ý*4) / 5,  Ä«µå Æø w = h * 5/7 (aspect 5/7)
     ÆÇ Æø W = w*6 + °£°Ý*5 = 6*(56vh - 32px)/7 + 40px = 48vh + 12.6px
   width:100% °¡ °°ÀÌ °É·Á ÀÖ¾î Á¼Àº È­¸é¿¡¼­´Â ÄÁÅ×ÀÌ³Ê ÆøÀ» ³ÑÁö ¾Ê´Â´Ù. */
.tcgmem-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; perspective: 1000px;
  width: 100%; max-width: calc(48vh + 13px); margin: 0 auto; }
.tcgmem-card { position: relative; aspect-ratio: 5/7; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform .2s ease; touch-action: manipulation; }
.tcgmem-card.is-open, .tcgmem-card.is-matched { transform: rotateY(180deg); }
.tcgmem-card:disabled { cursor: default; }
.tcgmem-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tcgmem-back { border: 1px solid var(--mem-line); background: radial-gradient(circle at 50% 38%, #14c8e6 0 8%, #bfe8f2 9% 26%, #f4f2fb 27% 100%); }
.tcgmem-back img { width: 100%; height: 100%; object-fit: cover; }
.tcgmem-front { transform: rotateY(180deg); border: 1px solid rgba(255, 255, 255, .45); background: #fff; }
.tcgmem-front img { width: 100%; height: 100%; object-fit: cover; }
.tcgmem-front img:not([src]) { visibility: hidden; } /* src ºñ¿î »óÅ¿¡¼­ ¿¢¹Ú ¾ÆÀÌÄÜ ¹æÁö */
.tcgmem-front b { position: absolute; right: 5px; bottom: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, .55); color: #fff; font: 900 12px var(--mem-mono); }
.tcgmem-card.is-matched .tcgmem-front { box-shadow: inset 0 0 0 3px var(--mem-live); }

.tcgmem-lock { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 22px; background: rgba(244, 242, 251, .85); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); text-align: center; }
.tcgmem-lock[hidden] { display: none; }
.tcgmem-lock__box { max-width: 460px; }
.tcgmem-lock__box strong { display: block; margin: 9px 0 7px; font-size: 27px; letter-spacing: -.03em; }
.tcgmem-lock__box p { margin: 0 0 16px; color: var(--mem-muted); font-size: 13px; line-height: 1.7; }

.tcgmem-watermark { pointer-events: none; position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; opacity: .08; transform: rotate(-18deg); font: 900 12px var(--mem-mono); letter-spacing: .12em; }
.tcgmem-watermark span { text-align: center; }

/* ---------- ¸®´õº¸µå ---------- */
.tcgmem-rank { width: 100%; border-collapse: collapse; }
.tcgmem-rank th, .tcgmem-rank td { padding: 12px; border-bottom: 1px solid var(--mem-line); text-align: left; font-size: 13px; }
.tcgmem-rank th { color: var(--mem-muted); font: 800 11px var(--mem-mono); letter-spacing: .08em; }
/* ³» ÃÖ°í±â·Ï ÁÙ.
   ±×¶óµ¥À̼ǰú À­¼±Àº Ç¥ ¾È¿¡¼­ Æ¢°í, À­¼±ÀÌ À§ ÇàÀÇ ¾Æ·¡ Å׵θ®¿Í °ãÃÄ
   ÁÙÀÌ µÎ²¨¿ö º¸¿´´Ù. ¿¶Àº ´Ü»ö ¹è°æ¿¡ ¿ÞÂÊ ¼¼·Î¼±¸¸ ³²±ä´Ù.
   ¼¼·Î¼±Àº border °¡ ¾Æ´Ï¶ó inset box-shadow ¶ó Ä­ ³Êºñ°¡ ¹Ð¸®Áö ¾Ê´Â´Ù. */
.tcgmem-rank tr.is-me td { background: rgba(10, 159, 190, .07); font-weight: 700; color: var(--mem-text); }
.tcgmem-rank tr.is-me td:first-child { color: var(--mem-live); box-shadow: inset 3px 0 0 var(--mem-live); }
.tcgmem-rank td:first-child { font: 900 14px var(--mem-mono); }

/* ---------- ±ÔÄ¢ / À¯ÀÇ»çÇ× ---------- */
.tcgmem-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.tcgmem-rules article { padding: 16px; }
.tcgmem-rules strong { display: block; margin-bottom: 6px; font-size: 14px; }
.tcgmem-rules p { margin: 0; color: var(--mem-muted); font-size: 13px; line-height: 1.65; }
.tcgmem-notice { padding: 17px; border: 1px solid var(--mem-line); border-radius: 13px; background: rgba(255, 255, 255, .7); color: var(--mem-muted); font-size: 12px; line-height: 1.75; }
.tcgmem-notice strong { color: var(--mem-text); }
.tcgmem-notice .tcgmem-notice-emphasis { color: #a51d13; font-size: 13px; font-weight: 900; }

/* ---------- °á°ú ¸ð´Þ / Å佺Ʈ ---------- */
.tcgmem-modal-layer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(16, 14, 30, .55); }
.tcgmem-modal-layer[hidden] { display: none; }
.tcgmem-modal { width: min(100%, 420px); padding: 24px; border-radius: 17px; background: #fff; text-align: center; }
.tcgmem-modal h2 { margin: 0 0 14px; font-size: 20px; }
.tcgmem-modal strong { display: block; color: var(--mem-live); font: 900 44px var(--mem-mono); }
.tcgmem-modal p { margin: 10px 0 18px; color: var(--mem-muted); font-size: 13px; line-height: 1.7; }

.tcgmem-toast { position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 14px); padding: 13px 19px; border-radius: 999px; background: rgba(22, 20, 31, .93); color: #fff; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none; }
.tcgmem-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- ¹ÝÀÀÇü ---------- */
@media (max-width: 900px) {
  /* ´Ù¼¸ °³¸é 3¿­ÀÌ 3+2 ·Î ¶³¾îÁø´Ù. 2¿­ÀÌ¸é ¸¶Áö¸· ÁÙ¿¡ ÇÑ °³¸¸ ³²´Â´Ù. */
  .tcgmem-prizes { grid-template-columns: 1fr 1fr 1fr; }
  .tcgmem-rules { grid-template-columns: 1fr; }
  .tcgmem-hero h1 { font-size: 30px; }
}
/* ³ëÆ®ºÏó·³ ¼¼·Î°¡ ªÀº È­¸é¿¡¼­´Â È÷¾î·Î¸¦ ÁÙ¿© Ä«µåÆÇ ÀÚ¸®¸¦ È®º¸ÇÑ´Ù. */
@media (max-height: 820px) {
  .tcg-page { padding-top: 10px; }
  .tcgmem-section { margin-top: 16px; }
  .tcgmem-hero { padding: 20px 24px; }
  .tcgmem-hero h1 { font-size: 26px; margin-bottom: 8px; }
  .tcgmem-hero p { font-size: 13px; }
  .tcgmem-stage__head { margin-bottom: 10px; }
  .tcgmem-metric { padding: 6px 9px; }
}

@media (max-width: 700px) {
  .tcg-page { width: calc(100% - 18px); }
  .tcgmem-hero { padding: 24px 20px; }
  .tcgmem-stage { padding: 11px; }
  .tcgmem-stage__head { flex-direction: column; align-items: flex-start; }
  /* 30Àå = 5¿­ x 6Çà.  W = 25*(58vh - 25px)/42 + 20px = 34.5vh + 5px */
  .tcgmem-board { grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: calc(34.5vh + 5px); }
  /* Á¼Àº È­¸é¿¡¼­µµ µÎ °³¾¿ - ÇÑ ÁÙ¿¡ Çϳª¸é ³× °³ º¸·Á°í °è¼Ó ½ºÅ©·ÑÇØ¾ß ÇÑ´Ù. */
  .tcgmem-prizes { grid-template-columns: 1fr 1fr; gap: 9px; }
  .tcgmem-prize { padding: 10px; gap: 8px; }
  .tcgmem-prize img { max-width: 100%; }
  .tcgmem-prize b { font-size: 17px; }
  .tcgmem-prize strong { font-size: 16px; }
  .tcgmem-metric { min-width: 74px; }
  .tcgmem-watermark { grid-template-columns: repeat(2, 1fr); font-size: 11px; }
  .tcgmem-modal strong { font-size: 34px; }
}
/* ---------- ÁõÁ¤ »óÇ° Å©°Ô º¸±â(¸ð¹ÙÀÏ Àü¿ë) ---------- */
/* ¸ð¹ÙÀÏ¿¡¼­´Â ÁõÁ¤ »óÇ°ÀÌ µÎ °³¾¿ ÀÛ°Ô ³ª¿Í Ä«µå ±×¸²ÀÌ Àß ¾È º¸ÀδÙ.
   ±×·¡¼­ ¾Æ¹« »óÇ°À̳ª ´©¸£¸é Àüü¸¦ ÇÑ ¹ø¿¡ Å©°Ô º¸¿© ÁÖ´Â ·¹À̾ ¶ç¿î´Ù.
   ·¹À̾ ¸¸µé°í ¿©´Â ÀÏÀº tcg-memory.js ÀÇ openPrizeLayer() °¡ ÇÑ´Ù.
   PC ¿¡¼­´Â ÀÌ¹Ì ³× °³°¡ °¡·Î·Î Å©°Ô ±ò¸®¹Ç·Î ¿­Áö ¾Ê´Â´Ù.
   ±âÁØ Æø 700px Àº À§ @media (max-width:700px) ¿¡¼­ »óÇ°ÀÌ 2¿­·Î ¹Ù²î´Â
   ÁöÁ¡°ú °°Àº °ªÀÌ´Ù. ±âÁØÀ» ¹Ù²Ù·Á¸é tcg-memory.js ÀÇ PRIZE_LAYER_MQ µµ
   °°Àº °ªÀ¸·Î °íÃÄ¾ß ÇÑ´Ù. */
/* À§¾Æ·¡ padding ÀÌ ·¹À̾ È­¸é ³¡¿¡ ºÙÁö ¾Ê°Ô Àâ¾Æ ÁÖ´Â ¿©¹éÀÌ´Ù.
   ¸ð¹ÙÀÏ »ó´Ü °íÁ¤¹Ù(48px)¿Í ¾ÆÀÌÆù ³ëÄ¡¸¦ ÇÇÇÏ·Á°í À§ÂÊÀ» Å©°Ô µ×´Ù.
   ¹Ú½º´Â place-items:center ·Î ÀÌ ¿©¹é ¾È¿¡¼­ °¡¿îµ¥ Á¤·ÄµÇ¹Ç·Î,
   ³»¿ëÀÌ Âªµç ±æµç À§¿¡ µü ºÙ´Â ÀÏÀÌ ¾ø´Ù. */
.tcgmem-prizelayer { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: calc(64px + env(safe-area-inset-top, 0px)) 14px calc(30px + env(safe-area-inset-bottom, 0px)); background: rgba(16, 14, 30, .62); }
.tcgmem-prizelayer[hidden] { display: none; }
.tcgmem-prizelayer__box { position: relative; width: min(100%, 430px); max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 20px 16px 18px; border-radius: 17px; background: #fff; text-align: center; }
.tcgmem-prizelayer__box h2 { margin: 2px 0 4px; font-size: 19px; }
.tcgmem-prizelayer__box .tcgmem-eyebrow { margin: 0; }
.tcgmem-prizelayer__hint { margin: 6px 0 14px; color: var(--mem-muted); font-size: 12px; }
.tcgmem-prizelayer__close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(16, 14, 30, .07); color: #16141f; font-size: 19px; line-height: 34px; cursor: pointer; }
.tcgmem-prizelayer__list { display: grid; gap: 14px; }
.tcgmem-prizelayer__item { display: grid; justify-items: center; gap: 7px; padding: 14px 12px; border-radius: 13px; background: #f6f7f9; }
.tcgmem-prizelayer__item img { width: 100%; max-width: 250px; height: auto; border-radius: 9px; background: #edf2ec; }
.tcgmem-prizelayer__item b { color: var(--mem-live); font: 900 18px var(--mem-mono); }
.tcgmem-prizelayer__item strong { display: block; font-size: 17px; line-height: 1.4; word-break: keep-all; }
.tcgmem-prizelayer__item span { color: var(--mem-muted); font: 800 12px var(--mem-mono); letter-spacing: .04em; }
/* ·¹À̾ ¿­·Á ÀÖ´Â µ¿¾È µÚ ÆäÀÌÁö±îÁö °°ÀÌ ¹Ð¸®Áö ¾Ê°Ô ¸·´Â´Ù */
body.tcgmem-prizelayer-open { overflow: hidden; }

/* ´©¸¦ ¼ö Àִٴ ǥ½Ã. PC ¿¡¼­´Â ·¹À̾ ¾È ¿­¹Ç·Î ¹îÁöµµ °¨Ãá´Ù */
.tcgmem-prize__zoom { display: none; }
/* ÁõÁ¤ »óÇ° È®´ë º¸±â. ³» Âü¿© È­¸é(tcg-my)°ú °°Àº ±ÔÄ¢ÀÌ´Ù. */
.tcgmem-prizes img { cursor: zoom-in; }
.img-zoom { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(16, 14, 32, .84); cursor: zoom-out; }
.img-zoom img { max-width: 92vw; max-height: 88vh; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
@media (min-width: 720px) { .img-zoom img { max-width: 560px; } }
@media (max-width: 700px) {
  /* Á¦¸ñ ¿À¸¥ÂÊ¿¡ ºÙ¾î ÀÖ´ø "¸ÅÀÏ 00:00 »õ ´ëȸ" ¾Ë¾àÀÌ Á¼Àº È­¸é¿¡¼­´Â
     ÀÚ¸®°¡ ¸ðÀÚ¶ó ±ÛÀÚ°¡ ´­¸®°í ¼¼·Î À§Ä¡µµ Á¦¸ñ°ú ¾î±ß³ª º¸¿´´Ù.
     ¾Æ·¡·Î ³»¸®°í ÇÑ ÁÙÀ» ´Ù ¾²°Ô Çؼ­ ¹ÝµíÇÏ°Ô ¼¼¿î´Ù.
     .tcgmem-status ´Â °ÔÀÓÆÇ READY ¹èÁö¿¡µµ ¾²À̹ǷΠ.tcgmem-head ¾ÈÂʸ¸ °Çµå¸°´Ù. */
  .tcgmem-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .tcgmem-head .tcgmem-status { width: 100%; justify-content: center; white-space: nowrap; }
  .tcgmem-prize { position: relative; cursor: pointer; }
  .tcgmem-prize__zoom { display: block; position: absolute; top: 9px; right: 9px; padding: 4px 9px; border-radius: 999px; background: rgba(16, 14, 30, .72); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
}