/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../node_modules/.pnpm/pretendard@1.3.9/node_modules/pretendard/dist/web/variable/pretendardvariable.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url(/_next/static/media/PretendardVariable.ff840cfe.woff2) format('woff2-variations');
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/tokens.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ===== tokens/colors.css ===== */
/* ============================================================
   FishingHub · Color Tokens
   ------------------------------------------------------------
   The palette is built around the sea: a deep, trustworthy
   "Marine" ocean blue as the brand core, a bright "Aqua" teal
   for AI / measurement moments, and a cool blue-grey neutral
   ramp that reads like overcast water. Status colors map to
   fishing semantics — green = 포획 가능, red = 금어기,
   amber = 주의.

   Two layers:
     1) PRIMITIVES  — raw, numbered ramps. Never reference these
        directly in product UI; pick a semantic alias below.
     2) SEMANTIC    — role-based aliases (--text-*, --surface-*,
        --border-*, --status-*). Build with these.
   ============================================================ */

:root {
  /* ---------- PRIMITIVE · Marine (brand / primary) ---------- */
  --marine-50:  #ECF6FC;
  --marine-100: #CFE8F7;
  --marine-200: #9FD0EE;
  --marine-300: #66B4E1;
  --marine-400: #3494CE;
  --marine-500: #1278AE;  /* brand base */
  --marine-600: #0A6293;
  --marine-700: #084E76;
  --marine-800: #0B3F5E;
  --marine-900: #0C3450;
  --marine-950: #07222F;

  /* ---------- PRIMITIVE · Aqua (accent / AI · water) -------- */
  --aqua-50:  #E5FAF8;
  --aqua-100: #BFF1EC;
  --aqua-200: #85E3DC;
  --aqua-300: #45CFC8;
  --aqua-400: #15B4AE;
  --aqua-500: #079A95;  /* accent base */
  --aqua-600: #047C79;
  --aqua-700: #066261;
  --aqua-800: #0A4F4E;
  --aqua-900: #0C4140;

  /* ---------- PRIMITIVE · Neutral (cool blue-grey) --------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FA;
  --neutral-100: #EDF1F5;
  --neutral-200: #DCE3EA;
  --neutral-300: #C4CDD7;
  --neutral-400: #98A6B3;
  --neutral-500: #6D7C8A;
  --neutral-600: #516170;
  --neutral-700: #3B4956;
  --neutral-800: #26313B;
  --neutral-900: #161E26;
  --neutral-950: #0B1117;

  /* ---------- PRIMITIVE · Status ramps --------------------- */
  /* Success · 포획 가능 / 규정 이상 (green) */
  --green-50:  #E7F6EE;
  --green-100: #C2E9D3;
  --green-500: #1FA463;
  --green-600: #168050;
  --green-700: #11623E;

  /* Warning · 주의 / 검토 필요 (amber) */
  --amber-50:  #FDF3E2;
  --amber-100: #FAE1B9;
  --amber-500: #E8930C;
  --amber-600: #C2760A;
  --amber-700: #945A0B;

  /* Danger · 금어기 / 방생 권장 (red) */
  --red-50:  #FCEBEA;
  --red-100: #F7CCC9;
  --red-500: #E0443E;
  --red-600: #BD3530;
  --red-700: #962925;

  /* Info · 정보 안내 (reuses marine family) */
  --info-50:  #ECF6FC;
  --info-500: #1278AE;
  --info-600: #0A6293;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */

  /* Brand */
  --brand:          var(--marine-500);
  --brand-strong:   var(--marine-700);
  --brand-soft:     var(--marine-100);
  --brand-subtle:   var(--marine-50);
  --accent:         var(--aqua-500);
  --accent-strong:  var(--aqua-700);
  --accent-soft:    var(--aqua-100);

  /* Surfaces / backgrounds */
  --surface-page:     var(--neutral-50);
  --surface-card:     var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-inverse:  var(--marine-950);
  --surface-brand:    var(--marine-500);
  --surface-accent:   var(--aqua-500);

  /* Text */
  --text-strong:    var(--neutral-900);  /* headings */
  --text-body:      var(--neutral-800);  /* default body */
  --text-muted:     var(--neutral-500);  /* secondary / captions */
  --text-disabled:  var(--neutral-400);
  --text-inverse:   var(--neutral-0);    /* on brand / dark */
  --text-brand:     var(--marine-600);
  --text-link:      var(--marine-600);

  /* Borders / dividers */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--marine-500);

  /* Status — surface / text / border per role */
  --status-success:        var(--green-500);
  --status-success-text:   var(--green-700);
  --status-success-soft:   var(--green-50);

  --status-warning:        var(--amber-500);
  --status-warning-text:   var(--amber-700);
  --status-warning-soft:   var(--amber-50);

  --status-danger:         var(--red-500);
  --status-danger-text:    var(--red-700);
  --status-danger-soft:    var(--red-50);

  --status-info:           var(--info-500);
  --status-info-text:      var(--info-600);
  --status-info-soft:      var(--info-50);

  /* Focus ring */
  --focus-ring: var(--aqua-400);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   FishingHub · Typography Tokens
   ------------------------------------------------------------
   One typeface, Pretendard Std, across display, body and data.
   The scale is a ~1.2 minor-third built for a mobile-first app
   that mixes Korean prose with dense numeric readouts
   (신뢰도 96%, 체장 25cm, 조위 312cm).

   Layers:
     1) FAMILY        — font stacks
     2) WEIGHT        — named weights (100–900)
     3) SIZE / LH     — raw type scale + line-heights
     4) TRACKING      — letter-spacing
     5) SEMANTIC ROLES — ready-made role tokens (display, title,
        body, label, caption, data)
   ============================================================ */

