/* ========================================================================== Beauty Education LMS — 1차 시안 v2 (커머스형 클래스 플랫폼) tokens → base → components → screens → responsive ========================================================================== */ /* --- tokens --------------------------------------------------------------- */ :root{ --bg:#FFFFFF; --bg-soft:#F7F8FA; --card:#FFFFFF; --ink:#17171B; --ink-2:#44474F; --muted:#676C78; --line:#EDEEF1; --line-2:#DFE1E6; --pri:#2E5CE6; --pri-ink:#FFFFFF; --pri-soft:#EEF2FE; --pri-dark:#2049C4; --sale:#FF3B30; --ok:#00A86B; --ok-soft:#E6F7F0; --warn:#C77A08; --warn-soft:#FFF4E0; --bad:#E5484D; --bad-soft:#FDEBEB; --sh:0 1px 3px rgba(23,23,27,.06); --sh-up:0 8px 24px rgba(23,23,27,.12); --f:"Inter","Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; --f-kr:"Noto Sans KR","Inter",system-ui,sans-serif; /* 라틴 디스플레이 — 대문자 아이브로우·랭킹 숫자·히어로 카운터 전용 */ --f-dis:"Montserrat","Inter",system-ui,sans-serif; --r:14px; --r-sm:10px; --r-pill:999px; --gut:clamp(18px,3.4cqi,40px); --max:1200px; --fs-hero:clamp(1.75rem,4.2cqi,2.75rem); --fs-h1:clamp(1.375rem,2.8cqi,1.875rem); --fs-h2:clamp(1.125rem,2.1cqi,1.375rem); --fs-h3:1.0625rem; --fs-body:1rem; --fs-sm:0.875rem; --fs-xs:0.8125rem; --fs-xxs:0.75rem; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#121316; --bg-soft:#1A1C20; --card:#1C1E23; --ink:#F2F3F5; --ink-2:#C5C8CE; --muted:#9BA1AC; --line:#2A2D33; --line-2:#3A3E46; --pri:#6B8FFF; --pri-ink:#0E1220; --pri-soft:#1E2743; --pri-dark:#8AA6FF; --sale:#FF6B63; --ok:#4ECB9A; --ok-soft:#142A22; --warn:#E0A84B; --warn-soft:#2B2213; --bad:#F07178; --bad-soft:#2C1A1C; --sh:0 1px 3px rgba(0,0,0,.4); --sh-up:0 8px 24px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --bg:#121316; --bg-soft:#1A1C20; --card:#1C1E23; --ink:#F2F3F5; --ink-2:#C5C8CE; --muted:#9BA1AC; --line:#2A2D33; --line-2:#3A3E46; --pri:#6B8FFF; --pri-ink:#0E1220; --pri-soft:#1E2743; --pri-dark:#8AA6FF; --sale:#FF6B63; --ok:#4ECB9A; --ok-soft:#142A22; --warn:#E0A84B; --warn-soft:#2B2213; --bad:#F07178; --bad-soft:#2C1A1C; --sh:0 1px 3px rgba(0,0,0,.4); --sh-up:0 8px 24px rgba(0,0,0,.5); } /* --- base ----------------------------------------------------------------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:var(--fs-body); line-height:1.7; letter-spacing:-0.004em; word-break:keep-all; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px} ::selection{background:var(--pri-soft);color:var(--ink)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* --- frame ---------------------------------------------------------------- */ .app{ container-type:inline-size; container-name:app; min-height:calc(100vh - 52px); background:var(--bg); display:flex; flex-direction:column; } body.frame-mobile{background:var(--bg-soft)} body.frame-mobile .app{ max-width:430px;margin:0 auto; min-height:calc(100vh - 96px); border-inline:1px solid var(--line); box-shadow:0 20px 60px rgba(23,23,27,.14); } .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .shell{flex:1;display:block} /* --- type helpers --------------------------------------------------------- */ .hero-t{font-family:var(--f-kr);font-size:var(--fs-hero);font-weight:900;line-height:1.24;letter-spacing:-0.03em;text-wrap:balance} .h1{font-family:var(--f-kr);font-size:var(--fs-h1);font-weight:800;line-height:1.3;letter-spacing:-0.028em;text-wrap:balance} .h2{font-family:var(--f-kr);font-size:var(--fs-h2);font-weight:800;line-height:1.35;letter-spacing:-0.025em;text-wrap:balance} .h3{font-size:var(--fs-h3);font-weight:700;line-height:1.4;letter-spacing:-0.02em} .lede{font-size:1rem;line-height:1.65;color:var(--ink-2);max-width:60ch} .sub{color:var(--muted);font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs);color:var(--muted)} .n{font-variant-numeric:tabular-nums} .b{font-weight:700} .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .center{text-align:center} .mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}.mt4{margin-top:40px} .stack{display:flex;flex-direction:column} .stack-1{gap:4px}.stack-2{gap:10px}.stack-3{gap:18px}.stack-4{gap:28px} .row{display:flex;align-items:center;gap:10px} .row-sb{display:flex;align-items:center;justify-content:space-between;gap:14px} .wrapf{flex-wrap:wrap} .spacer{flex:1} .rule{height:1px;background:var(--line);border:0} /* --- buttons -------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:12px 20px; background:var(--pri);color:var(--pri-ink); border:1px solid transparent;border-radius:var(--r-sm); font-family:var(--f-kr);font-size:var(--fs-body);font-weight:700;letter-spacing:-0.02em; cursor:pointer;white-space:nowrap; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .1s ease; } .btn:hover{background:var(--pri-dark)} .btn:active{transform:scale(.985)} .btn-ghost{background:var(--bg);color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{background:var(--bg-soft)} .btn-soft{background:var(--pri-soft);color:var(--pri)} .btn-soft:hover{background:var(--pri-soft);filter:brightness(.97)} .btn-dark{background:var(--ink);color:var(--bg)} .btn-dark:hover{background:var(--ink);opacity:.86} .btn-quiet{background:transparent;color:var(--muted);padding-inline:10px;font-weight:600} .btn-quiet:hover{background:var(--bg-soft);color:var(--ink)} .btn-sm{padding:8px 14px;font-size:var(--fs-sm)} .btn-xs{padding:5px 10px;font-size:var(--fs-xs);border-radius:8px} .btn-lg{padding:16px 28px;font-size:1.0625rem} .btn-block{width:100%} .btn[disabled]{opacity:.42;cursor:not-allowed} .more{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:600;color:var(--muted)} .more:hover{color:var(--ink)} .iconbtn{ width:34px;height:34px;flex:none;display:grid;place-items:center; background:var(--card);border:1px solid var(--line-2);border-radius:50%; cursor:pointer;color:var(--ink);box-shadow:var(--sh); } .iconbtn:hover{background:var(--bg-soft)} /* --- badge / chip --------------------------------------------------------- */ .badge{ display:inline-flex;align-items:center;gap:4px; padding:3px 8px;border-radius:6px; font-family:var(--f-kr);font-size:var(--fs-xxs);font-weight:700;letter-spacing:-0.01em; background:var(--bg-soft);color:var(--ink-2);border:1px solid transparent;white-space:nowrap; } .badge-pri{background:var(--pri-soft);color:var(--pri)} .badge-ok{background:var(--ok-soft);color:var(--ok)} .badge-warn{background:var(--warn-soft);color:var(--warn)} .badge-bad{background:var(--bad-soft);color:var(--bad)} .badge-sale{background:var(--sale);color:#fff} .badge-line{background:transparent;border-color:var(--line-2);color:var(--muted)} .badge-dark{background:var(--ink);color:var(--bg)} .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .chip{ display:inline-flex;align-items:center;gap:6px; padding:9px 16px;border-radius:var(--r-pill); background:var(--bg-soft);border:1px solid transparent; font-family:var(--f-kr);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2); cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease; } .chip:hover{background:var(--line)} .chip[aria-pressed=true]{background:var(--ink);color:var(--bg)} /* --- cards / panels ------------------------------------------------------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .panel-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px} .panel-body{padding:20px} .panel-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--bg-soft)} .thumb{ position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px; background:linear-gradient(140deg,#E8ECF6 0%,#DCE3F3 45%,#E9E3F0 100%); display:grid;place-items:center; } :root[data-theme="dark"] .thumb{background:linear-gradient(140deg,#252A37 0%,#2A3042 55%,#332B3C 100%)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .thumb{background:linear-gradient(140deg,#252A37 0%,#2A3042 55%,#332B3C 100%)} } .thumb::after{ content:"";position:absolute;inset:0; background-image: radial-gradient(circle at 26% 38%, rgba(46,92,230,.20) 0 16%, transparent 17%), radial-gradient(circle at 72% 62%, rgba(23,23,27,.08) 0 12%, transparent 13%); } .thumb > *{position:relative;z-index:1} /* 콘텐츠 이미지가 채워진 썸네일 — 그라디언트 플레이스홀더와 모티프를 덮는다 */ .thumb.has-img{background-size:cover;background-position:center;background-repeat:no-repeat} .thumb.has-img::after{display:none} .thumb .ph{font-family:var(--f-kr);font-size:var(--fs-xs);font-weight:700;color:rgba(23,23,27,.4);letter-spacing:-0.01em} :root[data-theme="dark"] .thumb .ph{color:rgba(242,243,245,.42)} .thumb-16x9{aspect-ratio:16/9} .thumb-1x1{aspect-ratio:1} .thumb-3x4{aspect-ratio:3/4} .thumb-ovl{position:absolute;z-index:2;left:10px;top:10px;display:flex;gap:6px} .thumb-br{ position:absolute;z-index:2;right:10px;bottom:10px; background:rgba(0,0,0,.66);color:#fff;border-radius:6px; padding:3px 7px;font-size:var(--fs-xxs);font-weight:600;font-variant-numeric:tabular-nums; } /* --- class card ----------------------------------------------------------- */ .grid{display:grid;gap:clamp(16px,2cqi,26px) clamp(12px,1.6cqi,20px)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-5{grid-template-columns:repeat(5,1fr)} .ccard{display:flex;flex-direction:column;gap:11px;cursor:pointer;min-width:0} .ccard .thumb{transition:transform .22s ease,box-shadow .22s ease} .ccard:hover .thumb{transform:translateY(-3px);box-shadow:var(--sh-up)} .ccard .cat{font-size:var(--fs-xs);color:var(--muted);font-weight:600} .ccard .ttl{ font-family:var(--f-kr);font-size:var(--fs-body);font-weight:700; line-height:1.45;letter-spacing:-0.015em;min-height:2.9em; } .ccard .who{font-size:var(--fs-sm);color:var(--ink-2);font-weight:500} .ccard .rate{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums} .ccard .rate b{color:var(--ink);font-weight:700} .star{width:12px;height:12px;color:#FFB400;flex:none} .pricebox{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .pricebox .off{color:var(--sale);font-weight:800;font-size:var(--fs-body);font-variant-numeric:tabular-nums} .pricebox .now{font-weight:800;font-size:var(--fs-body);font-variant-numeric:tabular-nums;letter-spacing:-0.02em} .pricebox .was{color:var(--muted);text-decoration:line-through;font-size:var(--fs-xs);font-variant-numeric:tabular-nums} .rankcard{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;cursor:pointer;min-width:0} .rankcard .rk{ font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums; color:var(--ink);width:24px;text-align:center;letter-spacing:-0.04em; } .rankcard .mid{display:flex;gap:12px;align-items:center;min-width:0} .rankcard .thumb{width:92px;flex:none;aspect-ratio:1;border-radius:10px} .rankcard .meta{min-width:0;display:flex;flex-direction:column;gap:4px} /* --- carousel ------------------------------------------------------------- */ .carousel{position:relative} .track{ display:grid;grid-auto-flow:column; gap:clamp(12px,1.6cqi,20px); overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth; padding-bottom:4px;scrollbar-width:none; } .track::-webkit-scrollbar{display:none} .track > *{scroll-snap-align:start} .track-5{grid-auto-columns:calc((100% - 4 * clamp(12px,1.6cqi,20px)) / 5)} .track-4{grid-auto-columns:calc((100% - 3 * clamp(12px,1.6cqi,20px)) / 4)} .track-2{grid-auto-columns:calc((100% - clamp(12px,1.6cqi,20px)) / 2)} .carousel .arrows{display:flex;gap:8px} /* --- sections ------------------------------------------------------------- */ .screen{display:none} .screen.active{display:block} .sec{padding-block:clamp(28px,4cqi,52px)} .sec-sm{padding-block:clamp(18px,2.4cqi,30px)} .sec-soft{background:var(--bg-soft)} .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:clamp(14px,1.8cqi,22px)} .sechead .ttl{display:flex;flex-direction:column;gap:5px} .sechead .eb{font-size:var(--fs-sm);font-weight:700;color:var(--pri)} /* --- topbar --------------------------------------------------------------- */ #topbar{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line); } #topbar .bar{display:flex;align-items:center;gap:22px;height:62px} .brand{display:flex;align-items:center;gap:8px;flex:none;font-family:var(--f-kr)} .brand .mark{font-size:1.1875rem;font-weight:900;letter-spacing:-0.045em} .brand .mark i{color:var(--pri);font-style:normal} .brand .sfx{ font-size:var(--fs-xxs);font-weight:800; background:var(--pri);color:var(--pri-ink);padding:2px 6px;border-radius:5px; } .nav{display:flex;gap:2px;align-items:center} .nav a{ padding:8px 13px;border-radius:8px; font-family:var(--f-kr);font-size:var(--fs-body);font-weight:600;color:var(--ink-2); } .nav a:hover{background:var(--bg-soft);color:var(--ink)} .nav a[aria-current=page]{color:var(--ink);font-weight:800} .search{ display:flex;align-items:center;gap:8px;flex:1;max-width:300px; background:var(--bg-soft);border:1px solid transparent;border-radius:var(--r-pill); padding:9px 14px;color:var(--muted);cursor:pointer; } .search:hover{border-color:var(--line-2)} .search span{font-size:var(--fs-sm)} .avatar{ width:30px;height:30px;flex:none;border-radius:50%; background:var(--pri-soft);color:var(--pri); display:grid;place-items:center; font-family:var(--f-kr);font-size:var(--fs-xs);font-weight:700; } .avatar-lg{width:54px;height:54px;font-size:var(--fs-body)} .chipbar{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:62px;z-index:40} .chipbar .inner{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none} .chipbar .inner::-webkit-scrollbar{display:none} /* --- promo ---------------------------------------------------------------- */ .promo{ border-radius:var(--r);overflow:hidden;position:relative; background:linear-gradient(118deg,#2E5CE6 0%,#4B38C9 52%,#7A2FB0 100%); color:#fff; display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:center; padding:clamp(24px,3.4cqi,44px); min-height:268px; } .promo::before{ content:"";position:absolute;right:-70px;top:-70px;width:320px;height:320px;border-radius:50%; background:rgba(255,255,255,.08); } .promo-txt{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1} .promo .tag{ align-self:flex-start;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28); padding:5px 11px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700; } .promo h2{font-family:var(--f-kr);font-size:clamp(1.5rem,3.4cqi,2.25rem);font-weight:900;line-height:1.26;letter-spacing:-0.035em} .promo p{font-size:var(--fs-body);color:rgba(255,255,255,.88);max-width:42ch} .promo .btn{background:#fff;color:#1C2A5E} .promo .btn:hover{background:#fff;opacity:.92} .promo-visual{position:relative;z-index:1} .promo-card{ background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22); border-radius:12px;padding:18px;backdrop-filter:blur(6px); display:flex;flex-direction:column;gap:12px; } .promo-card .pr{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-sm)} .promo-card .pr span:first-child{color:rgba(255,255,255,.72)} .promo-card .pr span:last-child{font-weight:700;font-variant-numeric:tabular-nums} .promo-card .bar{background:rgba(255,255,255,.24)} .promo-card .bar i{background:#fff} .promo-dots{display:flex;gap:6px;justify-content:center;margin-top:14px} .promo-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);display:block} .promo-dots i.on{background:var(--ink);width:18px;border-radius:3px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .stats div{background:var(--bg-soft);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:3px} .stats strong{font-size:1.5rem;font-weight:800;letter-spacing:-0.035em;font-variant-numeric:tabular-nums} .stats span{font-size:var(--fs-xs);color:var(--muted);font-weight:600} .flowgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .flowgrid .fc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px} .flowgrid .fc .step{ display:inline-flex;align-items:center;gap:6px;align-self:flex-start; background:var(--pri-soft);color:var(--pri);border-radius:var(--r-pill); padding:4px 11px;font-size:var(--fs-xxs);font-weight:800; } .rvcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0} .rvcard .q{font-size:var(--fs-sm);line-height:1.66;color:var(--ink-2)} .stars{display:flex;gap:1px} .faq{border-top:1px solid var(--line)} .faq .fi{border-bottom:1px solid var(--line)} .faq .fq{ display:flex;align-items:center;gap:14px;padding:18px 2px;cursor:pointer; font-family:var(--f-kr);font-weight:700;font-size:var(--fs-body);letter-spacing:-0.02em; } .faq .fq .q{color:var(--pri);font-weight:800;flex:none} .faq .fq .ico{margin-left:auto;flex:none;color:var(--muted);transition:transform .2s ease} .faq .fa{padding:0 2px 20px 34px;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7} /* --- progress ------------------------------------------------------------- */ .bar{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden} .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--pri)} .bar-ok i{background:var(--ok)} .bar-lg{height:9px} /* 분절 진도바 — 실제 시청한 고유 구간 (PRD §10) */ .seg{display:flex;gap:2px;height:7px;align-items:stretch} .seg i{flex:1 1 0;background:var(--line);border-radius:1px} .seg i.on{background:var(--pri)} .seg i.rep{background:var(--pri-dark)} .seg-sm{height:5px;gap:1.5px} .seg-xs{height:4px;gap:1px} .seg-tall{height:14px;gap:2px} .legend{display:flex;gap:14px;flex-wrap:wrap} .legend span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xxs);color:var(--muted);font-weight:600} .legend b{width:12px;height:7px;border-radius:2px;display:inline-block} /* --- table ---------------------------------------------------------------- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} th{ text-align:left;font-family:var(--f-kr);font-size:var(--fs-xs);font-weight:700;color:var(--muted); padding:11px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap;letter-spacing:-0.01em; } td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--bg-soft)} td.num,th.num{font-variant-numeric:tabular-nums;text-align:right} .cellwho{display:flex;align-items:center;gap:9px;white-space:nowrap} /* --- forms ---------------------------------------------------------------- */ .field{display:flex;flex-direction:column;gap:7px} .field > label{font-family:var(--f-kr);font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)} .field .hint{font-size:var(--fs-xs);color:var(--muted)} .field .err{font-size:var(--fs-xs);color:var(--bad);font-weight:600} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{ width:100%;padding:12px 14px; background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-sm); font-size:var(--fs-body);transition:border-color .15s ease,box-shadow .15s ease; } input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft);outline:none} input[aria-invalid=true]{border-color:var(--bad)} textarea{min-height:110px;resize:vertical;line-height:1.6} .check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer} .check input{margin:3px 0 0;accent-color:var(--pri);flex:none;width:auto} .upload{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:30px 20px;text-align:center;background:var(--bg-soft)} .switch{ width:38px;height:22px;border-radius:var(--r-pill);background:var(--line-2);position:relative; border:0;cursor:pointer;flex:none;transition:background .18s ease; } .switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.2)} .switch[aria-checked=true]{background:var(--pri)} .switch[aria-checked=true]::after{transform:translateX(16px)} /* --- tabs ----------------------------------------------------------------- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs button{ background:transparent;border:0;border-bottom:2px solid transparent; padding:13px 16px;cursor:pointer;color:var(--muted);white-space:nowrap; font-family:var(--f-kr);font-size:var(--fs-body);font-weight:700;letter-spacing:-0.02em; } .tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)} .tabpane{display:none} .tabpane.active{display:block} .note{background:var(--pri-soft);color:var(--ink-2);border-radius:var(--r-sm);padding:14px 16px;font-size:var(--fs-sm);line-height:1.6} .note-warn{background:var(--warn-soft)} .ico{width:16px;height:16px;flex:none} .ico-pri{color:var(--pri)} .ico-ok{color:var(--ok)} .ico-mut{color:var(--muted)} /* --- footer --------------------------------------------------------------- */ #sitefooter{border-top:1px solid var(--line);margin-top:48px;padding:40px 0 64px;background:var(--bg-soft)} #sitefooter .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px} #sitefooter h4{font-family:var(--f-kr);font-size:var(--fs-sm);font-weight:800;margin-bottom:12px} #sitefooter li{font-size:var(--fs-sm);color:var(--muted);padding:3px 0} #sitefooter li a:hover{color:var(--ink)} /* --- 모바일 하단 탭바 ----------------------------------------------------- */ #tabbar{ display:none;position:fixed;left:0;right:0;bottom:52px;z-index:60; background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(10px); border-top:1px solid var(--line); } body.frame-mobile #sitefooter{padding-bottom:124px} .tabbar-in{display:grid;grid-template-columns:repeat(4,1fr)} #tabbar a{ display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 10px; font-size:10px;font-weight:700;color:var(--muted);font-family:var(--f-kr); } #tabbar a[aria-current=page]{color:var(--pri)} #tabbar .ico{width:21px;height:21px} /* ========================================================================== SCREENS ========================================================================== */ .detail{display:grid;grid-template-columns:1fr 352px;gap:clamp(22px,3cqi,44px);align-items:start} .buybox{position:sticky;top:78px} .kv{display:grid;gap:0} .kv div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)} .kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-weight:600} .kv div:last-child{border-bottom:0} .curric .mod{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:var(--card)} .curric .mod-head{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;background:var(--bg-soft)} .curric .mod-head .idx{font-size:var(--fs-xs);font-weight:800;color:var(--pri);flex:none} .curric .mod-head h4{font-family:var(--f-kr);font-size:var(--fs-body);font-weight:700;letter-spacing:-0.02em} .curric .mod-body{padding:4px 18px 10px} .curric .lesson{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:var(--fs-sm);color:var(--ink-2);border-top:1px solid var(--line)} .curric .mod-body .lesson:first-child{border-top:0} .curric .lesson .ln{font-size:var(--fs-xs);color:var(--muted);width:22px;flex:none;font-variant-numeric:tabular-nums} .curric .lesson .dur{margin-left:auto;flex:none;font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums} #buybar{ display:none;position:fixed;left:0;right:0;bottom:52px;z-index:60; background:var(--card);border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(23,23,27,.08); } #buybar .in{display:flex;align-items:center;gap:12px;padding:12px var(--gut)} #buybar .p{display:flex;flex-direction:column;gap:0;min-width:0} #buybar .p .off{color:var(--sale);font-weight:800;font-size:var(--fs-xs)} #buybar .p .now{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-0.02em} #buybar .btn{flex:1} .resume{ display:grid;grid-template-columns:300px 1fr; border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card); } .resume .thumb{border-radius:0;aspect-ratio:auto;min-height:190px} .resume .body{padding:24px;display:flex;flex-direction:column;gap:16px;justify-content:center} .enroll{display:grid;gap:12px} .erow{ display:grid;grid-template-columns:84px 1fr 200px 124px;gap:18px;align-items:center; padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card); } .erow .thumb{aspect-ratio:4/3;border-radius:10px} .player{display:grid;grid-template-columns:1fr 348px;min-height:calc(100vh - 62px)} .stage{background:#0C0D10;display:flex;flex-direction:column;min-width:0} .video{ aspect-ratio:16/9;position:relative;display:grid;place-items:center; background:radial-gradient(120% 120% at 50% 38%,#242836 0%,#0C0D10 72%); } .video .play{ width:64px;height:64px;border-radius:50%;cursor:pointer;color:#fff; border:0;background:rgba(255,255,255,.16);backdrop-filter:blur(6px); display:grid;place-items:center; } .video .play:hover{background:rgba(255,255,255,.26)} .video .drm{ position:absolute;top:14px;right:16px;font-size:var(--fs-xxs);font-weight:700; color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.22);padding:4px 9px;border-radius:6px; } .video .wm{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.2);font-variant-numeric:tabular-nums} .vctrl{padding:14px 20px 18px;background:#0C0D10;color:#EDEEF1;display:flex;flex-direction:column;gap:11px} .vctrl .seg i{background:rgba(255,255,255,.16)} .vctrl .seg i.on{background:#6B8FFF} .vctrl .seg i.rep{background:#C9D6FF} .vctrl .t{font-size:var(--fs-xs);color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums} .vctrl .ib{background:transparent;border:0;color:#EDEEF1;cursor:pointer;padding:5px;border-radius:6px} .vctrl .ib:hover{background:rgba(255,255,255,.12)} .vctrl .legend span{color:rgba(255,255,255,.5)} .stagebody{background:var(--bg);padding:24px clamp(16px,2.4cqi,32px) 56px;flex:1} .crail{ border-left:1px solid var(--line);background:var(--card); position:sticky;top:62px;max-height:calc(100vh - 62px);overflow-y:auto; } .crail .ch{padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2} .crail .cm{padding:14px 20px 5px;font-family:var(--f-kr);font-size:var(--fs-xs);font-weight:800;color:var(--muted)} .crail .cl{display:grid;grid-template-columns:18px 1fr;gap:11px;padding:11px 20px;align-items:start;cursor:pointer;border-left:3px solid transparent} .crail .cl:hover{background:var(--bg-soft)} .crail .cl[aria-current=true]{background:var(--pri-soft);border-left-color:var(--pri)} .crail .cl .t{font-size:var(--fs-sm);font-weight:600;line-height:1.45} .crail .cl .m{font-size:var(--fs-xxs);color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums} .filelist{display:grid;gap:8px} .filerow{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)} .filerow .nm{font-size:var(--fs-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .filerow .sz{font-size:var(--fs-xs);color:var(--muted);margin-left:auto;flex:none;font-variant-numeric:tabular-nums} .thread{display:grid;gap:12px} .msg{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--card)} .msg.me{background:var(--bg-soft)} .msg .mh{display:flex;align-items:center;gap:9px;margin-bottom:9px} .msg .mh .nm{font-size:var(--fs-sm);font-weight:700} .msg .mh .tm{font-size:var(--fs-xs);color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums} .msg p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.68} .cert{ background:#fff;color:#17171B;border:1px solid var(--line-2);border-radius:var(--r); padding:clamp(24px,4cqi,52px);aspect-ratio:1/1.414;display:flex;flex-direction:column;position:relative; } .cert::before{content:"";position:absolute;inset:12px;border:1px solid #E6E8EE;border-radius:8px;pointer-events:none} .cert .in{position:relative;flex:1;display:flex;flex-direction:column;gap:clamp(14px,2.2cqi,26px)} .cert h2{font-family:var(--f-kr);font-size:clamp(1.375rem,3cqi,2rem);font-weight:900;letter-spacing:-0.03em;line-height:1.2} .cert .nm{font-family:var(--f-kr);font-size:clamp(1.375rem,2.8cqi,1.75rem);font-weight:800;border-bottom:2px solid #17171B;padding-bottom:6px;display:inline-block} .cert dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:var(--fs-sm)} .cert dt{color:#8A8F9A;font-weight:600} .cert dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums} .cert .sign{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:18px} .cert .sign .ln{border-top:1px solid #DFE1E6;padding-top:7px;min-width:138px;font-size:var(--fs-xs);color:#5F6471} .cert .seal{width:70px;height:70px;border-radius:50%;border:2px solid var(--pri);color:var(--pri);display:grid;place-items:center;text-align:center;font-size:9px;font-weight:800;line-height:1.3;flex:none} .cert .top{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-xs);color:#8A8F9A;font-weight:700} .checkout{display:grid;grid-template-columns:1fr 372px;gap:clamp(22px,3cqi,44px);align-items:start} .sumrow{display:flex;justify-content:space-between;gap:14px;font-size:var(--fs-sm);padding:6px 0} .sumrow.total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:13px;font-size:1rem;font-weight:800} .sumrow .num{font-variant-numeric:tabular-nums} .pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative} .pay label{ border:1px solid var(--line-2);border-radius:var(--r-sm);padding:14px 10px;text-align:center; font-size:var(--fs-sm);font-weight:600;cursor:pointer;background:var(--card); } .pay input{position:absolute;opacity:0;pointer-events:none} .pay label:has(input:checked){border-color:var(--pri);background:var(--pri-soft);color:var(--pri);font-weight:800} .steps{display:flex;gap:8px} .steps div{ flex:1;display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:var(--r-sm); background:var(--bg-soft);color:var(--muted);font-size:var(--fs-sm);font-weight:700; } .steps div .n{width:20px;height:20px;border-radius:50%;background:var(--line-2);color:var(--bg);display:grid;place-items:center;font-size:var(--fs-xxs);flex:none} .steps div.on{background:var(--pri-soft);color:var(--pri)} .steps div.on .n{background:var(--pri);color:var(--pri-ink)} .steps div.done{color:var(--ok)} .steps div.done .n{background:var(--ok);color:#fff} .auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 62px)} .auth-art{ background:linear-gradient(150deg,#2E5CE6 0%,#4B38C9 60%,#7A2FB0 100%);color:#fff; padding:clamp(28px,4cqi,60px);display:flex;flex-direction:column;justify-content:space-between;gap:30px; } .auth-art h2{font-family:var(--f-kr);font-size:clamp(1.375rem,2.6cqi,2rem);font-weight:900;letter-spacing:-0.035em;line-height:1.3} .auth-form{padding:clamp(28px,4cqi,60px);display:flex;align-items:center;justify-content:center} .auth-form .in{width:100%;max-width:380px} .sso{display:grid;gap:8px} .sso button{ display:flex;align-items:center;justify-content:center;gap:8px;padding:12px; border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card); font-family:var(--f-kr);font-size:var(--fs-sm);font-weight:700;cursor:pointer; } .sso button:hover{filter:brightness(.97)} .sso .kakao{background:#FEE500;border-color:#FEE500;color:#191600} .sso .naver{background:#03C75A;border-color:#03C75A;color:#fff} /* ========================================================================== ADMIN ========================================================================== */ body.g-admin #topbar,body.g-admin #sitefooter,body.g-admin #tabbar,body.g-admin #buybar{display:none} body.g-admin .shell{display:grid;grid-template-columns:230px 1fr} body.g-admin #rail{display:flex} body:not(.g-admin) #rail{display:none} body.g-student .nav-public,body.g-admin .nav-public{display:none} body:not(.g-student) .nav-student{display:none} body.g-student .pub-cta{display:none} body:not(.g-student) .stu-cta{display:none} body:not([data-screen="course"]) #buybar{display:none} #rail{ flex-direction:column;gap:3px;background:var(--card);border-right:1px solid var(--line); padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto; } #rail .rbrand{padding:6px 10px 16px;display:flex;align-items:center;gap:7px} #rail .rgroup{font-family:var(--f-kr);font-size:var(--fs-xxs);font-weight:800;color:var(--muted);padding:15px 10px 5px} #rail a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)} #rail a:hover{background:var(--bg-soft);color:var(--ink)} #rail a[aria-current=page]{background:var(--pri-soft);color:var(--pri);font-weight:800} #rail a .ct{margin-left:auto;font-size:var(--fs-xxs);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums} #rail a[aria-current=page] .ct{color:var(--pri)} #rail .ruser{margin-top:auto;border-top:1px solid var(--line);padding-top:13px;display:flex;align-items:center;gap:10px} .amain{padding:clamp(20px,2.6cqi,34px) clamp(16px,2.6cqi,36px) 72px;max-width:1340px} .ahead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px} .kpi .lb{font-size:var(--fs-xs);color:var(--muted);font-weight:700} .kpi strong{font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:-0.04em;font-variant-numeric:tabular-nums} .kpi .d{font-size:var(--fs-xs);font-weight:700} .kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--bad)} .toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .toolbar input[type=text]{max-width:250px} .toolbar select{width:auto;min-width:126px} .spark{display:flex;align-items:flex-end;gap:4px;height:46px} .spark i{flex:1;background:var(--pri-soft);border-radius:3px 3px 0 0;min-height:3px} .spark i:last-child{background:var(--pri)} .editor{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start} .emod{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:12px;overflow:hidden} .emod-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft)} .hdl{ width:14px;height:18px;flex:none;color:var(--line-2);cursor:grab; background-image:radial-gradient(currentColor 1.1px,transparent 1.3px); background-size:5px 5px;background-position:1px 2px; } .hdl:hover{color:var(--muted)} .elesson{display:grid;grid-template-columns:14px 30px 1fr auto;gap:11px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)} .elesson:hover{background:var(--bg-soft)} .elesson .lt{font-size:var(--fs-sm);font-weight:600} .elesson .tags{display:flex;gap:6px;align-items:center} .eadd{padding:12px 16px;border-top:1px dashed var(--line-2)} .wsteps{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none} .wsteps::-webkit-scrollbar{display:none} .wsteps div{ display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r-pill); background:var(--bg-soft);color:var(--muted);font-size:var(--fs-sm);font-weight:700;white-space:nowrap; } .wsteps div .n{width:19px;height:19px;border-radius:50%;background:var(--line-2);color:var(--bg);display:grid;place-items:center;font-size:10px;flex:none} .wsteps div.on{background:var(--ink);color:var(--bg)} .wsteps div.on .n{background:var(--bg);color:var(--ink)} .wsteps div.done{background:var(--ok-soft);color:var(--ok)} .wsteps div.done .n{background:var(--ok);color:#fff} /* ========================================================================== 시안 chrome ========================================================================== */ #chrome{ position:fixed;left:0;right:0;bottom:0;z-index:100; background:rgba(16,17,20,.96);color:#F2F3F5; border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px); } #chrome .cbar{display:flex;align-items:center;gap:12px;padding:8px 14px;overflow-x:auto;scrollbar-width:none} #chrome .cbar::-webkit-scrollbar{display:none} #chrome .tag{font-size:10px;font-weight:800;color:rgba(255,255,255,.5);white-space:nowrap;flex:none} #chrome .cgroup{display:flex;align-items:center;gap:4px;flex:none} #chrome .cgroup > em{font-style:normal;font-size:9px;font-weight:800;color:rgba(255,255,255,.36);margin-right:3px;white-space:nowrap} #chrome button.nav-s{ background:transparent;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.76); font-family:inherit;font-size:11px;font-weight:600;padding:5px 9px;border-radius:6px;cursor:pointer;white-space:nowrap; } #chrome button.nav-s:hover{border-color:rgba(255,255,255,.44);color:#fff} #chrome button.nav-s[aria-current=true]{background:#fff;color:#101114;border-color:#fff;font-weight:800} #chrome .ctools{display:flex;gap:6px;margin-left:auto;flex:none;padding-left:8px} #chrome .ctools button{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8); font-family:inherit;font-size:10px;font-weight:700;padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap; } #chrome .ctools button[aria-pressed=true]{background:#fff;color:#101114} body{padding-bottom:52px} body.spec [data-fr]{position:relative;outline:1.5px dashed color-mix(in srgb,var(--pri) 60%,transparent);outline-offset:3px} body.spec [data-fr]::after{ content:attr(data-fr);position:absolute;top:-9px;left:0;z-index:30; font-size:9px;font-weight:800;background:var(--pri);color:var(--pri-ink); padding:1px 5px;border-radius:4px;pointer-events:none;white-space:nowrap; } body[data-screen="player"] #sitefooter, body[data-screen="auth"] #sitefooter{display:none} /* ========================================================================== 상단 네비게이션 반응형 #topbar .bar 는 nowrap flex 에 height:62px 고정이다. 자연폭 합계가 1078px 이라 그보다 좁아지면 nav·search 글자가 2줄로 꺾이고, 806px 아래로는 가로로 삐져나갔다. ≤620 에서 .nav,.search 를 숨기는 규칙 하나뿐이어서 621~880 구간(iPad 세로 768px 포함)이 비어 있었다. → ≤1080 압축 → ≤880 드로어로 전환. ========================================================================== */ .menubtn{ display:none;width:40px;height:40px;flex:none;place-items:center;margin-left:auto; background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm); color:var(--ink);cursor:pointer; } .menubtn:hover{background:var(--bg-soft)} #scrim{position:fixed;inset:0;z-index:70;background:rgba(23,23,27,.44);backdrop-filter:blur(2px)} #drawer{ position:fixed;z-index:80;top:0;right:0;bottom:0;width:min(86vw,340px); background:var(--card);border-left:1px solid var(--line); box-shadow:-10px 0 40px rgba(23,23,27,.18); display:flex;flex-direction:column;overflow-y:auto; } /* #drawer 에 display:flex 가 걸려 있어 hidden 속성(UA display:none)이 무효화된다. 명시적으로 되살리지 않으면 드로어가 모든 화면에 항상 떠 있는다. */ #drawer[hidden]{display:none} #drawer .dhead{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 16px;border-bottom:1px solid var(--line); font-family:var(--f-kr);position:sticky;top:0;background:var(--card); } #drawer .dbody{padding:16px;display:flex;flex-direction:column;gap:18px} #drawer .dsearch{max-width:none;flex:none} #drawer .dnav{display:flex;flex-direction:column;gap:2px} #drawer .dnav a{ padding:13px 12px;border-radius:var(--r-sm); font-family:var(--f-kr);font-size:var(--fs-body);font-weight:600;color:var(--ink-2); } #drawer .dnav a:hover{background:var(--bg-soft);color:var(--ink)} #drawer .dnav a[aria-current=page]{background:var(--pri-soft);color:var(--pri);font-weight:800} #drawer .dfoot{display:grid;gap:8px;padding-top:4px;border-top:1px solid var(--line);margin-top:2px} body:not(.g-student) #drawer .nav-student, body:not(.g-student) #drawer .stu-cta{display:none} body.g-student #drawer .nav-public, body.g-student #drawer .pub-cta{display:none} body.g-admin #scrim,body.g-admin #drawer{display:none} /* 1160 이하 — nav 는 유지하고 gap·패딩을 줄이고 검색은 아이콘만 남긴다. 1080 으로 잡으면 1081~1150 구간이 그대로 넘친다 (자연폭 합계 1078px). */ @container app (max-width:1160px){ #topbar .bar{gap:12px} .nav a{padding:8px 9px} .search{flex:none;max-width:none;width:40px;justify-content:center;padding:9px 0} .search span{display:none} } /* 880 이하 — nav·search 를 드로어로 넘긴다 (iPad 세로 768px 포함) */ @container app (max-width:880px){ .nav,.search{display:none} .menubtn{display:grid} #topbar .bar{gap:12px} } /* ========================================================================== RESPONSIVE — 컨테이너 쿼리 (모바일 프레임에서도 동작) ========================================================================== */ @container app (max-width:1080px){ .grid-5{grid-template-columns:repeat(4,1fr)} .track-5{grid-auto-columns:calc((100% - 3 * clamp(12px,1.6cqi,20px)) / 4)} .detail{grid-template-columns:1fr} .buybox{position:static} .checkout{grid-template-columns:1fr} .player{grid-template-columns:1fr} .crail{border-left:0;border-top:1px solid var(--line);position:static;max-height:none} .editor{grid-template-columns:1fr} body.g-admin .shell{grid-template-columns:68px 1fr} #rail .lbl,#rail .rgroup,#rail .ct,#rail .rbrand .bt,#rail .ruser .mt{display:none} #rail a{justify-content:center;padding:11px 0} #rail .rbrand{justify-content:center} } @container app (max-width:880px){ .promo{grid-template-columns:1fr} .promo-visual{display:none} .grid-4,.grid-5{grid-template-columns:repeat(3,1fr)} .track-4,.track-5{grid-auto-columns:calc((100% - 2 * clamp(12px,1.6cqi,20px)) / 3)} .auth{grid-template-columns:1fr} .auth-art{display:none} .stats{grid-template-columns:repeat(2,1fr)} .flowgrid{grid-template-columns:repeat(2,1fr)} .kpis{grid-template-columns:repeat(2,1fr)} #sitefooter .cols{grid-template-columns:1fr 1fr} .erow{grid-template-columns:72px 1fr;gap:14px} .erow .c3,.erow .c4{grid-column:2} .resume{grid-template-columns:1fr} } @container app (max-width:620px){ #topbar .bar{height:56px;gap:12px} .chipbar{top:56px} /* 로그인·이어보기는 드로어 .dfoot 에 있으므로 상단바에서는 덜어낸다. brand 144 + 로그인·회원가입 184 + 햄버거 40 + gap 24 = 392 > 339(375px) */ .pub-cta .btn-quiet,.stu-cta .btn-soft{display:none} #sitefooter{padding-bottom:124px} .amain{padding-bottom:124px} .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr)} .track-4,.track-5{grid-auto-columns:46%} .track-2{grid-auto-columns:86%} .flowgrid,.stats{grid-template-columns:1fr 1fr} .sechead{flex-direction:column;align-items:flex-start;gap:10px} .pay{grid-template-columns:1fr} .steps{flex-direction:column} .cert{aspect-ratio:auto} .rankcard .thumb{width:76px} body.g-admin .shell{grid-template-columns:1fr} #rail{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:9px} #rail .rbrand,#rail .ruser{display:none} .amain{padding-inline:18px} .carousel .arrows{display:none} /* 표는 좁히지 말고 가로 스크롤 — 열 압축이 가독성을 가장 많이 깎는다 */ .tablewrap table{min-width:680px} /* 터치 타깃 최소 40px */ .btn-sm{padding:10px 16px} .btn-xs{padding:8px 13px} .iconbtn{width:40px;height:40px} .chip{padding:11px 16px} /* 관리자 커리큘럼 강의 행 — 4열(14/30/1fr/auto)이면 제목 칸이 10px 로 찌그러지고 .emod{overflow:hidden} 에 배지·공개 스위치가 잘려 눌리지 않는다. 2행으로 분리 */ .elesson{grid-template-columns:14px 30px minmax(0,1fr);row-gap:9px} .elesson .tags{grid-column:2 / -1;flex-wrap:wrap} .emod-head{flex-wrap:wrap;row-gap:8px} .panel-head{flex-wrap:wrap;row-gap:10px} /* 자료·제출 파일 행 — 파일명 ellipsis 로 106px 까지 줄어든다. 버튼을 아래로 */ .filerow{flex-wrap:wrap;row-gap:10px} .filerow .btn{margin-left:auto} /* 커리큘럼 강의 제목이 재생시간 옆에서 2~3자씩 끊기는 것 방지 */ .curric .lesson{flex-wrap:wrap;row-gap:4px} } /* ── 작은 휴대폰 (≤480px) — 2단 그리드는 카드 폭 160px 로 줄어 못 읽는다 ── */ @container app (max-width:480px){ .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr} .flowgrid,.stats{grid-template-columns:1fr} .track-4,.track-5{grid-auto-columns:78%} .track-2{grid-auto-columns:92%} /* 1단에서 세로 카드는 썸네일이 화면을 다 먹는다 → 가로 리스트형으로. 캐러셀(.track) 안은 세로 유지 */ .grid .ccard{ display:grid; grid-template-columns:132px minmax(0,1fr); column-gap:14px;row-gap:5px; align-items:start; } .grid .ccard > .thumb{grid-column:1;grid-row:1 / span 4;align-self:start} .grid .ccard > :not(.thumb){grid-column:2} .grid .ccard:hover .thumb{transform:none;box-shadow:none} .grid .ccard .ttl{min-height:0} .rankcard .mid{gap:12px} .rankcard .thumb{width:84px} .sec{padding-block:26px} #sitefooter .cols{grid-template-columns:1fr;gap:22px} .erow{grid-template-columns:1fr} .erow .thumb{max-width:160px} .erow .c3,.erow .c4{grid-column:1} /* 수료증 서명란 2개가 나란히면 294px 로 넘친다 */ .cert .sign{flex-direction:column;align-items:stretch;gap:20px} .cert .sign .ln{min-width:0} } /* ── 초소형 (≤360px) ────────────────────────────────────────────────────── */ @container app (max-width:400px){ .brand .sfx{display:none} } @container app (max-width:360px){ .grid .ccard{grid-template-columns:108px minmax(0,1fr);column-gap:11px} .rankcard .rk{width:18px;font-size:1.25rem} .rankcard .thumb{width:68px} } /* 하단 탭바 / 결제바 — .app 바깥이라 컨테이너 쿼리가 닿지 않으므로 뷰포트 기준 */ @media (max-width:620px){ #tabbar{display:block} body.g-admin #tabbar{display:none} body[data-screen="course"] #tabbar{display:none} body[data-screen="course"] #buybar{display:block} } /* 시안 모바일 프레임 미리보기 — 430px 폭에 맞춰 중앙 정렬 */ body.frame-mobile #tabbar, body.frame-mobile[data-screen="course"] #buybar{ display:block;left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:430px; } body.frame-mobile.g-admin #tabbar, body.frame-mobile[data-screen="course"] #tabbar{display:none} body.frame-mobile #drawer{right:auto;left:50%;transform:translateX(calc(430px / 2 - 100%));width:min(86%,320px)} body.frame-mobile #scrim{left:50%;right:auto;transform:translateX(-50%);width:430px} @media print{ #chrome,#topbar,#rail,#sitefooter,#tabbar,#buybar,.tabs{display:none!important} body{padding-bottom:0} } /* ========================================================================== v3 — 시네마틱 트레일러 히어로 Coloso 의 커머스 정보구조(퀵링크·TOP 랭킹·배지/가격) 에 Wonderwall 의 모노톤 + 풀블리드 영상 무드를 얹은 구성. 히어로만 블랙이고 본문은 기존 라이트 커머스 톤을 유지한다 — 경계를 끊어 "영상 한 컷 → 바로 상품" 흐름을 만든다. ========================================================================== */ /* --- 히어로 스테이지 ------------------------------------------------------ */ .hero{position:relative;background:#07070A;color:#fff;isolation:isolate} .hero-stage{ position:relative;display:grid;overflow:hidden; min-height:clamp(420px,40cqi,560px); } /* 슬라이드는 전부 같은 그리드 셀에 겹쳐두고 opacity 로 교차한다. display:none 으로 빼면