/* 관리자 웹 「시뮬레이션」 탭 — 입력 틀 + 세 장면(프로그램 메인 화면·게시글·구글 1페이지).
   세 장면은 각자 실제 화면 크기(자연 크기)로 그려 놓고 transform 으로 칸에 맞춰 줄인다.
   그래서 글자는 어떤 배율에서도 선명하고, 크게 보기(라이트박스)에서는 원래 크기로 보인다.
   색은 관리자 웹(admin.css, 어두운 배경)의 변수를 쓰고, 없으면 밝은 배경용 기본값으로 떨어진다. */
.sim-root{--sim-text:var(--text,#0d1726);--sim-muted:var(--muted,#5b6b80);--sim-blue:var(--blue,#2868c7);--sim-line:var(--line,#cfd8e3);--sim-red:var(--red,#c2410c);margin-top:6px}
.sim-form{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
.sim-field{display:grid;gap:6px;min-width:0;font-size:13px;font-weight:700;color:var(--sim-text);text-align:left}
.sim-field input{width:100%;min-width:0;box-sizing:border-box}
.sim-form .sim-submit{white-space:nowrap}
.sim-hint{margin:10px 0 0;font-size:13px;color:var(--sim-muted);text-align:left}
.sim-message{margin:12px 0 0;color:var(--sim-red);font-size:14px;font-weight:700;text-align:left}
.sim-status{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--sim-muted);text-align:left}
.sim-stage{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;margin-top:26px;align-items:start}
.sim-col{display:grid;gap:26px}
.sim-shot{margin:0}
.sim-shot figcaption{margin:0 0 10px;font-size:15px;line-height:1.5;font-weight:800;color:var(--sim-text);text-align:left}
.sim-shot figcaption .n{display:inline-block;min-width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--sim-blue);color:#fff;font-size:13px;line-height:22px;text-align:center}
.sim-note{margin:10px 0 0;font-size:13px;line-height:1.5;font-weight:700;color:var(--sim-muted);text-align:left}
.sim-frame{position:relative;width:100%;overflow:hidden;border:1px solid var(--sim-line);border-radius:6px;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.25);cursor:zoom-in}
.sim-frame:focus-visible{outline:3px solid var(--sim-blue);outline-offset:2px}
.sim-canvas{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;user-select:none}
.sim-frame.loading{cursor:default}
.sim-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:280px;padding:30px;background:#fff;color:#3a4b63;font-size:14px;font-weight:700}
.sim-loading p{margin:0}
.sim-spinner{width:40px;height:40px;border:4px solid #dfe8f4;border-top-color:var(--sim-blue);border-radius:50%;animation:sim-spin .9s linear infinite}
@keyframes sim-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sim-spinner{animation-duration:2s}}
.sim-caption{margin:16px 0 0;font-size:13px;font-weight:600;color:#8a94a6;text-align:right}

/* 크게 보기 */
.sim-lightbox{position:fixed;inset:0;z-index:1000;display:none;background:rgba(13,23,38,.92)}
.sim-lightbox.open{display:block}
.sim-lightbox .sim-lb-scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:56px 16px 24px;box-sizing:border-box}
.sim-lightbox .sim-lb-inner{position:relative;margin:0 auto;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sim-lightbox .sim-canvas{pointer-events:auto}
.sim-lb-close{position:fixed;top:12px;right:14px;z-index:2;padding:9px 16px;border:0;border-radius:999px;background:#fff;color:#0d1726;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.sim-lb-title{position:fixed;top:12px;left:14px;z-index:2;margin:0;padding:8px 12px;border-radius:999px;background:rgba(13,23,38,.92);color:#fff;font-size:14px;font-weight:700}

/* ---------- 장면 1. 프로그램 메인 화면 ----------
   실제 스크린샷(Gpro_ZZirasi_pic/시뮬레이션 용 페이지1.png → assets/sim/program-bg.png, 1625x1152, 계정 상자는 흐림)을 바탕으로 깔고
   바뀌는 글자(프로필명·키워드 표·배치 줄·작업 결과 4행·작업 로그)만 그 자리에 얹는다. 작업 결과·로그는 페이지2 의
   모양을 옮긴 것이다. 글꼴은 프로그램과 같은 맑은 고딕 11pt. 좌표·색은 스크린샷에서 잰 값이다. */
.sim-program{width:1625px;height:1152px;background:#171a21 url("./sim/program-bg.png") no-repeat 0 0;font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;font-size:11pt;line-height:20px;color:#d9e2f1;overflow:hidden}
.sim-program .p{position:absolute;white-space:nowrap;overflow:hidden;text-overflow:clip}
.sim-program .p-badge{left:33px;top:134px;color:#dbeafe}
.sim-program .p-profile{left:137px;top:225px;width:880px;color:#edf3ff}
/* 키워드 표 줄: 용도 셀(실제 화면 조각) + 번호 + 키워드. 줄 높이 37px(36 + 구분선 1). */
.sim-program .p-row{position:absolute;left:25px;width:1021px;height:36px;border-bottom:1px solid #30384b;background:#1e2430}
.sim-program .p-row.alt{background:#222938}
.sim-program .p-role{position:absolute;left:0;top:0;width:136px;height:36px;padding-left:8px;box-sizing:border-box;line-height:36px;background:url("./sim/role-cell.png") no-repeat 0 0;color:#d9e2f1;white-space:nowrap}
.sim-program .p-no{position:absolute;left:140px;top:0;line-height:36px;color:#d9e2f1}
.sim-program .p-kwd{position:absolute;left:197px;right:6px;top:0;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:clip;color:#d9e2f1}
.sim-program .p-batch{left:1106px;top:426px;width:340px}
.sim-program .p-logstate{left:1109px;top:902px;color:#9aa8c3}
.sim-program .p-log{left:1122px;width:480px}
.sim-program .p-log .t{color:#7f8aa3}
.sim-program .p-log .ok{color:#4ade80}
.sim-program .p-log .hl{color:#93c5fd}
.sim-program .p-res{position:absolute;left:1108px;top:676px;width:500px;border-collapse:collapse;table-layout:fixed;font-size:11pt;line-height:20px;color:#d9e2f1}
.sim-program .p-res td{height:37px;padding:0 5px;border:1px solid #303848;border-top:0;white-space:nowrap;overflow:hidden;text-overflow:clip;vertical-align:middle}
.sim-program .p-res td:first-child{border-left:0}
.sim-program .p-res td:last-child{border-right:0}
.sim-program .p-res tr:nth-child(odd) td{background:#222938}
.sim-program .p-res tr:nth-child(even) td{background:#1e2430}
.sim-program .p-res col.c1{width:38px}
.sim-program .p-res col.c2{width:138px}
.sim-program .p-res col.c3{width:134px}
.sim-program .p-res col.c4{width:124px}
.sim-program .p-res col.c5{width:65px}

/* ---------- 장면 2. 게시판에 올라간 글(그누보드 기본 스킨 모양) ---------- */
.sim-post{width:1100px;min-height:980px;background:#fff;font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕",dotum,"돋움",sans-serif;font-size:14px;line-height:1.6;color:#000;overflow:hidden}
.sim-post *{box-sizing:border-box}
.sim-post .p-hd{height:70px;border-bottom:1px solid #e9e9e9;padding:0 30px;display:flex;align-items:center;justify-content:space-between}
.sim-post .p-logo{font-size:22px;font-weight:800;color:#222;letter-spacing:-.02em}
.sim-post .p-logo b{color:#2b6ed9}
.sim-post .p-gnb{display:flex;gap:30px;font-size:15px;font-weight:600;color:#333}
.sim-post .p-gnb span.on{color:#2b6ed9}
.sim-post .p-util{font-size:12px;color:#777}
.sim-post .p-wrap{padding:26px 30px 30px}
.sim-post .p-crumb{font-size:12px;color:#888;margin:0 0 14px}
.sim-post .p-crumb b{color:#444;font-weight:600}
.sim-post .p-board{margin:0 0 16px;font-size:22px;font-weight:700;color:#000}
.sim-post .p-title{margin:0;padding:12px 0 10px;border-top:2px solid #333;font-size:20px;font-weight:700;line-height:1.4;color:#000;word-break:keep-all}
.sim-post .p-cate{display:inline-block;margin-right:8px;padding:0 6px;border:1px solid #cfcfcf;border-radius:3px;font-size:12px;font-weight:600;color:#666;vertical-align:3px}
.sim-post .p-info{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;font-size:13px;color:#666}
.sim-post .p-avatar{width:30px;height:30px;border-radius:50%;background:#dbe0e6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle cx='15' cy='11' r='5.5' fill='%23fff'/><path d='M4 27c1-6 5-9 11-9s10 3 11 9z' fill='%23fff'/></svg>") no-repeat center/30px}
.sim-post .p-info .nm{font-weight:700;color:#000}
.sim-post .p-info .sep{color:#ccc}
.sim-post .p-info .r{margin-left:auto;display:flex;gap:14px}
.sim-post .p-con{padding:28px 6px 24px;font-size:15px;line-height:1.75;color:#000;word-break:keep-all;overflow-wrap:anywhere}
.sim-post .p-con p{margin:0 0 18px}
.sim-post .p-con p.tight{margin:0 0 4px}
.sim-post .p-con a{color:#1a5fd1;text-decoration:underline}
.sim-post .p-con .tags{color:#1a5fd1;font-size:14px}
.sim-post .p-act{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid #e9e9e9}
.sim-post .p-act div{display:flex;gap:4px}
.sim-post .p-btn{display:inline-block;padding:0 12px;height:36px;line-height:34px;border:1px solid #c3c8ce;border-radius:3px;background:#dbe0e6;color:#000;font-size:13px;font-weight:600}
.sim-post .p-btn.dark{background:#555;border-color:#444;color:#fff}
.sim-post .p-btn.blue{background:#3a8af5;border-color:#2f7de6;color:#fff}
.sim-post .p-cmt{margin-top:10px;padding:14px 0 0;border-top:1px solid #e9e9e9}
.sim-post .p-cmt h3{margin:0 0 12px;font-size:15px;font-weight:700}
.sim-post .p-cmt h3 span{color:#2b6ed9}
.sim-post .p-cmt .ta{height:70px;border:1px solid #d8d8d8;border-radius:3px;background:#fafafa}
.sim-post .p-cmt .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:#777}

/* ---------- 장면 3. 구글 검색 1페이지 ----------
   실제 1페이지 스크린샷(1483px, 125% 배율)에서 잰 위치·크기를 그대로 쓴다. 로고·아이콘·기본 파비콘은 그 스크린샷에서 잘라 낸 조각이다. */
.sim-serp{width:1483px;padding:0 0 60px;background:#fff;font-family:arial,"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;color:#202124;overflow:hidden}
.sim-serp *{box-sizing:border-box}
.sim-serp .g-top{position:relative;height:195px}
.sim-serp .g-logo{position:absolute;left:83px;top:43px;width:118px;height:40px}
.sim-serp .g-box{position:absolute;left:245px;top:24px;width:1097px;height:86px;border-radius:43px;background:#fff;box-shadow:0 1px 6px rgba(32,33,36,.28)}
.sim-serp .g-q{position:absolute;left:38px;top:0;height:86px;line-height:86px;font-size:20px;color:#202124;white-space:nowrap}
.sim-serp .g-ic{position:absolute;top:0}
.sim-serp .g-x{left:882px;top:29px;width:21px;height:21px}
.sim-serp .g-vr{position:absolute;left:918px;top:25px;width:1px;height:36px;background:#dadce0}
.sim-serp .g-kbd{left:935px;top:28px;width:32px;height:24px}
.sim-serp .g-mic{left:989px;top:24px;width:24px;height:31px}
.sim-serp .g-lens{left:1036px;top:25px;width:30px;height:30px}
.sim-serp .g-tabs{position:absolute;left:283px;top:132px;display:flex;gap:0;font-size:17.5px;line-height:26px;color:#4d5156;white-space:nowrap}
.sim-serp .g-tabs span{position:relative;padding:0 15px 12px;}
.sim-serp .g-tabs span:first-child{padding-left:0}
.sim-serp .g-tabs span.on{color:#1f1f1f}
.sim-serp .g-tabs span.on::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:3px;background:#1f1f1f;border-radius:3px 3px 0 0}
.sim-serp .g-tabs span:first-child.on::after{left:0}
.sim-serp .g-tabs span.more::after{content:"";display:inline-block;margin-left:7px;border:5px solid transparent;border-top-color:#4d5156;border-bottom:0;vertical-align:2px}
.sim-serp .g-line{position:absolute;left:245px;right:0;top:170px;height:1px;background:#e8eaed}
.sim-serp .g-list{width:815px;margin-left:281px}
.sim-serp .g-r{position:relative;margin:0 0 42px}
.sim-serp .g-r.me{outline:3px solid #ff1f1f;outline-offset:12px;border-radius:2px}
.sim-serp .g-src{display:flex;align-items:center;gap:0;height:44px}
.sim-serp .g-fav{flex:none;width:32px;height:32px;border-radius:50%;background:#f1f3f4;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sim-serp .g-fav img{width:22px;height:22px;object-fit:contain;display:block}
.sim-serp .g-fav.plain{background:transparent}
.sim-serp .g-fav.plain img{width:32px;height:32px;border-radius:50%}
.sim-serp .g-meta{margin-left:17px;line-height:1}
.sim-serp .g-site{font-size:17.5px;line-height:21px;color:#202124;white-space:nowrap}
.sim-serp .g-url{display:flex;align-items:center;gap:0;margin-top:5px;font-size:15px;line-height:18px;color:#4d5156;white-space:nowrap}
.sim-serp .g-url img{width:11px;height:21px;margin-left:16px}
.sim-serp .g-t{display:block;margin-top:9px;font-size:25px;line-height:32px;color:#1a0dab;text-decoration:none;word-break:keep-all;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-serp .g-s{margin-top:7px;font-size:17.5px;line-height:28px;color:#4d5156;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sim-serp .g-s b{font-weight:700;color:#4d5156}
.sim-serp .g-s .d{color:#70757a}

@media (max-width:1000px){
  .sim-form{grid-template-columns:1fr 1fr}
  .sim-form .sim-submit{grid-column:1 / -1;width:100%}
  .sim-stage{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sim-form{grid-template-columns:1fr;gap:10px}
  .sim-shot figcaption{font-size:14px}
  .sim-lightbox .sim-lb-scroll{padding:52px 8px 16px}
}