:root {
  /* ---------- FAMILY ---------- */
  --font-sans: "Pretendard Std", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI",
               Roboto, sans-serif;
  /* Numeric / tabular contexts reuse the same family — Pretendard
     ships tabular figures; pair with font-feature-settings below. */
  --font-data: var(--font-sans);
  --font-num-features: "tnum" 1, "ss01" 0; /* tabular numerals */

  /* ---------- WEIGHT ---------- */
  --weight-thin:        100;
  --weight-extralight:  200;
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;
  --weight-black:       900;

  /* ---------- SIZE (px → rem, root 16px) ---------- */
  --size-2xs:  11px;
  --size-xs:   12px;
  --size-sm:   14px;
  --size-md:   16px;   /* base body */
  --size-lg:   18px;
  --size-xl:   20px;
  --size-2xl:  24px;
  --size-3xl:  30px;
  --size-4xl:  36px;
  --size-5xl:  46px;
  --size-6xl:  58px;

  /* ---------- LINE-HEIGHT ---------- */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;   /* long Korean body copy */

  /* ---------- LETTER-SPACING ---------- */
  --tracking-tighter: -0.03em;  /* large display headings */
  --tracking-tight:   -0.015em; /* titles */
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.06em;   /* small all-caps / labels */

  /* ============================================================
     SEMANTIC ROLES
     Each role bundles size + weight + line-height + tracking.
     Compose in CSS, e.g.
       h1 { font: var(--weight-extrabold) var(--size-4xl)/var(--leading-tight) var(--font-sans); }
     or use the individual role tokens below.
     ============================================================ */

  /* Display — hero numbers, splash, big stats (낚시 점수 87) */
  --role-display-size:    var(--size-6xl);
  --role-display-weight:  var(--weight-black);
  --role-display-leading: var(--leading-none);
  --role-display-tracking:var(--tracking-tighter);

  /* Title — screen + section headings */
  --role-title-size:      var(--size-3xl);
  --role-title-weight:    var(--weight-extrabold);
  --role-title-leading:   var(--leading-tight);
  --role-title-tracking:  var(--tracking-tight);

  /* Heading — card / list-group headers */
  --role-heading-size:    var(--size-xl);
  --role-heading-weight:  var(--weight-bold);
  --role-heading-leading: var(--leading-snug);
  --role-heading-tracking:var(--tracking-tight);

  /* Body — default reading text */
  --role-body-size:       var(--size-md);
  --role-body-weight:     var(--weight-regular);
  --role-body-leading:    var(--leading-relaxed);
  --role-body-tracking:   var(--tracking-normal);

  /* Body strong — emphasized inline body */
  --role-body-strong-weight: var(--weight-semibold);

  /* Label — buttons, tabs, form labels */
  --role-label-size:      var(--size-sm);
  --role-label-weight:    var(--weight-semibold);
  --role-label-leading:   var(--leading-snug);
  --role-label-tracking:  var(--tracking-normal);

  /* Caption — timestamps, helper, meta */
  --role-caption-size:    var(--size-xs);
  --role-caption-weight:  var(--weight-medium);
  --role-caption-leading: var(--leading-snug);
  --role-caption-tracking:var(--tracking-wide);

  /* Data — tabular numeric readouts (cm, %, 조위) */
  --role-data-size:       var(--size-2xl);
  --role-data-weight:     var(--weight-bold);
  --role-data-leading:    var(--leading-none);
  --role-data-tracking:   var(--tracking-tight);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   FishingHub · Spacing Tokens
   ------------------------------------------------------------
   Base unit = 4px, anchored on an 8pt grid so layouts align
   with both iOS (8pt) and Android Material (8dp) guidelines.
   Use the numbered --space-* scale for margins, padding and
   gaps; semantic aliases below cover recurring app patterns
   (screen gutters, list rows, touch targets, safe areas).
   ============================================================ */

:root {
  /* ---------- Base grid ---------- */
  --space-unit: 4px;          /* atomic step */

  /* ---------- Numbered scale (4px steps, 8pt-aligned) ---------- */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;   /* default screen gutter */
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ============================================================
     SEMANTIC SPACING — recurring layout roles
     ============================================================ */

  /* Screen / container gutters */
  --space-screen-x:   var(--space-4);   /* 16 — default L/R page padding */
  --space-screen-y:   var(--space-6);   /* 24 — top/bottom section rhythm */
  --space-section-gap:var(--space-8);   /* 32 — between major sections */

  /* Card & surface insets */
  --space-card-pad:   var(--space-4);   /* 16 — inner card padding */
  --space-card-gap:   var(--space-3);   /* 12 — gap between stacked cards */

  /* Lists & rows */
  --space-list-pad-y: var(--space-3);   /* 12 — list-row vertical padding */
  --space-list-gap:   var(--space-2);   /* 8  — icon↔label, inline groups */
  --space-inline-gap: var(--space-2);   /* 8  — chips, tags, button rows */

  /* Form controls */
  --space-field-pad-x:var(--space-4);   /* 16 */
  --space-field-pad-y:var(--space-3);   /* 12 */
  --space-field-gap:  var(--space-5);   /* 20 — between form fields */

  /* ---------- Touch targets (iOS 44pt / Android 48dp) ---------- */
  --target-min-ios:     44px;   /* Apple HIG minimum */
  --target-min-android: 48px;   /* Material minimum */
  --target-min:         48px;   /* system default — satisfies both */

  /* ---------- Safe-area insets (notch / home indicator) ---------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ---------- Standard bar heights ---------- */
  --bar-nav-ios:     44px;   /* iOS navigation bar */
  --bar-nav-android: 56px;   /* Material top app bar */
  --bar-tab:         56px;   /* bottom tab bar (content height) */
}

/* ===== tokens/radius.css ===== */
/* ============================================================
   FishingHub · Radius Tokens
   ------------------------------------------------------------
   Soft, friendly corners throughout. Values sit between iOS's
   continuous-curve cards (~12–16pt) and Material's shape scale
   (small 8 / medium 12 / large 16). Pills (full) for chips,
   buttons and status badges.
   ============================================================ */

:root {
  /* ---------- Numbered scale ---------- */
  --radius-none: 0px;
  --radius-xs:   4px;    /* tiny — nested tags, swatches */
  --radius-sm:   8px;    /* inputs, small controls */
  --radius-md:   12px;   /* buttons, list items */
  --radius-lg:   16px;   /* cards, sheets */
  --radius-xl:   20px;   /* large cards, modals */
  --radius-2xl:  28px;   /* bottom sheets, hero panels */
  --radius-full: 999px;  /* pills, chips, avatars, FAB */

  /* ============================================================
     SEMANTIC RADIUS — component roles
     ============================================================ */
  --radius-button:  var(--radius-md);   /* 12 */
  --radius-input:   var(--radius-sm);   /* 8  */
  --radius-card:    var(--radius-lg);   /* 16 */
  --radius-sheet:   var(--radius-2xl);  /* 28 — top corners of bottom sheet */
  --radius-modal:   var(--radius-xl);   /* 20 */
  --radius-chip:    var(--radius-full); /* pill */
  --radius-badge:   var(--radius-full); /* pill */
  --radius-avatar:  var(--radius-full); /* circle */
  --radius-thumb:   var(--radius-md);   /* 12 — image thumbnails */
}

/* ===== tokens/shadow.css ===== */
/* ============================================================
   FishingHub · Shadow / Elevation Tokens
   ------------------------------------------------------------
   A restrained elevation system. Shadows are soft, cool-tinted
   (built on marine-950, not pure black) and low-opacity —
   borders do most of the separation work; shadows lift only
   interactive or floating surfaces.

   The numbered scale maps to Material elevation levels and to
   iOS's subtle ambient shadowing. Each level layers a tight
   "key" shadow over a wider "ambient" shadow.
   ============================================================ */

:root {
  /* Shadow color is the deep marine, kept cool. Opacity rises
     with elevation. Defined once so themes can retint. */
  --shadow-color: 207 79% 11%;   /* HSL of ~marine-950, for hsl()/alpha */

  /* ---------- Elevation scale ---------- */
  --shadow-none: none;

  /* 0dp resting flat surface — hairline only (use border instead). */
  --shadow-xs:
    0 1px 2px hsl(var(--shadow-color) / 0.06);

  /* ~1dp — cards at rest, list items */
  --shadow-sm:
    0 1px 2px hsl(var(--shadow-color) / 0.08),
    0 1px 3px hsl(var(--shadow-color) / 0.06);

  /* ~3dp — raised cards, search bar */
  --shadow-md:
    0 2px 4px hsl(var(--shadow-color) / 0.08),
    0 4px 8px hsl(var(--shadow-color) / 0.08);

  /* ~6dp — menus, popovers, FAB at rest */
  --shadow-lg:
    0 4px 8px hsl(var(--shadow-color) / 0.10),
    0 8px 16px hsl(var(--shadow-color) / 0.10);

  /* ~12dp — bottom sheets, dialogs */
  --shadow-xl:
    0 8px 16px hsl(var(--shadow-color) / 0.12),
    0 16px 32px hsl(var(--shadow-color) / 0.12);

  /* ~24dp — modal dialog over scrim */
  --shadow-2xl:
    0 12px 24px hsl(var(--shadow-color) / 0.14),
    0 24px 48px hsl(var(--shadow-color) / 0.16);

  /* Focus / accent glow — aqua, for emphasized interactive states */
  --shadow-focus:
    0 0 0 3px hsl(183 90% 38% / 0.30);

  /* Inset — pressed wells, sunken inputs */
  --shadow-inset:
    inset 0 1px 2px hsl(var(--shadow-color) / 0.10);

  /* ============================================================
     SEMANTIC ELEVATION — component roles
     ============================================================ */
  --elevation-card:    var(--shadow-sm);   /* resting card */
  --elevation-raised:  var(--shadow-md);   /* search bar, raised card */
  --elevation-nav:     var(--shadow-md);   /* top app bar / tab bar */
  --elevation-popover: var(--shadow-lg);   /* dropdowns, menus, tooltips */
  --elevation-fab:     var(--shadow-lg);   /* floating action button */
  --elevation-sheet:   var(--shadow-xl);   /* bottom sheet */
  --elevation-dialog:  var(--shadow-2xl);  /* modal dialog */
}

/* ===== tokens/border.css ===== */
/* ============================================================
   FishingHub · Border Tokens
   ------------------------------------------------------------
   Hairline borders are the primary way surfaces are separated
   (shadows stay subtle). Widths follow a tight scale; the
   ready-made `--stroke-*` shorthands compose width + style +
   the color aliases declared in colors.css
   (--border-subtle / --border-default / --border-strong / …).
   ============================================================ */

:root {
  /* ---------- Width ---------- */
  --border-width-0:     0px;
  --border-width-hair:  1px;    /* default hairline */
  --border-width-thick: 2px;    /* emphasis / focus outline */
  --border-width-heavy: 4px;    /* accent bar, selected indicator */

  /* ---------- Style ---------- */
  --border-style-solid:  solid;    /* @kind other */
  --border-style-dashed: dashed;    /* @kind other */ /* upload / drop zones */

  /* ============================================================
     SEMANTIC STROKES — ready-to-use `border:` shorthands.
     Named --stroke-* to avoid clashing with the --border-*
     COLOR aliases in colors.css that they consume.
     ============================================================ */
  --stroke-hairline:  var(--border-width-hair) solid var(--border-subtle);   /* @kind other */
  --stroke-default:   var(--border-width-hair) solid var(--border-default);  /* @kind other */
  --stroke-strong:    var(--border-width-hair) solid var(--border-strong);   /* @kind other */
  --stroke-brand:     var(--border-width-thick) solid var(--border-brand);   /* @kind other */
  --stroke-focus:     var(--border-width-thick) solid var(--focus-ring);     /* @kind other */
  --stroke-divider:   var(--border-width-hair) solid var(--border-subtle);   /* @kind other */

  /* Dashed dropzone (포인트 사진 업로드, 측정 매트) */
  --stroke-dropzone:  var(--border-width-thick) dashed var(--border-default);/* @kind other */

  /* Selected / active indicator bar (tabs, list selection) */
  --stroke-indicator: var(--border-width-heavy) solid var(--brand);          /* @kind other */
}

/* ===== tokens/motion.css ===== */
/* ============================================================
   FishingHub · Motion Tokens
   ------------------------------------------------------------
   Calm, utility-grade motion. Quick fades and slides, ease-out
   on entrance; no bounce, no infinite decorative loops. Durations
   and easings are tuned to feel native on both platforms — iOS's
   smooth ease and Material's standard/emphasized curves.

   Always pair with @media (prefers-reduced-motion: reduce) to
   drop non-essential animation.
   ============================================================ */

:root {
  /* ---------- Duration ---------- */
  --duration-instant: 80ms;     /* @kind other */ /* tiny state flips */
  --duration-fast:    120ms;    /* @kind other */ /* hover / press */
  --duration-base:    180ms;    /* @kind other */ /* default UI transition */
  --duration-slow:    240ms;    /* @kind other */ /* sheets, larger moves */
  --duration-slower:  320ms;    /* @kind other */ /* page transitions */
  --duration-deliberate: 480ms; /* @kind other */ /* hero / score reveal */

  /* ---------- Easing ---------- */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);  /* @kind other */ /* most enter/exit */
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);    /* @kind other */ /* entering (ease-out) */
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);  /* @kind other */ /* leaving (ease-in) */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */ /* expressive moves */
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);/* @kind other */ /* iOS-like in-out */
  --ease-linear:     linear;                      /* @kind other */ /* progress / spinners */

  /* ============================================================
     SEMANTIC TRANSITIONS — ready-made `transition:` values
     ============================================================ */
  --transition-colors:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);  /* @kind other */
  --transition-transform: transform var(--duration-base) var(--ease-standard); /* @kind other */
  --transition-opacity:   opacity var(--duration-base) var(--ease-standard);   /* @kind other */
  --transition-sheet:     transform var(--duration-slow) var(--ease-emphasized); /* @kind other */
  --transition-all:       all var(--duration-base) var(--ease-standard);       /* @kind other */

  /* Press feedback — scale used by buttons/cards on :active */
  --press-scale: 0.97;  /* @kind other */
}

