﻿/* 작업공간(Workspace) — 입시로드 수행평가 AI 챗. 프로토타입 workspace.html 디자인 이식 (CSP 외부화).
   ipsiroad.css 뒤 + report_chat.css 뒤 로드. report_chat.css 의 .report-chat/.rapp 마크업은
   report_chat.js 가 동적으로 채우므로, 여기서는 ① --tool-* 토큰을 입시로드 브랜드 팔레트로 재정의해
   기존 채팅 UI 가 새 톤을 입게 하고, ② 프로토타입의 셸(히어로/사이드바/탭/헤더) 외형을 덮어쓴다.
   인라인 style 금지 — 전부 클래스 기반. */

/* ── 페이지 톤: 기존 채팅 컴포넌트가 쓰는 --tool-* 를 입시로드 브랜드로 매핑 ── */
.public-report-page.ir-page{
  --tool-green:var(--green);          /* #2B3F32 메인 그린 */
  --tool-green-deep:var(--green-d);   /* #21302A 딥 그린 */
  --tool-mint:var(--sage);            /* #E2E9E2 세이지 */
  --tool-paper:#fff;
  --tool-ink:var(--ink);              /* #26241F */
  --tool-muted:var(--soft);           /* #6C5F50 */
  --tool-line:var(--line);            /* #E8E2D6 */
  --tool-accent:var(--green-2);       /* #3D5647 링크 */
  --tool-shadow:0 12px 28px rgba(43,63,50,.08);
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-body);
}

/* ── 상단 히어로(프로토타입 .tophero) ── */
.workspace-hero{padding:48px 0 6px;background:var(--cream)}
.workspace-hero .shell{max-width:1180px;margin:0 auto;padding:0 32px}
.workspace-hero .eyebrow{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--brown)}
.workspace-hero h1{font-family:var(--ff-head);font-size:clamp(30px,4vw,46px);line-height:1.18;letter-spacing:-.02em;font-weight:700;color:var(--green);margin:12px 0 0}
.workspace-hero .lead{color:var(--soft);font-size:18px;line-height:1.66;max-width:60ch;margin:16px 0 0;font-weight:500}
.workspace-soon-pill{display:inline-flex;align-items:center;gap:7px;margin-top:16px;background:var(--beige);color:var(--green);font-size:13px;font-weight:800;padding:8px 15px;border-radius:999px}
.workspace-soon-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ── 앱 셸(프로토타입 .rapp 카드 룩) ──
   라이브는 .report-app(풀화면)이 기본. 작업공간는 프로토타입처럼 '카드 안의 앱'으로 보이게 셸을 박스화. */
.report-app.ir-page{min-height:0;background:var(--cream)}
/* 풀스크린 앱: 헤더(70px) 아래 화면 전체를 edge-to-edge로 채운다(카드 박스화 폐기). */
.workspace-band{padding:0;background:var(--cream)}
.workspace-band .shell{max-width:none;width:100%;margin:0;padding:0}

.report-app .rapp{
  flex:none;display:grid;grid-template-columns:264px 1fr;grid-template-rows:minmax(0,1fr);
  overflow:hidden;background:var(--cream);
  height:calc(100dvh - 70px);min-height:0;margin-top:0}
/* 내부 스크롤 체인: 행을 화면 높이에 가두고(grid-template-rows minmax 0,1fr) 각 단계 min-height:0 →
   .rc-thread(overflow-y:auto)가 실제로 스크롤됨(결과가 길어도 안 잘리고 아래까지 스크롤). */
.report-app .rapp-main{min-height:0}
.report-app .report-chat{min-height:0}
.report-app .rc-thread{min-height:0}

