/* LayerLab V2 typography-first translation.
   Reference canvases: 1717–1846 × 852–916. Decorative hero imagery comes from
   the existing LayerLab exports; every label, metric, note and action remains DOM data. */

body[data-sn-task="note"]{
  --v2-ink:#071b49;
  --v2-copy:#314b72;
  --v2-muted:#64799b;
  --v2-line:#d8e4f4;
  --v2-soft:#f5f9ff;
  color:var(--v2-ink);
  font-family:Pretendard,"SUIT Variable",SUIT,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
  font-size:15px;
  line-height:1.6;
  letter-spacing:-.018em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body[data-sn-task="note"][data-subject="korean"]{--accent:#0868f3;--accent-2:#1478ff;--accent-deep:#0759dc}
body[data-sn-task="note"][data-subject="english"]{--accent:#1767ea;--accent-2:#247bff;--accent-deep:#0d56d0}
body[data-sn-task="note"][data-subject="math"]{--accent:#0968ed;--accent-2:#1d7cff;--accent-deep:#0758cf}
body[data-sn-task="note"][data-subject="social"]{--accent:#0870e8;--accent-2:#2084f3;--accent-deep:#0758ce}
body[data-sn-task="note"][data-subject="science"]{--accent:#0875d9;--accent-2:#12a7bc;--accent-deep:#075cbf}
body[data-sn-task="note"][data-subject="history"]{--accent:#166ce5;--accent-2:#2882eb;--accent-deep:#1056bd}
body[data-sn-task="note"][data-subject="history_cert"]{--accent:#0868e8;--accent-2:#1483ff;--accent-deep:#063b82}

.learning-insights{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:12px;margin:14px 0 0}
.learning-insight{
  min-width:0;min-height:94px;display:flex;align-items:center;gap:14px;padding:17px 19px;
  border:1px solid var(--v2-line);border-radius:13px;background:#fff;box-shadow:0 4px 15px rgba(30,55,95,.045)
}
.learning-insight.strength{background:linear-gradient(100deg,#f2fcf8,#fff)}
.learning-insight.improve{background:linear-gradient(100deg,#fff8ed,#fff)}
.learning-insight.next-unit{background:linear-gradient(100deg,#f5f8ff,#fff)}
.insight-symbol{width:46px;height:46px;display:grid;place-items:center;flex:none;border-radius:13px;background:#e9f4ff;color:#0969ea;font-size:24px;font-weight:900}
.strength .insight-symbol{background:#e2f8ef;color:#079664}.improve .insight-symbol{background:#fff0df;color:#f07b13}.next-unit .insight-symbol{background:#ecebff;color:#5c42e8}
.learning-insight>div{min-width:0;flex:1}.learning-insight h2{margin:0 0 3px;color:var(--v2-ink);font-size:17px;line-height:1.3;font-weight:850;letter-spacing:-.035em}
.learning-insight.strength h2{color:#078a59}.learning-insight.improve h2{color:#df6c0a}.learning-insight.next-unit h2{color:#4f3fce}
.learning-insight p{margin:0;color:var(--v2-copy);font-size:14px;line-height:1.55;font-weight:550;word-break:keep-all;overflow-wrap:anywhere}
.learning-insight button{height:38px;flex:none;padding:0 13px;border:1px solid #b9d3fb;border-radius:9px;background:#fff;color:#0867dc;font:750 13px inherit;cursor:pointer}
.learning-insight button:hover{background:#edf5ff}.learning-insight button:disabled{display:none}

@media(min-width:1024px){
  body[data-sn-shell][data-sn-task="note"] .topbar{height:74px;padding:0 24px 0 28px}
  body[data-sn-shell][data-sn-task="note"] .brand b{font-size:30px;line-height:1.1;font-weight:900;color:var(--v2-ink);letter-spacing:-.055em}
  body[data-sn-shell][data-sn-task="note"] .subject-picker select{height:44px;min-width:165px;padding-left:45px;border-color:#cedcf0;font-size:15px;font-weight:750;color:var(--v2-ink)}
  body[data-sn-shell][data-sn-task="note"] .top-actions{gap:11px}
  body[data-sn-shell][data-sn-task="note"] .top-nav-action,
  body[data-sn-shell][data-sn-task="note"] .icon-button,
  body[data-sn-shell][data-sn-task="note"] .top-user{height:44px;font-size:14px;font-weight:750}
  body[data-sn-shell][data-sn-task="note"] .page{padding:0 18px 54px}

  body[data-sn-shell][data-sn-task="note"] .hero{height:164px;min-height:164px;padding:23px 22px;border-color:#cbdcf3;border-radius:13px;background:linear-gradient(105deg,#fff 0,#fbfdff 47%,#eef6ff 100%)}
  body[data-sn-shell][data-sn-task="note"] .hero-copy{position:relative;z-index:3;max-width:62%}
  body[data-sn-shell][data-sn-task="note"] .hero h1{max-width:780px;color:var(--v2-ink);font-family:inherit;font-size:27px;line-height:1.3;font-weight:900;letter-spacing:-.05em;word-break:keep-all}
  body[data-sn-shell][data-sn-task="note"] .hero p{max-width:720px;margin-top:7px;color:var(--v2-copy);font-size:15px;line-height:1.55;font-weight:520;word-break:keep-all}
  body[data-sn-shell][data-sn-task="note"] .auto-status{left:22px;bottom:18px;height:35px;padding:0 14px;font-size:14px;font-weight:750}
  body[data-sn-shell][data-sn-task="note"] .hero-art{right:90px;top:5px;width:40%;height:154px;object-fit:contain;object-position:right center;opacity:.96}
  body[data-sn-shell][data-sn-task="note"][data-subject="history_cert"] .hero{border-color:#164778;background:linear-gradient(105deg,#082e59,#063d72 58%,#092b50);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  body[data-sn-shell][data-sn-task="note"][data-subject="history_cert"] .hero h1,
  body[data-sn-shell][data-sn-task="note"][data-subject="history_cert"] .hero p{color:#fff}
  body[data-sn-shell][data-sn-task="note"][data-subject="history_cert"] .hero p{color:#dcecff}
  body[data-sn-shell][data-sn-task="note"][data-subject="history_cert"] .hero-art{mix-blend-mode:screen;opacity:.72}

  body[data-sn-shell][data-sn-task="note"] .overview-row{grid-template-columns:minmax(560px,1.05fr) minmax(500px,.95fr);gap:12px;margin-top:13px}
  body[data-sn-shell][data-sn-task="note"] .metrics{gap:9px}
  body[data-sn-shell][data-sn-task="note"] .metric{height:92px;min-height:92px;padding:0 14px;gap:12px;border:1px solid var(--v2-line);border-radius:12px;box-shadow:0 4px 13px rgba(30,55,95,.045)}
  body[data-sn-shell][data-sn-task="note"] .metric-icon{width:46px;height:46px;border-radius:12px}
  body[data-sn-shell][data-sn-task="note"] .metric small{color:var(--v2-copy);font-size:13px;line-height:1.3;font-weight:650}
  body[data-sn-shell][data-sn-task="note"] .metric b{margin-top:3px;color:var(--v2-ink);font-size:25px;line-height:1.1;font-weight:900}
  body[data-sn-shell][data-sn-task="note"] .metric em{font-size:13px;font-weight:700}
  body[data-sn-shell][data-sn-task="note"] .study-flow{display:flex;height:92px;padding:13px 17px;gap:15px;border-color:var(--v2-line);border-radius:12px}
  body[data-sn-shell][data-sn-task="note"] .flow-title{min-width:123px;padding-right:15px}
  body[data-sn-shell][data-sn-task="note"] .flow-title b{color:var(--v2-ink);font-size:16px;line-height:1.35;font-weight:850}
  body[data-sn-shell][data-sn-task="note"] .flow-step{min-width:0;gap:8px}
  body[data-sn-shell][data-sn-task="note"] .flow-step i{width:35px;height:35px;font-size:13px}
  body[data-sn-shell][data-sn-task="note"] .flow-step b{font-size:13px;line-height:1.3;font-weight:800;white-space:nowrap}
  body[data-sn-shell][data-sn-task="note"] .flow-step small{font-size:11px;line-height:1.35;white-space:nowrap}

  body[data-sn-shell][data-sn-task="note"] .workspace{grid-template-columns:minmax(0,2.55fr) minmax(325px,.92fr);gap:14px;margin-top:14px}
  body[data-sn-shell][data-sn-task="note"] .workspace-main{border-color:var(--v2-line);border-radius:13px}
  body[data-sn-shell][data-sn-task="note"] .workspace-head{height:55px;padding:0 16px}
  body[data-sn-shell][data-sn-task="note"] .tab{height:55px;padding:0 18px;color:#3d5579;font-size:14px;font-weight:750}
  body[data-sn-shell][data-sn-task="note"] .tab.active{color:var(--accent)}
  body[data-sn-shell][data-sn-task="note"] .workspace-body{padding:13px 14px 18px}
  body[data-sn-shell][data-sn-task="note"] .tools{grid-template-columns:minmax(240px,1fr) 128px 128px;gap:10px;margin:0 150px 13px 0}
  body[data-sn-shell][data-sn-task="note"] .search input,
  body[data-sn-shell][data-sn-task="note"] .select-wrap select{height:41px;border-color:#d2dff0;border-radius:9px;color:var(--v2-copy);font-size:13px;font-weight:600}
  body[data-sn-shell][data-sn-task="note"] .head-cta{right:14px;top:69px;height:41px;padding:0 15px;border-radius:9px;font-size:13px;font-weight:800}
  body[data-sn-shell][data-sn-task="note"] .list-head{min-height:33px;margin-bottom:10px;color:var(--v2-muted);font-size:13px}
  body[data-sn-shell][data-sn-task="note"] .list-head>span:first-child{color:var(--v2-ink);font-size:20px;font-weight:900}
  body[data-sn-shell][data-sn-task="note"] .note-list{gap:10px}
  body[data-sn-shell][data-sn-task="note"] .note-card{padding:14px 15px;border-color:#dce6f3;border-radius:11px;background:#fff;box-shadow:0 2px 7px rgba(30,55,95,.035)}
  body[data-sn-shell][data-sn-task="note"] .note-card:hover{border-color:#b8d0f3;box-shadow:0 7px 20px rgba(30,75,150,.08)}
  body[data-sn-shell][data-sn-task="note"] .note-head{gap:12px}
  body[data-sn-shell][data-sn-task="note"] .note-icon{height:30px;padding:0 11px;border-radius:7px;font-size:13px;font-weight:850}
  body[data-sn-shell][data-sn-task="note"] .note-kicker{font-size:11px;line-height:1.3;font-weight:850;letter-spacing:.02em}
  body[data-sn-shell][data-sn-task="note"] .note-title{margin-top:2px;color:var(--v2-ink);font-size:16px!important;line-height:1.5;font-weight:850;letter-spacing:-.025em}
  body[data-sn-shell][data-sn-task="note"] .note-meta{margin-top:6px;color:var(--v2-muted);font-size:13px;line-height:1.5}
  body[data-sn-shell][data-sn-task="note"] .note-meta b{color:var(--v2-copy);font-weight:700}
  body[data-sn-shell][data-sn-task="note"] .source{color:var(--v2-muted);font-size:12px;font-weight:650}
  body[data-sn-shell][data-sn-task="note"] .note-summary{margin-top:10px;padding:12px 13px;border-radius:9px;color:var(--v2-copy);font-size:14px;line-height:1.65;font-weight:500}
  body[data-sn-shell][data-sn-task="note"] .note-summary b{margin-bottom:2px;color:var(--v2-ink);font-size:13px;font-weight:850}
  body[data-sn-shell][data-sn-task="note"] .note-foot{margin-top:10px;gap:12px}
  body[data-sn-shell][data-sn-task="note"] .note-tags{gap:6px}
  body[data-sn-shell][data-sn-task="note"] .note-tags span{padding:5px 9px;border-radius:7px;font-size:12px;line-height:1.3;font-weight:650}
  body[data-sn-shell][data-sn-task="note"] .note-actions{gap:7px}
  body[data-sn-shell][data-sn-task="note"] .note-actions button{height:35px;min-height:35px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:750}

  body[data-sn-shell][data-sn-task="note"] .rail{gap:11px}
  body[data-sn-shell][data-sn-task="note"] .rail-card{padding:16px;border-color:var(--v2-line);border-radius:13px}
  body[data-sn-shell][data-sn-task="note"] .rail-card h2{color:var(--v2-ink);font-size:17px;line-height:1.35;font-weight:850}
  body[data-sn-shell][data-sn-task="note"] .rail-card p{color:var(--v2-copy);font-size:13px;line-height:1.55}
  body[data-sn-shell][data-sn-task="note"] .rail-more{font-size:12px;font-weight:750}
  body[data-sn-shell][data-sn-task="note"] .review-count strong{font-size:31px}.review-count span{font-size:13px}
  body[data-sn-shell][data-sn-task="note"] .review-ring{width:94px;height:94px}.review-ring strong{font-size:24px}.review-ring span{font-size:12px}
  body[data-sn-shell][data-sn-task="note"] .next-review-row b{font-size:13px;line-height:1.45}.next-review-row span{font-size:12px;line-height:1.45}
  body[data-sn-shell][data-sn-task="note"] .streak-body strong{font-size:34px}

  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-banner h1{font-size:27px;font-weight:900;color:var(--v2-ink)}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-banner p{font-size:15px;color:var(--v2-copy)}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-stat>div>span{font-size:14px;font-weight:650}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-stat strong{font-size:29px;font-weight:900}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-row-heading>b,
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-analysis-left .ng-row-heading>b{font-size:15px;line-height:1.5;font-weight:850}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-row-heading>time,
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-analysis-left .ng-row-heading>time{font-size:12px}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-question,
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-analysis-left .ng-question{font-size:17px;line-height:1.5;font-weight:700}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-insight{min-height:38px;font-size:14px;line-height:1.55}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-insight>b{min-height:38px;font-size:13px;font-weight:800}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-analysis-right .ng-button{min-height:41px;font-size:13px;font-weight:750}
  body[data-sn-shell][data-sn-task="note"].navi-notebook .ng-unavailable{font-size:12px}
}

@media(min-width:1024px) and (max-width:1439px){
  body[data-sn-shell][data-sn-task="note"] .hero-copy{max-width:57%}
  body[data-sn-shell][data-sn-task="note"] .hero-art{right:45px;width:39%;opacity:.83}
  body[data-sn-shell][data-sn-task="note"] .overview-row{grid-template-columns:1fr}
  body[data-sn-shell][data-sn-task="note"] .study-flow{width:100%}
  .learning-insights{grid-template-columns:1fr 1fr}.learning-insight.next-unit{grid-column:1/-1}
  body[data-sn-shell][data-sn-task="note"] .workspace{grid-template-columns:minmax(0,1fr) 300px}
}

@media(min-width:1024px) and (max-width:1219px){
  body[data-sn-shell][data-sn-task="note"] .workspace{grid-template-columns:1fr}
  body[data-sn-shell][data-sn-task="note"] .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1023px){
  body[data-sn-task="note"]{font-size:15px}
  .learning-insights{grid-template-columns:1fr;margin:18px 0;gap:10px}
  .learning-insight{min-height:88px;padding:15px 16px}
  .learning-insight h2{font-size:17px}.learning-insight p{font-size:14px}.learning-insight button{font-size:13px}
  body[data-sn-task="note"] .note-title{font-family:inherit!important;font-size:16px!important;line-height:1.55!important}
  body[data-sn-task="note"] .note-meta{font-size:13px!important;line-height:1.55!important}
  body[data-sn-task="note"] .note-summary{font-size:14px!important;line-height:1.7!important}
  body[data-sn-task="note"] .note-summary b{font-size:14px!important}
  body[data-sn-task="note"] .note-tags span{font-size:12px!important}
  body[data-sn-task="note"] .note-actions button{font-size:13px!important}
  body[data-sn-task="note"].navi-notebook .ng-banner p{font-size:13px}
  body[data-sn-task="note"].navi-notebook .ng-stat>div>span{font-size:12px}
  body[data-sn-task="note"].navi-notebook .ng-row-heading>b,
  body[data-sn-task="note"].navi-notebook .ng-analysis-left .ng-row-heading>b{font-size:14px}
  body[data-sn-task="note"].navi-notebook .ng-question,
  body[data-sn-task="note"].navi-notebook .ng-analysis-left .ng-question{font-size:16px;line-height:1.55}
  body[data-sn-task="note"].navi-notebook .ng-insight{font-size:13px;line-height:1.55;white-space:normal}
  body[data-sn-task="note"].navi-notebook .ng-insight>span{white-space:normal}
  body[data-sn-task="note"].navi-notebook .ng-button{font-size:12px}
}

@media(max-width:600px){
  .learning-insight{align-items:flex-start}.insight-symbol{width:40px;height:40px;border-radius:11px;font-size:20px}
  .learning-insight.next-unit{flex-wrap:wrap}.learning-insight.next-unit button{width:100%}
}