/* ===== tokens/opacity.css ===== */
/* ============================================================
   FishingHub · Opacity Tokens
   ------------------------------------------------------------
   Opacity for disabled states, overlays/scrims, dividers, and
   pressed/hover state layers. Scrims use the deep marine so
   dimmed backgrounds stay on-brand and cool.
   ============================================================ */

:root {
  /* ---------- Raw scale ---------- */
  --opacity-0:    0;      /* @kind other */
  --opacity-5:    0.05;   /* @kind other */
  --opacity-10:   0.10;   /* @kind other */
  --opacity-20:   0.20;   /* @kind other */
  --opacity-40:   0.40;   /* @kind other */
  --opacity-60:   0.60;   /* @kind other */
  --opacity-80:   0.80;   /* @kind other */
  --opacity-100:  1;      /* @kind other */

  /* ============================================================
     SEMANTIC OPACITY — state roles
     ============================================================ */
  --opacity-disabled:   0.40;   /* @kind other */ /* disabled controls / text */
  --opacity-muted:      0.60;   /* @kind other */ /* secondary, de-emphasized */
  --opacity-hover:      0.08;   /* @kind other */ /* hover state-layer */
  --opacity-pressed:    0.12;   /* @kind other */ /* pressed/ripple state-layer */
  --opacity-focus:      0.12;   /* @kind other */ /* focus state-layer */
  --opacity-divider:    0.12;   /* @kind other */ /* dividers on tints */
  --opacity-backdrop:   0.50;   /* @kind other */ /* modal / sheet scrim strength */

  /* ---------- Scrim (deep marine, ready to use) ---------- */
  --scrim:        hsl(207 79% 11% / 0.50);   /* @kind color */ /* modal / sheet backdrop */
  --scrim-light:  hsl(207 79% 11% / 0.32);   /* @kind color */ /* map overlay, light dim */
  --scrim-strong: hsl(207 79% 11% / 0.70);   /* @kind color */ /* full-screen image viewer */

  /* State-layer tints for interactive surfaces (Material-style) */
  --state-hover-brand:   hsl(202 82% 38% / 0.08);  /* @kind color */
  --state-pressed-brand: hsl(202 82% 38% / 0.14);  /* @kind color */
}


