/* 뜬다 AI Content OS */
.os-shell{min-height:100vh;background:#f3f4f6;color:#17181b;display:grid;grid-template-columns:230px 1fr;letter-spacing:-.02em}.os-shell button{color:inherit}.os-nav{position:sticky;top:0;height:100vh;background:#111217;color:#fff;padding:24px 14px;display:flex;flex-direction:column}.os-brand{display:grid;grid-template-columns:38px 1fr;align-items:center;padding:0 8px 30px}.os-brand img{width:34px;height:34px;object-fit:contain}.os-brand b{font-size:23px}.os-brand span{grid-column:2;font-size:9px;color:#777;letter-spacing:.14em}.os-nav nav{display:flex;flex-direction:column;gap:4px}.os-nav nav button{border:0;background:transparent;padding:12px 14px;border-radius:9px;color:#9da0aa;text-align:left;font-weight:750}.os-nav nav button i{display:inline-grid;width:25px;font-style:normal}.os-nav nav button.on{background:#ff5a1f;color:#fff}.os-project{margin-top:auto;background:#1b1c22;padding:14px;border-radius:12px}.os-project small,.os-project b{display:block;font-size:11px;margin-bottom:7px}.os-project span{display:block;height:4px;background:#333}.os-project span i{display:block;width:64%;height:100%;background:#ff5a1f}.os-project button{border:0;background:transparent;color:#aaa;padding:10px 0 0;font-size:11px}.os-main{min-width:0}.os-top{position:sticky;top:0;z-index:20;height:68px;background:#fffefaeb;backdrop-filter:blur(18px);border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 26px}.os-top>div{display:flex;align-items:center;gap:14px}.os-top span{font-size:12px;color:#888}.os-top button,.editor-top button{border:1px solid #ddd;background:white;border-radius:8px;padding:10px 13px}.hot{background:#ff5a1f!important;color:white!important;border-color:#ff5a1f!important}.mobile-menu{display:none}.os-page{padding:28px;max-width:1680px;margin:auto}.os-hero{display:grid;grid-template-columns:.8fr 1fr .55fr;background:#151a25;color:white;border-radius:22px;overflow:hidden;min-height:430px}.os-hero>div:first-child{padding:42px}.os-hero h1{font-size:clamp(40px,4vw,68px);line-height:.96;margin:20px 0}.os-hero h1 em{color:#ff6937;font-style:normal}.os-hero p{color:#b9beca;line-height:1.6}.live,.page-heading>span,.platform-band header span,.content-feed header span{font-size:11px;font-weight:900;letter-spacing:.08em;color:#ff5a1f}.hero-player{position:relative;min-width:0}.hero-player video,.hero-player img{width:100%;height:430px;object-fit:cover}.hero-player:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#000c)}.hero-player>div{position:absolute;z-index:2;left:22px;bottom:22px;display:flex;flex-direction:column}.hero-player span{font-size:10px;color:#75ff83}.hero-player b{font-size:24px}.hero-player small{color:#ccc}.os-hero aside{padding:26px 20px}.os-hero aside>p{display:grid;grid-template-columns:28px 1fr auto;border-bottom:1px solid #ffffff18;padding:16px 0;margin:0;align-items:center}.os-hero aside span{color:#666}.os-hero aside strong{font-size:13px}.os-hero aside em{font-size:11px;color:#69ef78}.platform-band,.content-feed{padding:58px 0 20px}.platform-band>header,.content-feed>header{display:flex;justify-content:space-between;align-items:end}.platform-band h2,.content-feed h2,.page-heading h1{font-size:clamp(31px,3vw,52px);margin:8px 0}.platform-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:25px}.platform-cards article{background:#fff;padding:22px;border-radius:16px;border-top:4px solid var(--pc);box-shadow:0 4px 22px #20252e0c}.platform-cards article>i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pc);color:white;font-style:normal;font-weight:900;float:left;margin-right:10px}.platform-cards small{color:#0baf5c}.platform-cards h3{clear:both;padding-top:20px}.platform-cards p{color:#777;font-size:13px}.platform-cards button,.chips button,.feed-info button{border:1px solid #ddd;background:#fff;border-radius:8px;padding:9px 11px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0 8px}.chips.category{margin-top:0}.chips button.on{background:#17181b;color:white}.feed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.feed-grid article{background:#fff;border-radius:14px;overflow:hidden}.feed-media{position:relative;aspect-ratio:9/11;background:#111}.feed-media img,.feed-media video{width:100%;height:100%;object-fit:cover}.feed-media span{position:absolute;top:10px;left:10px;background:#090909dd;color:white;padding:5px 7px;border-radius:4px;font-size:9px}.feed-media button{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;border:0;background:#ffffffdd}.feed-info{padding:14px}.feed-info small{color:#888}.feed-info h3{margin:7px 0;font-size:16px}.feed-info p{font-size:11px;color:#777}.feed-info>div{display:flex;justify-content:space-between}.feed-info .remix{border-color:#ff5a1f;color:#ff5a1f}.page-heading{padding:22px 0 34px}.page-heading h1{font-size:54px}.page-heading p{color:#666}.create-layout{display:grid;grid-template-columns:1fr 390px;gap:20px;align-items:start}.create-form,.create-preview,.compare-grid article,.brand-kit section,.analytics-grid section,.kpis article{background:#fff;border:1px solid #e1e1e1;border-radius:16px}.form-step{padding:24px;border-bottom:1px solid #eee}.form-step>header{display:flex;align-items:center;gap:12px}.form-step>header span{color:#ff5a1f;font-weight:900}.form-step>header h2{font-size:20px}.form-step>header small{margin-left:auto;color:#32a763}.type-buttons,.suggestions{display:flex;gap:8px;flex-wrap:wrap}.type-buttons button,.suggestions button,.model-grid button{padding:12px;border:1px solid #ddd;background:#fff;border-radius:9px}.type-buttons button.on,.model-grid button.on{border:2px solid #ff5a1f;background:#fff7f2}.uploads,.model-grid,.setting-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.uploads{grid-template-columns:repeat(3,1fr)}.uploads button{min-height:100px;border:1px dashed #bbb;background:#fafafa;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center}.uploads small,.model-grid small{display:block;color:#999}.model-grid button{text-align:left}.model-grid i{float:left;margin-right:8px;background:#111;color:#fff;padding:7px;font-style:normal}.generate{margin:20px;width:calc(100% - 40px);min-height:55px;border:0;border-radius:10px;background:#ff5a1f;color:white;font-weight:900}.generate span{margin-left:20px;font-weight:400}.create-preview{position:sticky;top:90px;padding:18px}.create-preview>div{aspect-ratio:9/16;position:relative;overflow:hidden;border-radius:14px;margin-top:15px;background:#111}.create-preview img,.create-preview video{width:100%;height:100%;object-fit:cover}.create-preview b,.create-preview small{position:absolute;left:18px;right:18px;color:white;z-index:2}.create-preview b{bottom:60px;font-size:24px}.create-preview small{bottom:22px}.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.compare-grid article{padding:10px}.compare-grid article.selected{border:3px solid #ff5a1f}.compare-grid article>div{aspect-ratio:9/14;position:relative;overflow:hidden;border-radius:10px;background:#111}.compare-grid img,.compare-grid video{width:100%;height:100%;object-fit:cover}.compare-grid article>div span{position:absolute;top:10px;left:10px;background:#ff5a1f;color:white;padding:6px;font-size:9px}.compare-grid p{font-size:12px;color:#777}.compare-grid button{width:100%;padding:10px}.compare-bar{position:sticky;bottom:15px;background:#17181b;color:#fff;padding:16px 20px;margin-top:20px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}.compare-bar button{padding:12px;border-radius:8px}.editor{height:calc(100vh - 68px);background:#202127;color:white;display:grid;grid-template-rows:54px 1fr 310px}.editor-top{background:#16171b;display:flex;align-items:center;gap:13px;padding:0 16px}.editor-top span{color:#777;font-size:11px;margin-right:auto}.editor-body{display:grid;grid-template-columns:100px 1fr 270px;min-height:0}.assets,.properties{background:#18191e;padding:12px}.assets button,.properties button{display:block;width:100%;padding:10px;border:0;background:transparent;color:#bbb;text-align:left}.canvas{display:flex;flex-direction:column;min-height:0}.canvas-toolbar{padding:10px;color:#999;font-size:11px}.video-stage{position:relative;flex:1;min-height:0}.video-stage img,.video-stage video{height:100%;max-height:440px;margin:auto;object-fit:contain}.video-stage b{position:absolute;bottom:15%;left:20%;right:20%;text-align:center;font-size:25px}.playbar{text-align:center;padding:8px}.properties label{font-size:11px;color:#aaa}.properties input,.properties select{padding:9px}.properties hr{border-color:#333}.timeline-pro{background:#15161a;padding:10px 14px;overflow:auto}.timeline-pro>header,.pro-track{display:grid;grid-template-columns:120px 1fr 130px;align-items:center}.timeline-pro>header{font-size:10px;color:#777;height:30px}.pro-track>span{font-size:11px;color:#aaa}.pro-track>div{height:32px;display:flex;border-left:1px solid #ff5a1f;background:repeating-linear-gradient(90deg,#222 0,#222 24%,#333 25%)}.pro-track i{height:25px;margin-top:3px;background:#6f69d9;padding:6px;font-size:9px;font-style:normal;border-radius:3px}.pro-track:nth-child(3n) i{background:#367ed0}.pro-track:nth-child(4n) i{background:#c57443}.showcase{display:grid;grid-template-columns:minmax(320px,520px) 1fr;gap:30px;background:#111217;border-radius:18px;padding:24px;color:white}.vertical-player{height:720px;position:relative;background:#000;overflow:hidden}.vertical-player img,.vertical-player video{width:100%;height:100%;object-fit:cover}.show-text{position:absolute;left:20px;right:70px;bottom:25px}.social{position:absolute;right:12px;bottom:30px;display:flex;flex-direction:column;gap:12px}.social button{width:48px;height:48px;border-radius:50%;border:0;background:#ffffffdf}.social small{display:block;font-size:8px}.showcase>aside{padding:25px}.showcase>aside>div{display:flex;justify-content:space-between;padding:17px 0;border-bottom:1px solid #333}.showcase textarea{min-height:100px}.showcase aside button{padding:13px;margin:10px 6px 0 0}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpis article{padding:22px}.kpis small,.kpis b{display:block}.kpis b{font-size:29px;margin:10px 0}.kpis span{color:#18a15f}.analytics-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:15px;margin-top:15px}.analytics-grid section{padding:25px}.bar{display:grid;grid-template-columns:150px 1fr 50px;gap:10px;align-items:center;margin:25px 0}.bar i{height:8px;background:#eee}.bar i b{display:block;height:100%;background:#ff5a1f}.analytics-grid section p{border-bottom:1px solid #eee;padding:16px}.analytics-grid section p b{margin-right:15px;color:#ff5a1f}.brand-kit{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:15px}.brand-kit section{padding:25px}.brand-mark{height:190px;background:#111;color:white;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:12px;font-size:40px}.brand-mark img{width:70px}.palette{display:flex;margin:20px 0}.palette i{width:54px;height:54px;background:#ff5a1f}.palette i:nth-child(2){background:#111217}.palette i:nth-child(3){background:#f5f0e8}.palette i:nth-child(4){background:#18a15f}.brand-kit label,.brand-kit section>div:not(.brand-mark):not(.palette){display:flex;gap:10px;padding:14px 0;border-bottom:1px solid #eee}.brand-kit input{width:auto;margin:0}.brand-kit section>div span{margin-left:auto;color:#18a15f}
@media(max-width:1150px){.os-shell{grid-template-columns:74px 1fr}.os-brand b,.os-brand span,.os-nav nav button:not(.on){font-size:0}.os-nav nav button i{font-size:16px}.os-project{display:none}.os-hero{grid-template-columns:1fr 1fr}.os-hero aside{display:none}.platform-cards,.feed-grid{grid-template-columns:repeat(2,1fr)}.create-layout{grid-template-columns:1fr}.create-preview{display:none}.compare-grid{grid-template-columns:repeat(2,1fr)}.editor-body{grid-template-columns:75px 1fr 220px}}
@media(max-width:720px){.os-shell{display:block}.os-nav{display:none}.os-top{padding:0 12px}.mobile-menu{display:block}.os-top span,.top-actions>button:first-child,.top-actions b{display:none}.os-page{padding:14px}.os-hero{grid-template-columns:1fr}.os-hero>div:first-child{padding:28px}.hero-player{display:none}.platform-cards,.feed-grid,.compare-grid,.kpis,.brand-kit,.analytics-grid{grid-template-columns:1fr}.uploads,.model-grid,.setting-row{grid-template-columns:1fr 1fr}.page-heading h1{font-size:38px}.editor{height:auto;min-height:100vh;grid-template-rows:auto 600px 300px}.editor-body{grid-template-columns:55px 1fr}.properties{display:none}.assets{padding:5px}.assets button{font-size:9px}.showcase{grid-template-columns:1fr}.vertical-player{height:620px}.showcase>aside{padding:5px}.timeline-pro>header,.pro-track{grid-template-columns:70px 1fr 0}.os-hero h1{font-size:45px}}


/* ==========================================================================
   카페24 이식 보정 — CREND(다크) 대응 · 우리 서비스 연결분
   원본 시안 CSS 는 위쪽 그대로 두고, 아래에서만 덧붙입니다.
   ========================================================================== */

/* 폰트·자간을 사이트 전체와 맞춥니다 */
.os-shell{font-family:var(--font-ko,'Noto Sans KR',sans-serif)}
.os-shell .en,.os-shell .num{font-family:var(--font-en,'Archivo',sans-serif);font-variant-numeric:tabular-nums}

/* CREND 는 다크 브랜드라 배경을 뒤집습니다 */
.theme-dark .os-shell{background:#0b0a0d;color:#fff}
.theme-dark .os-nav{background:#000;border-right:1px solid #1c1a1f}
.theme-dark .os-top{background:#0b0a0dee;border-bottom-color:#1c1a1f;color:#fff}
.theme-dark .os-page,
.theme-dark .os-page section,
.theme-dark .os-page article,
.theme-dark .os-page aside{color:#fff}
.theme-dark .os-hero,
.theme-dark .platform-cards article,
.theme-dark .feed-grid article,
.theme-dark .compare-grid article,
.theme-dark .kpis article,
.theme-dark .analytics-grid section,
.theme-dark .brand-kit section,
.theme-dark .form-step,
.theme-dark .create-preview,
.theme-dark .showcase > aside,
.theme-dark .assets,
.theme-dark .properties,
.theme-dark .timeline-pro,
.theme-dark .editor-top,
.theme-dark .canvas{background:#131217;border-color:#26232b;color:#fff}
.theme-dark .os-page h1,.theme-dark .os-page h2,.theme-dark .os-page h3,
.theme-dark .os-page b,.theme-dark .os-page strong{color:#fff}
.theme-dark .os-page p,.theme-dark .os-page small,.theme-dark .os-page span{color:rgba(255,255,255,.62)}
.theme-dark .chips button{background:#131217;border-color:#2f2b36;color:rgba(255,255,255,.62)}
.theme-dark .chips button.on{background:#ff4b16;border-color:#ff4b16;color:#fff}
.theme-dark .os-page input,.theme-dark .os-page select,.theme-dark .os-page textarea{
  background:#0f0e12;border-color:#2f2b36;color:#fff}
.theme-dark .os-nav nav button.on{background:#ff4b16}

/* 로그인 안 한 방문자용 안내 줄 */
.os-guest{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff4ec;border:1px solid #ffd2be;border-radius:10px;padding:12px 16px;
  font-size:12.5px;color:#7a4a30;margin-bottom:16px}
.theme-dark .os-guest{background:rgba(255,75,22,.10);border-color:rgba(255,75,22,.35);color:#ffb599}
.os-guest a{font-weight:800;text-decoration:underline}

/* 데이터 출처 배지 — 샘플 수치를 실제처럼 보이지 않게 */
.os-origin{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:4px;background:#f1ece3;color:#8a8177;border:1px solid #e6e0d5;
  vertical-align:middle;margin-left:6px;letter-spacing:0}
.theme-dark .os-origin{background:#1c1a1f;color:rgba(255,255,255,.45);border-color:#2f2b36}
.os-note{font-size:11px;color:#8a8177;margin-top:10px;line-height:1.7}
.theme-dark .os-note{color:rgba(255,255,255,.38)}

/* 미디어가 아직 없을 때 빈 칸이 흉하지 않게 */
.os-shell video,.os-shell img{background:#14110f}
.os-empty{display:grid;place-items:center;height:100%;min-height:120px;
  background:#e9e6e0;color:#8a8177;font-size:11px}
.theme-dark .os-empty{background:#17161b;color:rgba(255,255,255,.3)}

/* 사이드바 메뉴를 링크로 쓰기 때문에 a 에도 같은 모양을 줍니다 */
.os-nav nav a{display:block;border:0;background:transparent;padding:12px 14px;border-radius:9px;
  color:#9da0aa;text-align:left;font-weight:750;font-size:13.5px}
.os-nav nav a i{display:inline-grid;width:25px;font-style:normal}
.os-nav nav a.on{background:#ff5a1f;color:#fff}
.theme-dark .os-nav nav a.on{background:#ff4b16}
.os-nav nav a:hover{color:#fff}
.os-back{margin-top:12px;font-size:11px;color:#777;padding:0 8px;display:block}
.os-back:hover{color:#fff}

/* 스크림은 항상 화면 고정 — 그리드 칸을 차지하면 안 됩니다 */
.os-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;display:none}

/* 모바일: 사이드바를 서랍으로 */
@media(max-width:720px){
  .os-drawer{position:fixed;inset:0 auto 0 0;width:250px;z-index:200;transform:translateX(-100%);
    transition:transform .2s;display:flex!important}
  .os-drawer.open{transform:none}
  .os-scrim.open{display:block}
}

/* 사이트 공통 CSS(theme.css)의 섹션 여백·컨테이너 규칙이 앱 셸에 새어들지 않게 막습니다 */
.os-shell section{padding:0!important;max-width:none!important;margin:0}
.os-shell .os-page > section{margin-bottom:26px}
.os-shell h1,.os-shell h2,.os-shell h3{font-size:inherit;line-height:inherit;letter-spacing:inherit}
.os-shell .page-heading h1{font-size:44px;line-height:1.15}
.os-shell input,.os-shell select,.os-shell textarea{margin-top:0}

/* 편집기 상단 버튼 — 밝은 배경에서 흰 글씨가 안 보이던 것 수정 */
.editor-top button{border:1px solid #d6d3cc;background:#fff;color:#17181b;
  border-radius:6px;padding:8px 14px;font-size:12.5px;font-weight:700}
.editor-top button.hot{background:#ff5a1f;border-color:#ff5a1f;color:#fff}
.theme-dark .editor-top button{background:#0f0e12;border-color:#2f2b36;color:#fff}
.theme-dark .editor-top button.hot{background:#ff4b16;border-color:#ff4b16}
.editor-top a{display:inline-flex}

/* 다크(CREND)에서 흰 버튼이 흰 글씨로 보이지 않던 것 일괄 수정 */
.theme-dark .os-shell button{background:#131217;border:1px solid #2f2b36;color:#fff}
.theme-dark .os-shell button:hover{border-color:rgba(255,255,255,.4)}
.theme-dark .os-shell button.hot,
.theme-dark .os-shell button.on,
.theme-dark .os-shell .generate,
.theme-dark .os-shell .remix{background:#ff4b16;border-color:#ff4b16;color:#fff}
.theme-dark .os-shell .chips button{background:#131217;color:rgba(255,255,255,.62)}
.theme-dark .os-shell .chips button.on{background:#ff4b16;color:#fff}
.theme-dark .os-shell .feed-media button,
.theme-dark .os-shell .vertical-player .social button{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.25)}
.theme-dark .os-shell .assets button,
.theme-dark .os-shell .properties button{background:transparent;border-color:#2f2b36;color:rgba(255,255,255,.72)}
.theme-dark .os-shell .os-nav nav a{border:0;background:transparent}

/* 라이트에서도 플랫폼 카드 버튼이 카드 색을 따라가도록 */
.platform-cards button{border:1px solid #d6d3cc;background:#fff;color:#17181b;font-weight:700}
.platform-cards button:hover{border-color:var(--pc,#ff5a1f);color:var(--pc,#ff5a1f)}
.theme-dark .platform-cards button{background:#0f0e12;border-color:#2f2b36;color:#fff}
.top-actions button{border:1px solid #d6d3cc;background:#fff;color:#17181b}
.top-actions button.hot{background:#ff5a1f;border-color:#ff5a1f;color:#fff}
.theme-dark .top-actions button{background:#131217;border-color:#2f2b36;color:#fff}
.theme-dark .top-actions button.hot{background:#ff4b16;border-color:#ff4b16}
@media(max-width:720px){
  /* 모바일에선 히어로 영상이 숨겨지므로 빈 검은 칸이 남지 않게 */
  .os-hero{min-height:0}
  .os-hero > div:first-child{padding:22px}
  .os-hero aside{padding:16px}
  .page-heading h1,.os-shell .page-heading h1{font-size:26px;line-height:1.3}
  .os-hero h1{font-size:28px;line-height:1.3}
}

/* 모바일에서 읽히지 않던 초소형 글자 최소 크기 (원본 시안은 9px 이하가 몇 군데 있습니다) */
@media(max-width:720px){
  .os-shell .assets button{font-size:11px;padding:8px 6px}
  .os-brand span{font-size:10px}
  .os-shell .feed-info small,.os-shell .feed-info p,
  .os-shell .social small,.os-shell .show-text p,
  .os-shell .pro-track > span,.os-shell .timeline-pro header b,
  .os-shell .kpis article span,.os-shell .os-hero aside p span{font-size:10.5px}
  .os-shell .en{font-size:inherit}
  .os-shell .os-origin{font-size:10px}
  .os-shell .feed-media > span{font-size:10.5px;padding:4px 8px}
  .os-shell .assets button i,.os-shell .os-nav nav a i{font-size:12px}
  /* 타임라인 클립 안의 라벨 — 좁은 화면에선 글자를 숨기고 막대만 보여줍니다 */
  .os-shell .pro-track > div > i{font-size:0}
  .os-shell .timeline-pro{overflow-x:auto}
  .os-shell .compare-grid article > div > span,
  .os-shell .hero-player > div span{font-size:10.5px}
}