/* 좌측 사이드 */
.report-app .rapp-side{flex:none;width:auto;background:var(--cream-2);border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.rapp-new{background:var(--green);border-radius:10px;padding:11px;font-weight:800;font-size:14px;margin-bottom:0}
.rapp-new:hover{background:var(--green-d)}
.rapp-tabs{gap:6px;padding-bottom:0;border-bottom:0;margin-bottom:0}
.rapp-tab{gap:10px;border:1px solid transparent;border-radius:9px;padding:10px 12px;font-size:14px;font-weight:700;color:var(--brown)}
.rapp-tab:hover{background:#fff;color:var(--green)}
.rapp-tab.active{background:#fff;border-color:var(--line);color:var(--green)}
.rapp-hist-head{font-size:12px;font-weight:800;color:var(--faint);margin:6px 6px 6px;letter-spacing:.02em}
.rapp-hist{gap:4px}
.rapp-hist a{padding:9px 11px;border-radius:9px}
.rapp-hist a:hover{background:#fff}
.rapp-hist a.on{background:#fff}
.rapp-h-t{font-size:13px;font-weight:700;color:var(--green)}
.rapp-h-d{font-size:11.5px;color:var(--faint)}
.rapp-empty{font-size:12.5px;color:var(--faint);padding:8px 6px;line-height:1.65}
.rapp-side-foot{margin-top:auto;font-size:13px;font-weight:700;color:var(--soft);padding:8px 4px}
.rapp-side-foot:hover{color:var(--green);text-decoration:none}

/* 우측 챗(프로토타입 .rapp-main) */
.report-app .rapp-main{flex:1 1 auto;display:flex;min-width:0;background:var(--cream)}
.report-app .rapp{background:var(--cream)}
.report-app .report-chat{min-height:640px;background:var(--cream)}
.report-app .rc-head{
  border-radius:0;background:#fff;color:var(--green);
  border-bottom:1px solid var(--line);padding:15px 20px;gap:12px}
.report-chat .rc-av{width:36px;height:36px;border-radius:10px;background:var(--green);color:#fff;font-family:var(--ff-head);font-weight:900;font-size:16px}
.report-chat .rc-head strong{font-size:15px;color:var(--green);font-weight:800}
.report-chat .rc-head small{color:var(--faint)}
.rapp-side-toggle{color:var(--green)}

/* 스레드(프로토타입 .rc-thread 크림 배경 + 버블 톤) */
.report-app .rc-thread{background:var(--cream);padding:22px clamp(18px,3vw,28px)}
.report-chat .rc-ai .rc-bav{background:var(--green);font-family:var(--ff-head)}
.report-chat .rc-user .rc-bav{background:var(--brown)}
.report-chat .rc-ai .rc-bub{background:#fff;border:1px solid var(--line);color:var(--ink)}
.report-chat .rc-user .rc-bub{background:var(--sage);color:var(--ink)}

/* 컴포저(프로토타입 .rc-composer 둥근 입력 + 원형 보내기) */
.report-app .rc-composer{background:#fff;border-top:1px solid var(--line);padding:14px clamp(18px,3vw,28px)}
.report-chat .rc-composer input{border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink)}
.report-chat .rc-composer input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(43,63,50,.1)}
.report-chat .rc-composer button{background:var(--green)}
.report-chat .rc-composer button:hover{background:var(--green-d)}

/* 인테이크 폼·버튼 톤(프로토타입과 동일 그린) */
.report-chat .rc-btn{background:var(--green);border-color:var(--green)}
.report-chat .rc-btn:hover{background:var(--green-d)}
.report-chat .rc-btn-ghost{border:1.5px dashed var(--green);background:var(--cream-2);color:var(--green)}
.report-chat .rc-btn-ghost:hover{background:var(--sage)}
.report-chat .rc-intake input:focus,.report-chat .rc-intake textarea:focus,.report-chat .rc-intake select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(43,63,50,.1)}
.report-chat .rc-tc.rec{border-color:var(--green);background:var(--cream-2)}
.report-chat .rc-tc:hover{border-color:var(--green)}
.report-chat .rc-star{background:var(--sage);color:var(--green)}
.report-chat .rc-lk{color:var(--green);border-color:var(--line)}
.report-chat .rc-lk:hover{background:var(--sage)}
.report-chat .rc-cta{display:grid;gap:9px;align-items:start;background:linear-gradient(135deg,var(--green-d),var(--green))}
.report-chat .rc-cta-title{display:block;line-height:1.35}
.report-chat .rc-cta p{color:var(--sage)}
.report-chat .rc-cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;width:max-content;max-width:100%;line-height:1.2;white-space:nowrap;color:var(--green)}
.report-chat .rc-rh{color:var(--green)}
.report-chat .rc-rh-sub{border-left-color:var(--green)}
.report-chat .rc-report blockquote{border-left-color:var(--green);background:var(--cream-2)}
.report-chat .rc-self-evaluation{background:var(--cream-2)}
.report-chat .rc-self-evaluation-meta{color:var(--green)}
.report-chat .rc-bub{max-width:100%;overflow-wrap:anywhere}
.report-chat .rc-newround{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.report-chat .rc-newround .rc-lk,
.report-chat a.rc-lk,
.report-chat button.rc-lk{display:inline-flex;align-items:center;justify-content:center;min-height:40px;max-width:100%;line-height:1.25;text-align:center;white-space:normal}

/* ── 하단 안내(프로토타입 마무리 CTA) ── */
.workspace-foot{padding:8px 0 40px;background:var(--cream)}
.workspace-foot .shell{max-width:1180px;margin:0 auto;padding:0 32px;text-align:center}
.workspace-foot .btn.p{margin-top:24px}
.workspace-foot .hint{margin-top:12px;font-size:13px;color:var(--faint)}

/* ── 반응형 ── */
@media(max-width:760px){
  .public-report-page header.hd .shell{height:56px;padding:0 14px}
  .public-report-page header.hd .logo .logo-mark{width:28px;height:28px}
  .public-report-page header.hd .logo-word{font-size:16px}
  .public-report-page header.hd .header-actions{display:none}
  .public-report-page .workspace-band{padding:0;background:#fff}
  .workspace-band .shell{padding:0}
  .report-app .rapp{grid-template-columns:1fr;height:calc(100dvh - 56px);min-height:0;margin-top:0;border:0;border-radius:0;box-shadow:none;overflow:hidden}
  .report-app .rapp-main{min-height:0}
  .report-app .report-chat{height:calc(100dvh - 56px);min-height:0}
  .report-app .rc-head{padding:10px 12px;gap:9px}
  .report-chat .rc-av{width:30px;height:30px;border-radius:9px;font-size:14px}
  .report-chat .rc-head strong{font-size:14px}
  .report-chat .rc-head small{display:none}
  .report-app .rc-threads{min-height:0}
  .report-app .rc-thread{min-height:0;padding:16px 12px 24px;gap:10px}
  .report-chat .rc-msg{max-width:100%}
  .report-chat .rc-ai{align-self:stretch;width:100%}
  .report-chat .rc-bav{display:none}
  .report-chat .rc-bub{font-size:14px;line-height:1.58;padding:10px 12px;border-radius:12px}
  .report-chat .rc-ai .rc-bub{width:100%;box-sizing:border-box}
  .report-app .rc-composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .report-chat .rc-composer input{min-width:0;padding:11px 14px}
  .report-chat .rc-composer button{width:40px;height:40px}
  .report-chat .rc-intake{max-width:none;width:100%}
  .report-chat .rc-intake textarea.rc-ta{min-height:112px}
  .report-chat .rc-cta{gap:10px;padding:13px}
  .report-chat .rc-cta-btn{width:100%;min-height:42px}
  .report-chat .rc-newround .rc-lk,
  .report-chat a.rc-lk,
  .report-chat button.rc-lk{width:100%}
}
@media(max-width:900px){
  /* 사이드패널 반응형 단일 소스(report_chat.css 의 중복 블록은 제거됨).
     작업공간는 '카드 안의 앱'이라 .rapp(position:relative) 기준 absolute 로 슬라이드한다. */
  .report-app .rapp{position:relative}
  .report-app .rapp-side{position:absolute;z-index:40;top:0;left:0;bottom:0;width:min(320px,86vw);transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .report-app .rapp-side.open{transform:none}
  .report-app .rapp-side-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;margin:-6px 0 -6px -8px;border-radius:10px}
  .report-app .rapp-side-toggle:hover{background:var(--sage)}
  .report-app .rapp-side-close{display:inline-flex;align-items:center;gap:4px;align-self:flex-end;background:var(--sage);color:var(--green-d);border:0;border-radius:8px;padding:7px 13px;font-size:13px;font-weight:800;cursor:pointer;margin-bottom:10px}
  .report-app .rapp-backdrop.show{display:block;position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:39}
}