/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/theme.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   Nutrition Engine · Console theme
   shadcn/ui-compatible semantic tokens mapped onto the
   FishingHub Design System ramps. Light + dark.
   "aqua" (teal-green) is the nutrition brand accent.
   ============================================================ */

:root {
  /* ---- shadcn semantic tokens (LIGHT) ---- */
  --background:            var(--neutral-50);
  --foreground:            var(--neutral-900);
  --card:                  #ffffff;
  --card-foreground:       var(--neutral-900);
  --popover:               #ffffff;
  --popover-foreground:    var(--neutral-900);

  --primary:               var(--aqua-600);     /* fresh green-teal */
  --primary-foreground:    #ffffff;
  --primary-hover:         var(--aqua-700);
  --primary-soft:          var(--aqua-50);
  --primary-soft-border:   var(--aqua-200);
  --primary-soft-text:     var(--aqua-700);

  --secondary:             var(--neutral-100);
  --secondary-foreground:  var(--neutral-800);
  --secondary-hover:       var(--neutral-200);

  --muted:                 var(--neutral-100);
  --muted-foreground:      var(--neutral-500);
  --accent-bg:             var(--neutral-100);
  --accent-foreground:     var(--neutral-900);

  --destructive:           var(--red-600);
  --destructive-foreground:#ffffff;
  --destructive-hover:     var(--red-700);

  --border:                var(--neutral-200);
  --border-strong:         var(--neutral-300);
  --input:                 var(--neutral-200);
  --ring:                  var(--aqua-400);

  --surface-sunken:        var(--neutral-50);
  --surface-hover:         var(--neutral-50);
  --surface-inverse:       var(--marine-950);
  --row-stripe:            #fafcfd;

  /* status soft fills */
  --status-success-soft:   var(--green-50);
  --status-warning-soft:   var(--amber-50);
  --status-danger-soft:    var(--red-50);
  --status-info-soft:      var(--info-50);
  --status-success-text:   var(--green-700);
  --status-warning-text:   var(--amber-700);
  --status-danger-text:    var(--red-700);
  --status-info-text:      var(--info-600);
  --status-success:        var(--green-500);
  --status-warning:        var(--amber-500);
  --status-danger:         var(--red-500);
  --status-info:           var(--info-500);

  --chart-grid:            var(--neutral-200);
  --chart-axis:            var(--neutral-400);

  color-scheme: light;
}

