/* KOROPOP CAREER original deep-dive article system — 2026-10-14 */
:root{--deep-ink:#203d43;--deep-accent:#226f5f;--deep-line:#dce7e3}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#f7faf9;color:var(--deep-ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif}
.skip-deep{position:absolute;left:-9999px;top:6px;z-index:100;background:#fff;padding:8px}.skip-deep:focus{left:8px}
.deep-header{background:#fff;border-bottom:1px solid var(--deep-line)}
.deep-header-inner{max-width:1100px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.deep-logo{color:#205b50;font-weight:900;font-size:17px;letter-spacing:.02em;text-decoration:none}
.deep-header nav{display:flex;gap:15px;flex-wrap:wrap}
.deep-header nav a{font-size:13px;color:#355e59;text-decoration:none}
.deep-wrap{width:min(960px,calc(100% - 32px));margin:0 auto;padding:28px 0 70px}
.deep-crumb{font-size:12px;color:#6b7c81;line-height:1.7;margin:0 0 25px}.deep-crumb a{color:#286f62;text-underline-offset:3px}
.deep-kicker{font-size:11px;letter-spacing:.13em;font-weight:850;color:#2b806e}
.deep-wrap h1{font-size:clamp(28px,4.5vw,40px);line-height:1.42;letter-spacing:-.035em;margin:12px 0 13px}
.deep-lead{font-size:16px;line-height:1.95;max-width:780px;color:#49656a}
.deep-meta{font-size:12px;line-height:1.8;color:#67818a;margin:13px 0 22px}
.deep-summary{padding:18px 23px;background:#eaf5ef;border:1px solid #bdd8cc;border-radius:10px;margin:23px 0}
.deep-summary strong{font-size:14px;color:#27584f}.deep-summary p{margin:6px 0 0;font-size:14px;line-height:1.9}
.deep-toc{border:1px solid var(--deep-line);border-radius:10px;background:#fff;padding:20px 23px;margin:28px 0 35px}
.deep-toc>strong{font-size:15px}.deep-toc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 15px;list-style:none;margin:10px 0 0;padding:0}.deep-toc a{font-size:13px;line-height:1.7;color:#26685d;text-decoration:underline;text-underline-offset:3px}
.deep-wrap section{scroll-margin-top:22px;margin:36px 0}
.deep-wrap section>h2{font-size:clamp(20px,2.7vw,26px);line-height:1.5;letter-spacing:-.025em;border-left:4px solid #448f79;padding-left:12px;margin:0 0 14px}
.deep-wrap h3{font-size:17px;line-height:1.5;margin:22px 0 8px}
.deep-wrap p,.deep-wrap li{font-size:15px;line-height:1.95;color:#425a61}
.deep-wrap ul,.deep-wrap ol{padding-left:22px}.deep-wrap li{margin:6px 0}
.deep-wrap a{color:#1b725e;text-underline-offset:3px;overflow-wrap:anywhere}
.deep-table-scroll{overflow-x:auto;border:1px solid var(--deep-line);border-radius:9px;margin:19px 0;background:#fff}
.deep-table{width:100%;border-collapse:collapse;min-width:600px;font-size:13px}
.deep-table th,.deep-table td{border-bottom:1px solid #e1eae7;padding:13px 12px;vertical-align:top;text-align:left;line-height:1.85;overflow-wrap:anywhere}
.deep-table thead th{background:#e9f3ef;color:#234f45}
.deep-table tbody th{background:#f8fbf9;min-width:105px}
.deep-table tbody tr:last-child td,.deep-table tbody tr:last-child th{border-bottom:0}
.deep-note{font-size:12px!important;line-height:1.9!important;color:#678084!important;margin:7px 0 19px}
.deep-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0}
.deep-card{background:#fff;border:1px solid var(--deep-line);border-radius:9px;padding:18px 20px;min-width:0}
.deep-card h3{margin:0 0 6px;font-size:17px}.deep-card p{font-size:13px;margin:6px 0}
.deep-example{border-left:4px solid #87b3a6;border-radius:6px;padding:17px 20px;background:#fff;margin:19px 0}
.deep-example strong{color:#2a5e56}
.deep-example p{font-size:14px;margin:6px 0}
.deep-list{list-style:none;padding:0!important;counter-reset:step}
.deep-list li{counter-increment:step;border:1px solid var(--deep-line);padding:14px 16px 14px 55px;position:relative;border-radius:9px;background:#fff;margin:10px 0;font-size:14px}
.deep-list li:before{content:counter(step,decimal-leading-zero);position:absolute;left:14px;top:14px;color:#317b69;font-size:12px;font-weight:900}
.deep-cta{padding:20px 22px;background:#eaf5ef;border-radius:10px;border:1px solid #c3ded1;margin:25px 0}
.deep-cta h3{margin-top:0}.deep-cta p{font-size:14px;margin:10px 0}
.deep-cta a{display:inline-flex;align-items:center;min-height:43px;background:#216b5b;color:#fff;text-decoration:none;padding:10px 15px;border-radius:7px;font-weight:800;font-size:13px}
.deep-cta a:hover{background:#155344}
.deep-sources{font-size:13px}.deep-sources li{font-size:13px}
.deep-faq details{border:1px solid #dbe8e2;background:#fff;margin:9px 0;border-radius:9px;padding:14px 16px}
.deep-faq summary{cursor:pointer;color:#225b51;font-weight:800;line-height:1.7}
.deep-faq details p{margin:12px 0 4px;font-size:14px}
.deep-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.deep-related a{padding:15px 16px;background:#fff;border:1px solid var(--deep-line);border-radius:8px;font-size:14px;font-weight:800;text-decoration:none;line-height:1.7}
.deep-related a:hover{background:#eef7f2}
.deep-footer{border-top:1px solid #e0ebe5;background:#fff;padding:24px 18px;text-align:center;color:#607a79;font-size:12px}
.deep-footer a{color:#1c6857;margin:0 8px}
.deep-form{padding:20px;border:1px solid #c9dfd3;background:#f0f8f3;border-radius:11px}
.deep-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.deep-form label{display:block;font-size:13px;font-weight:800;line-height:1.7}
.deep-form input,.deep-form textarea,.deep-form select{width:100%;font:inherit;font-size:15px;color:#234149;display:block;border:1px solid #a6c9bb;border-radius:7px;background:#fff;padding:10px 11px;min-height:44px;margin-top:6px}
.deep-form textarea{min-height:100px;resize:vertical}
.deep-form button{min-height:44px;border:0;border-radius:6px;background:#216b5a;color:#fff;font-weight:850;font-size:14px;padding:11px 17px;cursor:pointer;margin:14px 9px 9px 0}
.deep-form button:focus-visible,.deep-wrap a:focus-visible,.deep-faq summary:focus-visible{outline:3px solid #52a887;outline-offset:3px}
.deep-form pre{font-size:13px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;padding:17px;border:1px solid #d4e5da;border-radius:8px;color:#2f4c50}
.deep-form .form-status{font-size:13px;color:#236e59;min-height:1.8em}
@media(max-width:680px){.deep-header-inner{padding:13px 16px}.deep-header nav{gap:10px}.deep-wrap{width:calc(100% - 28px);padding-top:22px}.deep-lead{font-size:15px}.deep-toc{padding:15px 17px}.deep-toc ul,.deep-cards,.deep-related,.deep-form-grid{grid-template-columns:1fr}.deep-wrap section{margin:28px 0}.deep-wrap p,.deep-wrap li{font-size:15px}.deep-table th,.deep-table td{font-size:12px;padding:11px 9px}.deep-form{padding:16px 13px}}

/* Seven-step kitting self-study worksheet; large touch targets, no save tracking. */
.deep-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 22px}
.deep-checks label{display:flex;align-items:flex-start;gap:11px;min-height:52px;padding:12px 13px;background:#fff;border:1px solid #c9ded4;border-radius:8px;font-size:13px;line-height:1.75;font-weight:650;cursor:pointer}
.deep-checks input[type="checkbox"]{flex:0 0 19px;width:19px;height:19px;min-height:19px;margin:3px 0 0;accent-color:#226f5f}
.deep-checks label:has(input:checked){background:#e4f2e9;border-color:#77ad98}
.deep-checks input:focus-visible{outline:3px solid #4fa483;outline-offset:3px}
@media(max-width:700px){.deep-checks{grid-template-columns:1fr}.deep-checks label{font-size:14px;min-height:54px}}

/* Original IT interview question cards, 20 prompts, reading and touch-accessible. */
.interview-questions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:19px 0 27px}
.interview-question{background:#fff;border:1px solid #d7e5df;border-radius:10px;padding:17px 19px;min-width:0;scroll-margin-top:24px}
.interview-question h3{margin:0 0 11px!important;font-size:16px!important;line-height:1.65!important;letter-spacing:-.01em}
.interview-question h3 span{display:inline-block;background:#e7f2ec;color:#236c5b;padding:2px 7px;border-radius:5px;font-size:11px;margin-right:7px;vertical-align:middle}
.interview-question p{font-size:13px!important;line-height:1.88!important;color:#425d61!important;margin:7px 0!important}
.interview-question .caution{color:#7f5552!important}
.interview-question .practice-link{display:inline-flex;min-height:42px;align-items:center;font-size:12px;font-weight:760;margin-top:6px;padding:8px 10px;background:#edf7f1;border-radius:6px}
.interview-question .practice-link:focus-visible{outline:3px solid #52a887;outline-offset:2px}
#mockInterviewTool textarea{min-height:96px}
@media(max-width:700px){.interview-questions{grid-template-columns:1fr;gap:10px}.interview-question{padding:15px 15px}.interview-question h3{font-size:16px!important}.interview-question p{font-size:14px!important}}

/* Three-step local resume worksheet helps first-time job seekers complete the tool. */
.resume-workflow{list-style:none!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0!important;margin:16px 0!important}
.resume-workflow li{display:flex;align-items:center;gap:10px;min-height:70px;border:1px solid #d3e6db;border-radius:9px;background:#fff;padding:12px!important;margin:0!important;font-size:13px!important;line-height:1.6!important;color:#32554d!important;font-weight:700}
.resume-workflow li strong{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:100%;background:#e1f2e8;color:#236a54;font-size:11px}
@media(max-width:680px){.resume-workflow{grid-template-columns:1fr;gap:7px}.resume-workflow li{min-height:49px;padding:10px 12px!important;font-size:14px!important}}

/* Interview practice: prevent stale-copy mistakes and keep all controls thumb-friendly. */
.interview-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px}
.interview-toolbar button{margin:0;min-height:46px;flex:1 1 145px}
.interview-toolbar #createInterviewMemo{flex:2 1 190px}
.interview-toolbar #clearInterviewMemo{background:#fff;color:#286654;border:1px solid #a7cabc}
.interview-toolbar button:disabled{opacity:.45;cursor:not-allowed}
.interview-count{font-size:13px;line-height:1.8;margin:10px 0 0;color:#325e55;font-weight:700}
.interview-switch-note{font-size:13px;margin:8px 0 17px}
@media(max-width:600px){.interview-toolbar{display:grid;grid-template-columns:1fr 1fr}.interview-toolbar #createInterviewMemo{grid-column:1/-1}.interview-toolbar button{width:100%;font-size:14px}}

/* Side-by-side, fully visible (no JS) timeline explaining two different kinds of internal IT day. */
.day-compare-head{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0 18px}
.day-compare-head a{display:inline-flex;min-height:44px;align-items:center;padding:8px 14px;border:1px solid #badacb;border-radius:7px;background:#fff;color:#225c51;text-decoration:none;font-size:13px;font-weight:800}
.day-compare-head a:hover{background:#e9f5ef}
.day-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px;margin:18px 0 26px;align-items:start}
.day-model{background:#fff;border:1px solid #cfdfd7;border-radius:13px;overflow:hidden;min-width:0;scroll-margin-top:32px}
.day-model header{padding:22px 22px 16px;background:#e8f4ed;border-bottom:1px solid #d6e6de}
.day-model:nth-child(2) header{background:#eef2fa;border-bottom-color:#d9e3f3}
.day-model-label{font-size:11px;font-weight:900;letter-spacing:.08em;color:#326b5e}
.day-model:nth-child(2) .day-model-label{color:#4e6494}
.day-model h3{font-size:20px;margin:6px 0 8px;line-height:1.48;color:#1b4840}
.day-model:nth-child(2) h3{color:#2d466c}
.day-model header p{font-size:13px;line-height:1.8;margin:0}
.day-timeline{list-style:none;margin:0!important;padding:17px 16px 20px 22px!important}
.day-timeline li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;position:relative;min-width:0;margin:0!important;padding:0 0 20px!important}
.day-timeline li::before{content:"";position:absolute;left:65px;top:17px;bottom:0;width:2px;background:#dae9e1}
.day-timeline li:last-child{padding-bottom:0!important}
.day-timeline li:last-child::before{display:none}
.day-timeline time{font-variant-numeric:tabular-nums;color:#216c58;font-size:12px;font-weight:900;line-height:1.8;padding-top:4px}
.day-model:nth-child(2) .day-timeline time{color:#496a99}
.day-timeline li>div{border-left:3px solid #88baa5;background:#f7faf8;padding:12px 14px;border-radius:0 8px 8px 0;min-width:0;position:relative}
.day-model:nth-child(2) .day-timeline li>div{border-left-color:#98aad1;background:#f7f9fd}
.day-timeline h4{margin:0 0 5px;color:#244940;font-size:14px;line-height:1.6}
.day-timeline li p{font-size:13px;line-height:1.8;margin:0;color:#4b6060}
.day-diff-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.day-diff-list article{display:flex;gap:13px;align-items:start;background:#fff;border:1px solid #dce8e1;border-radius:10px;padding:16px 18px}
.day-diff-list article>span{flex:none;border-radius:7px;padding:3px 8px;background:#e5f2ea;color:#2c7460;font-size:12px;font-weight:900}
.day-diff-list h3{margin:0 0 5px;font-size:16px}.day-diff-list p{font-size:13px;line-height:1.85;margin:0}
@media(max-width:760px){.day-models,.day-diff-list{grid-template-columns:1fr}.day-model header{padding:18px}.day-timeline{padding:15px!important}.day-timeline li{grid-template-columns:50px minmax(0,1fr);gap:9px}.day-timeline li::before{left:57px}.day-timeline li>div{padding:12px}.day-timeline li p{font-size:14px}.day-diff-list p{font-size:14px}}
@media(max-width:375px){.day-timeline{padding:12px 10px!important}.day-timeline li{grid-template-columns:44px minmax(0,1fr);gap:7px}.day-timeline li::before{left:50px}.day-model h3{font-size:18px}.day-model header{padding:15px}}