.dark {
  --background:            #0A1016;
  --foreground:            #EDF1F5;
  --card:                  #11181F;
  --card-foreground:       #EDF1F5;
  --popover:               #161E26;
  --popover-foreground:    #EDF1F5;

  --primary:               var(--aqua-400);
  --primary-foreground:    #04201F;
  --primary-hover:         var(--aqua-300);
  --primary-soft:          rgba(7,154,149,0.16);
  --primary-soft-border:   rgba(21,180,174,0.32);
  --primary-soft-text:     #45CFC8;

  --secondary:             #1B242D;
  --secondary-foreground:  #DCE3EA;
  --secondary-hover:       #232E38;

  --muted:                 #1B242D;
  --muted-foreground:      #8C9AA8;
  --accent-bg:             #1B242D;
  --accent-foreground:     #EDF1F5;

  --destructive:           #E0443E;
  --destructive-foreground:#ffffff;
  --destructive-hover:     #c23a35;

  --border:                #232E38;
  --border-strong:         #344150;
  --input:                 #2A3640;
  --ring:                  var(--aqua-400);

  --surface-sunken:        #0D141B;
  --surface-hover:         #18212A;
  --surface-inverse:       #060F15;
  --row-stripe:            #131B22;

  --status-success-soft:   rgba(31,164,99,0.16);
  --status-warning-soft:   rgba(232,147,12,0.16);
  --status-danger-soft:    rgba(224,68,62,0.16);
  --status-info-soft:      rgba(52,148,206,0.18);
  --status-success-text:   #5BD395;
  --status-warning-text:   #F2B45C;
  --status-danger-text:    #F2918C;
  --status-info-text:      #66B4E1;
  --status-success:        #2BB873;
  --status-warning:        #F0A22A;
  --status-danger:         #E85F59;
  --status-info:           #3494CE;

  --chart-grid:            #232E38;
  --chart-axis:            #516170;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

#root { height: 100%; }

/* numbers */
.tnum { font-feature-settings: "tnum" 1, "tnum"; font-variant-numeric: tabular-nums; }

/* code / identifiers */
.mono {
  font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace,
               "Menlo", "Consolas", monospace;
  font-feature-settings: "tnum" 1;
}

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid var(--background);
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* focus */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

button { font-family: inherit; }

/* selection */
::selection { background: var(--primary-soft); color: var(--primary-soft-text); }

/* utility animations */
@keyframes ne-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ne-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ne-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes ne-spin { to { transform: rotate(360deg); } }
@keyframes ne-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ne-scale-in { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.ne-screen { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Nutrition Engine · component classes (built on FishingHub + theme tokens) */

/* ---------------- Buttons ---------------- */
.ne-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: var(--weight-semibold); font-size: var(--size-sm);
  line-height: 1; white-space: nowrap; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  border-radius: var(--radius-button); border: 1px solid transparent;
  padding: 0 14px; height: 36px; transition: var(--transition-colors), transform var(--duration-fast) var(--ease-standard);
}
.ne-btn:active { transform: scale(0.97); }
.ne-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; }
.ne-btn.sm { height: 30px; padding: 0 11px; font-size: var(--size-xs); border-radius: var(--radius-sm); }
.ne-btn.lg { height: 42px; padding: 0 20px; font-size: var(--size-md); }
.ne-btn.icon { padding: 0; width: 36px; }
.ne-btn.icon.sm { width: 30px; }
.ne-btn.block { width: 100%; }

.ne-btn.primary { background: var(--primary); color: var(--primary-foreground); }
.ne-btn.primary:hover:not(:disabled) { background: var(--primary-hover); }
.ne-btn.secondary { background: var(--card); color: var(--secondary-foreground); border-color: var(--border); }
.ne-btn.secondary:hover:not(:disabled) { background: var(--secondary); border-color: var(--border-strong); }
.ne-btn.ghost { background: transparent; color: var(--secondary-foreground); }
.ne-btn.ghost:hover:not(:disabled) { background: var(--secondary); }
.ne-btn.destructive { background: var(--destructive); color: var(--destructive-foreground); }
.ne-btn.destructive:hover:not(:disabled) { background: var(--destructive-hover); }
.ne-btn.danger-ghost { background: transparent; color: var(--status-danger-text); }
.ne-btn.danger-ghost:hover:not(:disabled) { background: var(--status-danger-soft); }

/* ---------------- Card ---------------- */
.ne-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--elevation-card);
}
.ne-card.flush { box-shadow: none; }
.ne-card-pad { padding: 20px; }
.ne-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.ne-card-title { font-size: var(--size-md); font-weight: var(--weight-bold); color: var(--card-foreground); letter-spacing: var(--tracking-tight); }
.ne-card-sub { font-size: var(--size-xs); color: var(--muted-foreground); margin-top: 2px; font-weight: var(--weight-medium); }

/* ---------------- Badge / Chip ---------------- */
.ne-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--size-2xs); font-weight: var(--weight-semibold);
  padding: 3px 9px; border-radius: var(--radius-full); line-height: 1.4;
  border: 1px solid transparent; letter-spacing: .01em; white-space: nowrap;
}
.ne-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.ne-badge.neutral  { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }
.ne-badge.success  { background: var(--status-success-soft); color: var(--status-success-text); }
.ne-badge.warning  { background: var(--status-warning-soft); color: var(--status-warning-text); }
.ne-badge.danger   { background: var(--status-danger-soft); color: var(--status-danger-text); }
.ne-badge.info     { background: var(--status-info-soft); color: var(--status-info-text); }
.ne-badge.brand    { background: var(--primary-soft); color: var(--primary-soft-text); border-color: var(--primary-soft-border); }
.ne-badge.outline  { background: transparent; color: var(--muted-foreground); border-color: var(--border-strong); }

.ne-chip {
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
  font-size: var(--size-2xs); font-weight: var(--weight-medium);
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--secondary); color: var(--secondary-foreground); border: 1px solid var(--border);
}
.ne-chip.mono { font-size: 11px; }

/* ---------------- Inputs ---------------- */
.ne-input, .ne-select {
  width: 100%; height: 36px; padding: 0 12px;
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius-input);
  font-size: var(--size-sm); font-family: inherit; transition: var(--transition-colors);
}
.ne-input::placeholder { color: var(--muted-foreground); }
.ne-input:focus, .ne-select:focus { outline: none; border-color: var(--ring); box-shadow: var(--shadow-focus); }
.ne-input.sm, .ne-select.sm { height: 30px; font-size: var(--size-xs); }
.ne-label { display: block; font-size: var(--size-xs); font-weight: var(--weight-semibold); color: var(--foreground); margin-bottom: 6px; }
.ne-hint { font-size: var(--size-2xs); color: var(--muted-foreground); margin-top: 5px; }

/* ---------------- Table ---------------- */
.ne-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--size-sm); }
.ne-table th {
  text-align: left; font-size: var(--size-2xs); font-weight: var(--weight-semibold);
  color: var(--muted-foreground); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
  background: var(--card); position: -webkit-sticky; position: sticky; top: 0; z-index: 1;
}
.ne-table th.sortable { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.ne-table th.sortable:hover { color: var(--foreground); }
.ne-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--card-foreground); vertical-align: middle; }
.ne-table tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
.ne-table tbody tr:hover { background: var(--surface-hover); }
.ne-table tbody tr.clickable { cursor: pointer; }
.ne-table tbody tr:last-child td { border-bottom: none; }
.ne-table .num { text-align: right; font-feature-settings: "tnum" 1; }

/* ---------------- Tabs ---------------- */
.ne-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--secondary); border-radius: var(--radius-md); border: 1px solid var(--border); }
.ne-tab {
  border: none; background: transparent; cursor: pointer;
  font-size: var(--size-xs); font-weight: var(--weight-semibold); color: var(--muted-foreground);
  padding: 6px 13px; border-radius: var(--radius-sm); transition: var(--transition-colors);
}
.ne-tab:hover { color: var(--foreground); }
.ne-tab.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

.ne-segtab {
  border: none; background: transparent; cursor: pointer; position: relative;
  font-size: var(--size-sm); font-weight: var(--weight-semibold); color: var(--muted-foreground);
  padding: 11px 2px; margin-right: 22px; transition: var(--transition-colors);
}
.ne-segtab:hover { color: var(--foreground); }
.ne-segtab.active { color: var(--primary); }
.ne-segtab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px; }

/* ---------------- Misc ---------------- */
.ne-kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: var(--weight-semibold); font-family: inherit;
  color: var(--muted-foreground); background: var(--secondary); border: 1px solid var(--border);
  border-radius: 5px;
}
.ne-divider { height: 1px; background: var(--border); border: none; margin: 0; }

.ne-skel { background: linear-gradient(90deg, var(--muted) 25%, var(--secondary) 37%, var(--muted) 63%); background-size: 800px 100%; animation: ne-shimmer 1.4s linear infinite; border-radius: var(--radius-sm); }

.ne-tip-wrap { position: relative; display: inline-flex; }
.ne-tip {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--surface-inverse); color: #fff; font-size: var(--size-2xs); font-weight: var(--weight-medium);
  padding: 6px 9px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); z-index: 60; box-shadow: var(--shadow-lg);
}
.ne-tip-wrap:hover .ne-tip { opacity: 1; }

.ne-toast-wrap { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.ne-toast {
  display: flex; align-items: flex-start; gap: 10px; min-width: 280px; max-width: 380px;
  background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xl); padding: 12px 14px;
  animation: ne-drawer-in var(--duration-slow) var(--ease-standard);
}

.ne-overlay { position: fixed; inset: 0; background: hsl(var(--shadow-color) / var(--scrim, .5)); z-index: 120; animation: ne-fade-in var(--duration-base) var(--ease-standard); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ne-dialog {
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-modal);
  box-shadow: var(--shadow-2xl); width: 100%; max-width: 480px; animation: ne-scale-in var(--duration-slow) var(--ease-standard);
}
.ne-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 92vw; z-index: 130;
  background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-2xl);
  display: flex; flex-direction: column; animation: ne-drawer-in var(--duration-slow) var(--ease-standard);
}

.ne-progress { height: 7px; background: var(--secondary); border-radius: 999px; overflow: hidden; }
.ne-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width var(--duration-slow) var(--ease-standard); }

.ne-meter-track { height: 10px; background: var(--secondary); border-radius: 999px; overflow: hidden; display: flex; }

.ne-code {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.65; background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px;
  overflow: auto; color: var(--card-foreground); white-space: pre;
}
.ne-code .k { color: var(--primary); }
.ne-code .s { color: var(--status-success-text); }
.ne-code .n { color: var(--status-info-text); }
.ne-code .c { color: var(--muted-foreground); }

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* 콘솔 베이스 — 토큰/테마/컴포넌트 CSS 는 layout.tsx 에서 순서대로 import.
   여기서는 폰트만 Pretendard Variable(npm `pretendard`)로 오버라이드한다.
   (디자인 번들은 Pretendard Std OTF 9종을 썼으나, 패키지 가변폰트로 대체 — 시각 동일 계열.) */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
}

/* 앱 루트 컨테이너 — 디자인 #root 와 동일하게 전체 높이 점유 */
#root {
  height: 100vh;
  height: 100dvh;
}

/* a11y: 툴팁은 호버뿐 아니라 키보드 포커스에서도 노출(components.css 는 :hover 만) */
.ne-tip-wrap:focus-within .ne-tip {
  opacity: 1;
}